头盔:如何允许从不同的域加载图像(错误: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;

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

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

相关推荐

  • type c接口是啥改变你的充电体验

    示例示例Type C接口是一种新型的USB连接器,它可以支持更高的数据传输速度,比传统的USB 0接口更快。与传统的USB接口不同,Type C接口可以在两端都使用,无需额外的翻转,使连接更加方便快捷。下面是一个使用Type C接口的代码示例:…

    2023-01-12 02:06:09
    0 22 64
  • carwings是什么意思智能汽车连接系统的未来

    Carwings是日产汽车公司推出的一款远程智能汽车服务,它可以帮助用户远程监控汽车的状态和行驶信息,并且可以远程控制汽车的功能。…

    2023-01-19 13:55:38
    0 82 83
  • cvt变速箱油分几种:CVT变速箱油的种类及用法

    cvt变速箱油一般分为三种,分别是:传统cvt变速箱油:代码:CVT-1…

    2023-01-27 12:23:25
    0 63 70
  • cv人生履历:从零开始,一步步走向成功——[姓名]的职业生涯

    cv人生履历是一种概括性的文件,用于描述一个人的教育背景、工作经历、技能、专业知识和其他重要信息的文件。它可以帮助雇主评估求职者的资格,并决定是否面试或录用他们。…

    2023-02-01 13:25:09
    0 70 88
  • contextcapture集群:如何使用ContextCapture技术构建高效的3D集群

    ContextCapture集群是一种分布式的技术,它可以让多台服务器共享数据,从而提高应用程序的性能和可靠性。它可以使用多台服务器来收集、存储和处理数据,而不需要单独的服务器来执行这些任务。…

    2023-01-05 08:03:52
    0 80 82
  • cdb文件解锁您的数据库

    CDB文件是一种关联数据库文件格式,用于存储结构化的键/值数据。它是一种高效的文件格式,可以快速检索和更新数据。它可以用作存储用户配置文件,字典,索引,缓存等。…

    2023-02-04 07:44:32
    0 89 99
  • code128条码字体下载:使用 Code128 条码字体创建条码标识

    code128条码字体下载是指下载code128条码字体的过程。Code128条码字体是一种用于生成Code128条形码的字体。它可以将文本转换为条形码,并将条形码打印在各种类型的媒体上。要下载code128条码字体,可以从网上搜索“code128条码字体下载”,然后选择一个可靠的网站下载。一旦下载完成,就可以使用该字体创建code128条形码。…

    2023-01-19 14:44:33
    0 87 14
  • txvlog com糖心改变你的生活,让你的心情更加甜蜜!

    txvlog com糖心是一款以视频分享为主的社交APP,可以让用户上传自己的视频,并与其他用户进行互动。它的主要功能有:用户注册:用户可以通过手机号码、邮箱地址或者社交媒体账号注册,并设置自己的个人信息;…

    2023-01-10 05:08:15
    0 70 74

发表评论

登录 后才能评论

评论列表(48条)