添加 COOP COEP HTTP 标头会导致第三方脚本停止在 Chrome 上运行

如何解决添加 COOP COEP HTTP 标头会导致第三方脚本停止在 Chrome 上运行

我们收到了来自 Google 的消息，说我们需要添加 COOP 和/或 COEP 标头

SharedArrayBuffers 上 https://example.com/ 的新要求 Google 系统最近检测到 https://example.com/ 上使用了 SharedArrayBuffers (SAB)，但未提供 COOP 和/或 COEP 标头。 出于 Web 兼容性的原因，Chrome 计划要求 COOP/COEP 从 Chrome 91 (2021-05-25) 开始使用 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>

然而，

由第 3 方外部脚本加载的其他资源 不会被加载，并且会出现 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 标头后损坏的 3rd 方脚本。 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

后，此问题得到解决

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

Info for Cross-Origin-Resource-Policy