内容安全策略阻止所有 CDN答案

【问题标题】：All CDN's blocked by Content Security Policy内容安全策略阻止所有 CDN
【发布时间】：2021-09-19 20:42:48
【问题描述】：

我只是想用 Node.js 做一个简单的网站，但是我无法在不受内容安全策略阻止的情况下从 Bootstrap 获取 CSS 和 JS 文件的 CDN。

会发生什么：

案例 1（有效）：当我只是在浏览器中移动我的 HTML 文件（所以 C://... .html）时，它可以工作并获取所有 CDN
案例 2（不起作用）：当我在 Node.js 中启动我的服务器（使用 express）然后转到 localhost:4000 时，由于内容，它没有获得 CDN安全策略（我可以在控制台中看到它，因为它说它被它阻止了）

我试图从这里放入带有 CDN 的元标记：Content Security Policy: The page's settings blocked the loading of a resource，但它不起作用，我什至得到了更多错误。

我该如何解决这个问题？我找不到任何解决方案。

【问题讨论】：

标签： javascript html jquery node.js content-security-policy

【解决方案1】：

案例 1（有效）：当我在浏览器中移动我的 HTML 文件（所以 C://... .html）时，它可以工作并获取所有 cdn

当您的网页从 C://... .html 工作时，它没有发布任何内容安全策略 (CSP)，因此没有任何内容被阻止。

CASE 2（不起作用）：当我在 Node.js 中启动我的服务器（使用 express）然后转到 localhost:4000 时，由于内容安全策略，它没有获得 CDN（我可以在控制台，因为它说它被它阻止了）

当您的网页从 localhost:4000 工作时，server publishes 默认 CSP。 NodeJS 在依赖项中有一个 Helmet 中间件，它发布这个默认的 CSP 标头。

您可以禁用中间件：

// This disables the `contentSecurityPolicy` middleware but keeps the rest.
app.use(
  helmet({
    contentSecurityPolicy: false,
  })
);

或将其配置为允许外部 CDN，请参阅helmet.contentSecurityPolicy(options) 部分中的详细信息。

注意：下次请在问题中添加控制台消息，它们对 CSP 很有帮助。

【讨论】：

【解决方案2】：

Content Security Policy 正好相反。 CDN 需要授予对您 url 的访问权限才能使用他们的资源，而不是相反。他们必须添加带有access-control-allow-origin 的标头，然后设置* 的值，这意味着任何人都可以使用他们的资源文件或特别是您的域网址。

所以很可能您的 url 中有错字，并且该域不允许 localhost 获取他们的 js 文件。

【讨论】：