Lately a new error has popped up, which didn't exist before.
I have a Firebase project mapped to a custom domain.
The structure I'm using is as follows:
firebase-project.example.com
is DNS-pointing to Firebase, that's the custom domain, it is tied to the Firebase project (Firebase Hosting).
But the structure I'm offering to the clients is as follows:
www.example.com/firebase-project
which is hosted on my own server.
When I have Firebase generate the verification email, I present them a verification link in the email which contains this structure
https://www.example.com/firebase-project/auth/email?mode=verifyEmail&oobCode=SOME_AUTOGENERATED_CODE&apiKey=FIREBASE_API_KEY
The page rendered by https://www.example.com/firebase-project/auth/email
contains an iframe, which loads the following URL
https://firebase-project.example.com/__/auth/action?mode=verifyEmail&oobCode=SOME_AUTOGENERATED_CODE&apiKey=FIREBASE_API_KEY
That should (and effectively used to!) verify the email on Firebase Hosting, and present the "ok, verified" message provided by Google inside the iframe, all neatly surrounded by the branded https://www.example.com/firebase-project/auth/email
webpage.
But as of lately the iframe shows the following message:
Error encountered
The page is displayed in a cross origin iframe.
and I can't verify the email.
These cross-origin issues usually get fixed by adding the apropiate access-control-allow-origin
headers. Where do I need to set the header, and to which value?
I have tried sending Access-Control-Allow-Origin: firebase-project.example.com
and also Access-Control-Allow-Origin: *
with the www.example.com/firebase-project/auth/email
response, but that does not work.
Could a crossdomain.xml hosted somewhere help me with the issue?
If I inspect the page, and manually copy the iframe-url and paste it in the address bar, then the email will get verified.
No console messages (errors) are displayed at any time.
www.example.com
as well as firebase-project.example.com
are in the list of authorized domains for that project.
firebase-project.example.com
ist using Firebase Hosting and therefore has access to the/__/auth/action
functionality. It is able to verify the email address.www.example.com
is not hosted on Firebase / Google Cloud, and therefore has no/__/auth/action
functionality. It can't verify the email address without the help offirebase-project.example.com
.
Sadly, the Firebase Admin SDK does not offer any support for letting the backend at www.example.com
verify the email address for the given oobCode
, which is why I was forced to use an iframe.
This is what the result should look like, instead of just a white page confirming the verification:
And the iframe is implemented as follows:
<iframe src="https://firebase-project.example.com/__/auth/action?mode={@@ mode @@}&oobCode={@@ oobCode @@}&apiKey={@@ apiKey @@}"></iframe>
The Firebase Console Email verification template looks like this
Else I see myself forced to create a redirect to firebase-project.example.com which results in this page (which actually seems to be predestined to be embedded in an iframe)
There is exactly zero security gain in preventing the embedding inside a page of an authorized domain.
Also, notice the message "You can now sign-in...". My approach shows the Sign-In link conveniently above the iframe. Without it, the user must now type "www.example.com/firebase-project" into the address bar. It makes so much more sense with an iframe; a more efficient and user-friendly approach.