google-chrome - 添加 COEP header 后，Recaptcha V2 不起作用(跨源隔离)

Question

我将 SharedArrayBuffer 用于其中一个 web 应用程序中的某些功能。在 Chrome 92 版上，我按照说明启用了跨源隔离 here并将以下标题添加到根页面和 wasm文件。

Cross-Origin-Resource-Policy: cross-origin
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

之后 wasm文件已成功加载。
但现在我无法添加 ReCaptchaV2 .第一个获取主脚本的请求成功 https://www.google.com/recaptcha/api.js...但随后的 iframe 加载 https://www.google.com/recaptcha/api2/anchor... url 被 Chrome 阻止。(原因:This resource needs Cross-Origin-Resource-Policy: same-site/cross-origin header)
暂时避免此问题的一种方法可能是从 Chrome 获取 token 以允许使用 SharedBufferArray通过获取试用 token 并使用它。引用 https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial .但这可能不是一个可扩展的事情，因为我有几个来源需要处理。
有没有其他方法可以将 ReCaptcha 与跨源隔离(COEP header )一起使用？

Answer 1

SharedArrayBuffer目前在 Firefox 79+ 中受支持，并将在 Android Chrome 88 中出现。
但是，它仅适用于跨域隔离的页面。SharedArrayBuffer目前可在桌面 Chrome 中使用，但从 Chrome 92 开始，它将仅限于跨源隔离页面。如果你认为你不能及时做出这个改变，你可以注册一个 origin 试用版，至少在 Chrome 96 之前保留当前的行为。
如果您打算启用跨源隔离以继续使用 SharedArrayBuffer评估这将对您网站上的其他跨源元素(例如广告展示位置)产生的影响。检查是否 SharedArrayBuffer由您的任何第三方资源用于了解影响和指导。
您可以通过使用以下 header 提供页面来隔离页面跨域:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

一旦你这样做，你的页面将无法加载跨域内容，除非资源通过 Cross-Origin-Resource-Policy 明确允许它。 header 或 CORS header ( Access-Control-Allow-* 等)。
还有一个报告 API，因此您可以收集有关因 Cross-Origin-Embedder-Policy 而失败的请求的数据。和 Cross-Origin-Opener-Policy .
如果您认为您无法及时为 Chrome 92 进行这些更改，您可以注册一个原始试用版，以至少在 Chrome 96 之前保留当前的桌面 Chrome 行为。