添加COEP标头(跨原产地隔离)后,Recaptcha V2无法工作



我在一个web应用程序中使用SharedArrayBuffer的一些功能。在Chrome版本92上,我按照这里的说明启用了跨源隔离,并在根页面和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...,但https://www.google.com/recaptcha/api2/anchor...url的后续iframe加载被Chrome阻止。(原因:This resource needs Cross-Origin-Resource-Policy: same-site/cross-origin header)

一种避免这个问题的方法可能是从Chrome获得一个令牌,允许使用SharedBufferArray通过获得一个试用令牌并使用它。Ref https://developer.chrome.com/blog/enabling-shared-array-buffer/origin-trial。但这可能不是一个可扩展的事情,因为我有几个起源要照顾。

是否有其他方法将验证码与跨域隔离(COEP报头)一起使用?

SharedArrayBuffer目前在Firefox 79+中支持,并将在Android Chrome 88中支持。但是,它仅对跨源隔离的页面可用。SharedArrayBuffer目前在桌面Chrome中可用,但从Chrome 92开始,它将仅限于跨域隔离页面。如果你认为你不能及时做出改变,你可以注册一个原始试用,以保留当前的行为,至少到Chrome 96。

如果您打算启用跨域隔离,继续使用SharedArrayBuffer,请评估这将对您网站上其他跨域元素(如广告位置)的影响。检查SharedArrayBuffer是否被任何第三方资源使用,以了解影响和指导。

您可以通过为页面提供以下标头来使页面跨源隔离:

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

一旦你这样做,你的页面将无法加载跨源内容,除非资源明确允许它通过Cross-Origin-Resource-Policy头或CORS头(Access-Control-Allow-*等)。

还有一个报告API,因此您可以收集由于Cross-Origin-Embedder-PolicyCross-Origin-Opener-Policy而失败的请求的数据。

如果你认为你不能在Chrome 92上及时做出这些改变,你可以注册一个原始试用,以保留当前的桌面Chrome行为,至少到Chrome 96。

最新更新