使用头盔设置 CSP 和 CORP headers 后未加载资源

Question

试图让 web-app 更安全并强迫自己控制更好的未来添加（不同 CDN 上的 JS 和 CSS 资产），我在我的 Fastify 中运行 Helmet 插件（与快递相同）web-app.

如果我停用所有 Helmet 控件，如下所示： 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'} }

与政策的其他变体：same-origin、cross-origin none 似乎有效。

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

Answer 1

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

{
  crossOriginEmbedderPolicy: false,
  // ...
}

这里是头盔维护员。

头盔将 the Cross-Origin-Embedder-Policy HTTP response header 设置为 require-corp。

设置此 header 意味着加载 cross-origin 资源（如来自其他资源的图像）更加棘手。例如，像这样加载 cross-origin...

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

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

要解决此问题，您可以防止头盔设置 Cross-Origin-Embedder-Policy header，如下所示：

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

我做了 a small sample app 你可以用来玩这个。

使用头盔设置 CSP 和 CORP headers 后未加载资源

Ressources not loaded after setting CSP and CORP headers using Helmet

node.js

content-security-policy

helmet.js