CODEWITHSUNDEEP
google-chromerecaptchawebassemblycross-origin-embedder-policycross-origin-resource-policy
humbledor
humbledor

Reputation: 59

Recaptcha V2 not working after adding COEP headers (Cross Origin Isolation)

I am using SharedArrayBuffer for some of functionalities in one of the webapp. On Chrome version 92 I have enabled cross origin isolation as per instructions here and added following headers to root page and wasm files.

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

After that wasm files were loaded successfully.

But now I am not able to add ReCaptchaV2. The first request to fetch main script is successful https://www.google.com/recaptcha/api.js... but the subsequent iframe loading of https://www.google.com/recaptcha/api2/anchor... url is being blocked by Chrome.(Reason: This resource needs Cross-Origin-Resource-Policy: same-site/cross-origin header)

One way to avoid this issue for a while might be to get a token from Chrome to allow usage of SharedBufferArray by getting a Trial Token and using that. Ref https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial. But this might not be a scalable thing to do as I have several origins to take care of.

Is there any other way to use ReCaptcha with Cross Origin Isolation (COEP Headers) ?

Upvotes: 4

Views: 846

Answers (1)

Reikyal
Reikyal

Reputation: 299

SharedArrayBuffer is currently supported in Firefox 79+, and will arrive in Android Chrome 88. However, it's only available to pages that are cross-origin isolated. SharedArrayBuffer is currently available in Desktop Chrome, but from Chrome 92 it will be limited to cross-origin isolated pages. If you don't think you can make this change in time, you can register for an origin trial to retain the current behavior until at least Chrome 96.

If you intend to enable cross-origin isolation to continue using SharedArrayBuffer evaluate the impact this will have on other cross-origin elements on your website, such as ad placements. Check if SharedArrayBuffer is used by any of your third-party resources to understand impact and guidance.

You can make a page cross-origin isolated by serving the page with these headers:

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

Once you do this, your page will not be able to load cross-origin content unless the resource explicitly allows it via a Cross-Origin-Resource-Policy header or CORS headers (Access-Control-Allow-* and so forth).

There's also a reporting API, so you can gather data on requests that failed as a result of Cross-Origin-Embedder-Policy and Cross-Origin-Opener-Policy.

If you don't think you can make these changes in time for Chrome 92, you can register for an origin trial to retain current Desktop Chrome behavior until at least Chrome 96.

Upvotes: 0

Related Questions