头盔:如何允许从不同的域加载图像(错误:NotSameOriginAfterDefaultedToSameOriginByCoe

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

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

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

我还为 Google Analytics 使用脚本标记。这也给了我一个错误消息:Refused to connect to https://www.google-ytics.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-ytics.com",
          "'unsafe-inline'",
          "mydomain.com",
        ],
        imgSrc: ["'self'", "assets.mydomain.com"],
      },
    },
    crossOriginEmbedderPolicy: false,
    crossOriginResourcePolicy: false,
  })
);

我的 CSP 配置有什么问题?

2

因此,如果有人出于某种原因遇到这个问题,我想通了。事实证明,cross-origin-embedder-policy标题给我带来了麻烦。这必须被禁用。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-ytics.com",
          "https://*.googletagmanager.com",
          "https://*.hotjar.com",
          "https://*.mollie.com",
        ],
        connectSrc: [
          "'self'",
          "'unsafe-inline'",
          "https://*.google.com",
          "https://*.google-ytics.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;

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(847)
Tailwind CSS-作为组件的响应断点
上一篇
用JavaScript显示当地时间(洛杉矶或太平洋)和纽约的时间
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(3条)