2

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 of firebase-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:

enter image description here

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

enter image description here

enter image description here

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)

enter image description here

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.

Daniel F
  • 13,684
  • 11
  • 87
  • 116
  • Why are you rendering this page in an iframe? This is the link that developers get in their email inbox and users click. There is no reason to embed it in an iframe. – bojeil Apr 18 '18 at 23:13
  • Because the clients expect to use www.example.com and not firebase-project.example.com, and the embedded frame is surrounded by the familiar look of the www.example.com page with further indications, instead of a white "verified" page. Believe me, it makes sense. – Daniel F Apr 18 '18 at 23:17
  • Also, I suppose that there's a reason that the Firebase console offers the ability to customize the %LINK% variable in the email template. It used to work. – Daniel F Apr 18 '18 at 23:26
  • How do you embed the iframe after the user clicks it? Anyway, this works as intended and unlikely to change for security reasons (external developers should not be able to embed your landing page). This is not supposed to be embedded. If you want to build your own landing page instead of an iframe hack, just change the Action URL in the console to use your www.example.com landing page directly. – bojeil Apr 18 '18 at 23:30
  • Firebase expects the user to click either `project-id-23dr3.firebase(something).com/...auth`, or the custom domain `firebase-project.example.com/...auth`. In the email template I change the %LINK% variable for the verification link to `www.example.com/project/auth/email...` A click on it sends the user to `www.example.com`, which I host by myself. The server renders the page and passes the query string parameters unmodified to the iframe url, which is `project.example.com`, hosted by Firebase. – Daniel F Apr 18 '18 at 23:40
  • I am no "external developer". I've proven to Firebase that I own these domains, `www.example.com` as well as `firebase-project.example.com`. They are in the authorized domains list in the Firebase Console. I don't know why it stopped working. – Daniel F Apr 18 '18 at 23:47
  • Your setup is inefficient and non-optimal. You have to set your Action URL as the intended URL `www.example.com`. You can customize this from the Firebase Console. They provided that ability since day 1. You render the UI directly there and not from an iframe. – bojeil Apr 19 '18 at 00:24
  • You have the choice to set custom domains too in Firebase hosting so you have multiple options. – bojeil Apr 19 '18 at 00:25
  • I am using the `customize action url` in the `email address verification` template to set the `%LINK%` variable to `https://www.example.com/firebase-project/auth/email`. `www.example.com` is not using Firebase hosting, only `firebase-project.example.com` is. I could create a redirect from `https://www.example.com/firebase-project/auth/email` to `https://firebase-project.example.com/__/auth/action`, but in that case I would not get the good user experience one should be able to expect. I've added an image to the question. – Daniel F Apr 19 '18 at 11:14
  • @bojeil I've improved the question to clarify the situation, since I'm getting the feeling that you did misunderstand it somewhat. – Daniel F Apr 19 '18 at 12:22
  • 1
    I know what you are trying to do. You are reusing that page since you don't want to build your own UI. You can build your own landing page by following the instructions: https://firebase.google.com/docs/auth/custom-email-handler. – bojeil Apr 19 '18 at 21:07
  • @bojeil Thanks :) I didn't know about the custom email handler, it's exactly what I need. I used the iframe as a hack for something I thought that didn't exist. – Daniel F Apr 20 '18 at 09:55
  • 1
    Cool. I am glad I was able to help. – bojeil Apr 20 '18 at 16:57
  • I also just wanted to show a user-friendly url with my custom domain while reusing the UI firebase. And an iframe looked like a great shortcut for that. It took me like 5 minutes to create the wrapper only to realise they don't allow this. Too bad. And a custom handler solution still requires you to create the custom UI. Did you end up setting it all up including the html and css? Do you mind sharing that page maybe? I wish they've provided a copy-paste standard html for that. – vir us Nov 04 '22 at 12:39

0 Answers0