头盔：如何允许从不同域加载图像（错误：NotSameOriginAfterDefaultedToSameOriginByCoep）

Question

我正在使用 helmet 设置 CSP headers。我在前端使用 React。

我将图像存储在子域 (assets.mydomain.com) 上。出于某种原因，我收到以下错误消息：加载图像时 ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep。

我还为 Google 分析使用脚本标签。这个也给我一条错误信息：Refused to connect to https://www.google-analytics.com/ because it violates... "default-src 'self'"

这是我目前配置 CSP 的方式：

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: [
          "'self'",
          "https://www.googletagmanager.com",
          "'self'",
          "https://www.google-analytics.com",
          "'unsafe-inline'",
          "mydomain.com",
        ],
        imgSrc: ["'self'", "assets.mydomain.com"],
      },
    },
    crossOriginEmbedderPolicy: false,
    crossOriginResourcePolicy: false,
  })
);

我的 CSP 配置有什么问题？

Answer 1

因此，如果有人出于某种原因遇到这个问题，我已经知道了。事实证明，cross-origin-embedder-policy header 给我带来了麻烦。这必须被禁用。 Helmet 有一个这样做的内置选项 crossOriginEmbedderPolicy: false,。更多信息 here.

对于大多数人来说，我想这会奏效。但是它对我不起作用。 header 仍在设置中。用 express 禁用它也没有用 (app.disable('cross-origin-embedder-policy');)。

我不知道为什么 header 仍然被设置，但我不得不在我的 nginx 配置中手动禁用它：proxy_hide_header cross-origin-embedder-policy;

我的配置：

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: [
          "'self'",
          "'unsafe-inline'",
          "https://*.google.com",
          "https://*.google-analytics.com",
          "https://*.googletagmanager.com",
          "https://*.hotjar.com",
          "https://*.mollie.com",
        ],
        connectSrc: [
          "'self'",
          "'unsafe-inline'",
          "https://*.google.com",
          "https://*.google-analytics.com",
          "https://*.googletagmanager.com",
          "https://*.hotjar.com",
          "https://*.mollie.com",
        ],
        imgSrc: [
          `'self'`,
          `data:`,
          `*.domain.nl`,
          `*.amazonaws.com`,
        ],
      },
    },
    //Will work for most, but did not work for me:
    // crossOriginEmbedderPolicy: false,
  })
);
//# in nginx I manually disabled the COEP header: roxy_hide_header cross-origin-embedder-policy;

头盔：如何允许从不同域加载图像（错误：NotSameOriginAfterDefaultedToSameOriginByCoep）

Helmet: How to allow images to load from different domain (Err: NotSameOriginAfterDefaultedToSameOriginByCoep)

node.js

express

content-security-policy

helmet.js