node.js - 使用 Helmet 设置 CSP 和 CORS header 后未加载资源

Question

为了让网络应用程序更安全并迫使自己更好地控制 future 的添加(不同 CDN 上的 JS 和 CSS 资源)，我在我的 Fastify(与 Express 相同)网络应用程序中运行 Helmet 插件。

如果我停用所有 Helm 控件，如下所示:fastify.register(helmet, false) 一切正常，所有资源都加载到客户端。

然后我尝试使用不同的配置进行游戏(直到精疲力尽)，但没有任何效果。配置和浏览器错误如下:

{
    // contentSecurityPolicy: false,
    crossOriginResourcePolicy: { policy: 'same-site'}, 
    contentSecurityPolicy: {
      directives: {
        ...require("fastify-helmet").contentSecurityPolicy.getDefaultDirectives(),
        "default-src": ["'self'"],
        "style-src": ["'self'", "'unsafe-inline'", 'unpkg.com', 'cdn.jsdelivr.net',
          'fonts.googleapis.com', 'use.fontawesome.com'],
        "script-src": ["'self'", 'unpkg.com', "cdn.jsdelivr.net", "'unsafe-inline'"],
        "img-src": ["'self'", "'data'", "*.tile.osm.org"],
        "font-src": ["'self'", 'fonts.googleapis.com', 'fonts.gstatic.com', 'use.fontawesome.com']
      },
    },
  };

均匀设置

{ contentSecurityPolicy: false, crossOriginResourcePolicy: { policy: 'same-site'} }

使用其他策略变体:同源、跨源似乎都不起作用。

如您所见，我也在 LOCALHOST 上运行，并且没有在其他地方进行测试。

Answer 1

tl;dr:禁用 the Cross-Origin-Embedder-Policy header ，在 Helmet v5 中默认启用。

{
  crossOriginEmbedderPolicy: false,
  // ...
}

---

这里是 Helm 维护员。

Helm 套the Cross-Origin-Embedder-Policy HTTP response header到require-corp。

设置此 header 意味着加载跨域资源(例如来自另一个资源的图像)会更加棘手。例如，加载这样的跨域...

<img alt="My picture" src="https://example.com/image.png">

...不会工作，除非 example.com 通过设置自己的一些响应 header 明确允许它。您的浏览器将尝试加载 example.com/image.png，如果未明确允许，您的浏览器将丢弃响应。

要解决此问题，您可以阻止 Helmet 设置 Cross-Origin-Embedder-Policy header ，如下所示:

app.use(
  helmet({
    crossOriginEmbedderPolicy: false,
    // ...
  })
);

我做了a small sample app你可以用它来玩一下。