CODEWITHSUNDEEP
firebase-authenticationcross-origin-embedder-policycross-origin-resource-policy
Kartik Ayyar
Kartik Ayyar

Reputation: 882

Firebase auth breaks with cross origin isolation (i.e. when using Cross-Origin-Resource-Policy)

I am trying to make a website cross origin isolated, and enabled the following headers on my site:

https://web.dev/cross-origin-isolation-guide/

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

Firebase auth uses a call to:

https://<AUTH_DOMAIN>/__/auth/iframe?apiKey=<API_KEY>&appName=[DEFAULT]

This gets blocked if you and makes authentication fail.

Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each resource must specify a suitable Cross-Origin Resource Policy (CORP). This behavior prevents a document from loading cross-origin resources which don’t explicitly grant permission to be loaded. To solve this, add the following to the resource’s response header: Cross-Origin-Resource-Policy: same-site if the resource and your site are served from the same site. Cross-Origin-Resource-Policy: cross-origin if the resource is served from another location than your website. ⚠️If you set this header, any website can embed this resource.

How does one fix this? It seems like the root issue is that firebase needs to set a header on their side ?

Upvotes: 8

Views: 2492

Answers (1)

ktt
ktt

Reputation: 31

I had the exact same issue--same CORS headers, same /auth/iframe CORS error (on Safari).

You can find a solution to your problem here: https://github.com/firebase/firebase-js-sdk/issues/4946

SUMMARY: Firebase eager loads its auth iframe. This iframe is not even required unless you are using the Firebase methods signInWithPopup or signInWithRedirect.

If you are NOT using those methods, simply replace where you may be calling getAuth with initializeAuth and pass in the following (need to import the persistence stuff from firebase/auth as well):

const auth = initializeAuth(app, {
  persistence: [
    indexedDBLocalPersistence,
    browserLocalPersistence,
    browserSessionPersistence,
  ],
});

After making this change, you should no longer see iframe in Safari/mobile under the Network tab (useful, since at least for me, the CORS issue only occurs in older Safari versions, but the iframe is visible in Network regardless), and the /auth/iframe CORS issue should disappear with it.

If you ARE using those methods, I think you can still find a slightly different fix for that in the aforementioned link.

Upvotes: 0

Related Questions