首页 > 解决方案 > 添加 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 标头的情况下解决此问题?

标签: google-chromehttp-headerscross-origin-opener-policycross-origin-embedder-policycross-origin-resource-policy

解决方案


面临同样的问题。Cross-Origin-Resource-Policy: cross-origin这在与Cross-Origin-Embedder-Policy: require-corp和一起添加后得到了解决Cross-Origin-Opener-Policy: same-origin

在网络请求下可以看到相同的说明。请参考下面的截图。

Cross-Origin-Resource-Policy 的信息


推荐阅读