Chrome 扩展获取 API - 内容安全政策答案

【问题标题】：Chrome extension fetch API - Content Security PolicyChrome 扩展获取 API - 内容安全政策
【发布时间】：2019-07-24 05:34:55
【问题描述】：

我的 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 请求正常工作。

【问题讨论】：

标签： javascript google-chrome fetch-api content-security-policy

【解决方案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/;"

【讨论】：