内容安全策略阻止的所有 CDN

Question

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

情况如下：

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

我试图从这里放入带有 CDN 的元标记：，但它没有用，我什至遇到了更多错误。

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

Answer 1

Content Security Policy 以相反的方式工作。 CDN 需要允许访问您的 url 才能使用他们的资源，而不是相反。他们将不得不添加 header 和 access-control-allow-origin，然后设置 * 的值，这意味着任何人都可以使用他们的资源文件或特别是您的域 url.

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

Answer 2

CASE 1 (works): When I just move my HTML file in the browser (so C://... .html) it works and gets all cdn's

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

CASE 2 (doesn't work): When I start my server (using express) in Node.js and then go to localhost:4000 it doesn't get the CDN's due to Content Security Policy (I can see it in console as it says its being blocked by it)

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

您可以禁用一个中间件：

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

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

注意：下次请将控制台消息添加到问题中，它们在 CSP 的情况下非常有用。

内容安全策略阻止的所有 CDN

All CDN's blocked by Content Security Policy

html

javascript

jquery

node.js

content-security-policy