node.js - Helm : How to allow images to load from different domain (Err: NotSameOriginAfterDefaultedToSameOriginByCoep)

Question

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

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

我还为 Google Analytics 使用脚本标签。这也给我一条错误消息: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 .

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

我不知道为什么标题仍然被设置，但我不得不在我的 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;