Using Fusion auth inside iframe

maxime.guitet

Hi all,

I'm currently setting up FusionAuth for use in our application (React frond-end + NestJS backend). We host FusionAuth ourselves (version 1.49.2), let's say https://fusion.domain.com and my application is running on https://application.domain.com. We've set up a tenant with OIDC.
The top domain is the same, so everything works fine when I go to https://application.domain.com directly.

However, for some use cases, our application will be loaded by external apps in an iframe. These external apps will be hosted on different domains, say https://app.other.com. So far I've not been able to get it to run. I've had a look at this other post without success.

The first issue I have is with the X-Frame-Options header. As per the documentation I've added the domain https://app.other.com in the Authorized request origin URLs so that the X-Frame-Options: DENY is removed. I've also added the https://app.other.com to the allowed CORS origins. This works partially. Sometimes the X-Frame-Options: DENY is indeed removed, sometimes it's there.

However, even when it is removed, the following problem is that the cookies set by the Hosted app are sent back with SameSite=Lax attribute. This means they are not sent on subsequent requests and the authentication fails.

To overcome this issue, I've set up the oauth endpoints myself as described in the express tutorial. Now I can set SameSite=None and cookies are correctly set. But even with that the authentication fails. From what I see, it's the redirection from the OIDC provider to FusionAuth which fails because a code is missing.

I've also tried the following:

Switch from Cookies to Bearer auth. Using a popup opened by the iframe and try to send back the token to the opener with postMessage. This doesn't work because the opener object is cleared upon redirection to a different domain.
Try to use a SharedWorker as a channel to send the token. Does not work either because of CSP. The app loaded in the iframe creates a different worker

I'm currently trying to set up a proxy for FusionAuth to be able to control the cookies and their attributes but that seems a bit overkill.

So my question is: what is the standard approach when dealing with such cases? How can I use FusionAuth for my app in an cross-domain iframe?

Thanks and sorry for the long post.

vatsal

@maxime-guitet Hi , I was facing a similar issue when I was trying to load the self-service account page in Iframe in our application.

Our setup was same as yours. Fusion auth hosted on auth.domain.com and the iframe is hosted on app.domain.com. So they both share the same top level domain. The issue regarding the X-Frame-Options: Deny being not available in every request was solved by adding referrer policy attribute to the iframe tag.

The final iframe code looks like below

<iframe
        src="https://auth.domain.com/account/?client_id=<your id for application>"
        referrerpolicy="strict-origin-when-cross-origin"></iframe>

Hope this helps!

Regards
Vatsal

maxime.guitet

Hi @vatsal,

Thanks for the input, I will try that.
However, if I understand correctly what you say, I think my setup is slightly different. The iframe is in a page hosted in a different domain. I load the app in it which then redirects to the fusion auth app. So even when the X-Frame-Options header is correctly set, then I face the third-party cookies issue with SameSite=Lax.

The question is actually more general: with 3rd-party cookies being phased out, what will be the strategy to load FA in an iframe on a different domain?

dustin

@maxime-guitet

Hi, did you ever solve your problem? We also encountered this after updating from 1.44 to 1.51.2 -- it seems like iFrames are completely broken now across domains.

dan

For future readers, there's an open GH issue here to better support iframes: https://github.com/FusionAuth/fusionauth-issues/issues/2830

Please add your use cases, upvotes and comments there.