CSP拒绝加载脚本，违反了以下内容安全策略指令："Script-src'自己'"

Question

有人能告诉我如何将CSP元标记添加到标题中吗？我尝试将不同的meta标记添加到我的头中，但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标头发布了CSP，因为控制台错误显示：

它违反了以下内容安全策略指令default-src'自己'

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

您可以检查您拥有的CSP响应HTTP标头，教程在这里。

在这种情况下，通过添加meta标记，您将有两个CSP，它们将彼此独立工作，因此HTTP头中的CSP将继续阻止您的脚本。

Node.js在dependencies中有一个头盔中间件，头盔4通过HTTP头自动发布默认CSP。检查它。
在这种情况下，您有两种选择：

• 禁用头盔的CSP：app.use（头盔（{contentSecurityPolic： false, }) );并使用meta标记。
• 通过头盔（首选方式）配置CSP报头。

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

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. 错过 之前脚本src