1

为了让 web 应用更安全并强迫自己更好地控制未来的添加（不同 CDN 上的 JS 和 CSS 资产），我在我的 Fastify（与 Express 相同）网络应用中运行 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'} }

与其他政策变体：同源，跨源似乎都不起作用。

错误

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

4

1 回答 1

3

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

{
  crossOriginEmbedderPolicy: false,
  // ...
}

头盔维护者在这里。

Helmet 将HTTPCross-Origin-Embedder-Policy响应标头设置为require-corp.

设置此标头意味着加载跨域资源（如来自另一个资源的图像）更加棘手。例如，加载这样的跨域...

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

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

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

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

我制作了一个小示例应用程序，您可以使用它来玩这个。

于 2022-01-18T15:07:08.557 回答