Chrome 扩展提取 API - 内容安全政策

Question

我的 chrome 扩展应该通过 HTTP 请求从第三方 API 获取一些远程资源。

const getBoards = callback => {
fetch("https://gloapi.gitkraken.com/v1/glo/boards", {
  credentials: "include"
})
  .then(response => { ... })
  .catch(err => { ... });
};

不幸的是，它抛出以下错误：

Refused to connect to 'https://gloapi.gitkraken.com/v1/glo/boards' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

经过一些研究，我发现 chrome 要求在清单权限和 CSP 字符串中包含 url。

"permissions": [ ..., "https://gloapi.gitkraken.com/" ],
"content_security_policy": "default-src 'self' gloapi.gitkraken.com; script-src 'self' 'sha256-[...]'; style-src * 'unsafe-inline'; img-src 'self' data:;"

但是这些更改并没有解决第一个错误，而是导致了另一个错误。

Ignored insecure CSP value "gloapi.gitkraken.com" in directive 'default-src'.

我的 CSP 格式是否错误，或者我应该做些什么才能使这个 GET HTTP 请求正常工作。

Answer 1

经过更多研究，我找到了解决方案。 GitKraken API 的 URL 应该在 connect-src 属性中，而不是 default-src。所以我的清单现在看起来像这样：

permissions: [ ..., "https://gloapi.gitkraken.com/" ],
"content_security_policy": "default-src 'self'; script-src 'self' 'sha256-[...]'; style-src * 'unsafe-inline'; img-src 'self' data:; connect-src https://gloapi.gitkraken.com/;"

更多信息：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src#Syntax

Chrome 扩展提取 API - 内容安全政策

Chrome extension fetch API - Content Security Policy

javascript

google-chrome

content-security-policy

fetch-api