CSP，拒绝加载脚本，违反了以下内容安全策略指令：“script-src 'self'”

Question

有人可以向我解释如何将 CSP 元标记添加到我的 header 吗？ 我尝试向我的 header 添加不同的元标记，但我从 CSP 收到更多错误

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:*//api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js;">

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data:gap 'unsafe-eval' ws: ; style-src 'self' 'unsafe-inline' script-src *; media-src *; font-src *;  connect-src *; img-src 'self' data: content:;">

控制台错误堆栈

Answer 1

看起来您已经通过 HTTP header 发布了 CSP，因为控制台错误提示：

它违反了以下内容安全策略指令“ default-src 'self' ”

而您的元标记包含其他default-src来源： default-src 'self' https:*//api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js

您可以查看您拥有的 CSP 响应 HTTP header，教程在这里。

在这种情况下，通过添加元标记，您将拥有 2 个相互独立工作的 CSP，因此 HTTP header 中的 CSP 将继续阻止您的脚本。

Node.js 在依赖项中有一个 Helmet 中间件， Helmet 4通过 HTTP header 自动发布默认 CSP。检查它。
在这种情况下，您有 2 个选择：

• 禁用 Helmet 的 CSP： app.use( helmet({ contentSecurityPolicy: false, }) ); 并使用元标记。
• 通过 Helmet（首选方式）配置 CSP header。

顺便说一句，您在以下方面有错误：

default-src 'self' data:gap 'unsafe-eval' ws: ; style-src 'self' 'unsafe-inline' script-src *; media-src *; font-src *;  connect-src *; img-src 'self' data: content:;

1. data:gap是一个错误的来源，使用data:或data: gap:取决于你需要什么。
2. 错过了; 在script-src之前