Chrome扩展程序获取API - 内容安全策略

Question

我的chrome扩展应该通过HTTP请求从第三方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