google-chrome - 添加 COOP COEP HTTP 标头会导致第三方脚本停止在 Chrome 上运行
问题描述
我们收到来自 Google 的消息,说我们需要添加 COOP 和/或 COEP 标头
https://example.com/上对SharedArrayBuffers的新要求Google 系统最近检测到在https://example.com/ 上使用了 SharedArrayBuffers (SAB) ,但不提供COOP和/或COEP标头。出于 Web 兼容性原因,Chrome 计划从 Chrome 91 (2021-05-25) 开始要求 COOP/COEP 才能使用 SAB。请在您的网站上实施“跨域隔离”行为。
我们相应地添加了这些标题。
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
并为所有外部资源添加crossorigin
属性
<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.4.0/adyen.js" crossorigin></script>
然而,
第三方外部脚本加载的其他资源不会加载,会ERR_BLOCKED_BY_RESPONSE
报错。
GET https://checkoutshopper-test.adyen.com/checkoutshopper/images/analytics.png?version=3.4.0&payload_version=1&platform=web&locale=en_US&containerWidth=571&component=scheme&flavor=components net::ERR_BLOCKED_BY_RESPONSE
这不是在添加 COOP 和 COEP 标头后唯一被破坏的第 3 方脚本。Google Recaptcha v2 也坏了。
这发生在 Chrome 版本 89.0.4389.90
有谁知道如何在不要求每个第三方为我们更改其 CORS 标头的情况下解决此问题?
解决方案
面临同样的问题。Cross-Origin-Resource-Policy: cross-origin
这在与Cross-Origin-Embedder-Policy: require-corp
和一起添加后得到了解决Cross-Origin-Opener-Policy: same-origin
在网络请求下可以看到相同的说明。请参考下面的截图。
推荐阅读
- jekyll - 为什么我的共享导航栏中的图像路径会发生变化?
- api - Rundeck - HTTP 工作流步骤 API 令牌
- jekyll - 按日期过滤液体 (Jekyll)
- azure - 跳过 Luis 话语中拼写错误的单词
- swift - Swift inout 如何在未更改时不复制回属性,以不触发对象设置器
- php - Laravel - 如何从父数组中的子记录中检索?
- javascript - 性能问题:遵循点符号结构的组件库
- angular - 我应该在 Angular 中取消订阅 pipe() 吗?
- javascript - JS - React:从收藏夹中添加/删除
- javascript - Vue.prototype 在页面首次加载时未定义