Using Fusion auth inside iframe
-
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 theX-Frame-Options: DENY
is removed. I've also added the https://app.other.com to the allowed CORS origins. This works partially. Sometimes theX-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.
-
@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 onapp.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 -
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?
-
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.
-
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.