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

Question

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

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

不幸的是，它会引发以下错误：

拒绝连接到“ https://gloapi.gitkraken.com/v1/glo/boards ”，因为它违反了以下内容安全策略指令：“default-src 'self'”。 请注意，未明确设置 'connect-src'，因此使用 'default-src' 作为后备。

经过一番研究，我发现 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:;"

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

忽略指令“default-src”中不安全的 CSP 值“gloapi.gitkraken.com”。

我的 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