Outer website: outer.com; my website: my.com
Outer website wants to integrate my website using iframe.
I need to integrate auth as well. They use OpenID Connect or something like that.
When I tried to auth inside iframe using redirects, it didn’t work. Their auth logics using intermediate cookie and it was not saved.
Right now to authenticate user, I’m using code like parent.location.href = "outer.com/auth/redirect=my.com/accept-auth". After authentication I’m receiving request from the user, creating session cookie and issuing redirect to “outer.com”. outer.com loads my.com in the iframe and sends cookie set earlier. Now my website inside iframe is authorized and works well.
Please note that URL in the user browser changes in the following way: outer.com -> outer.com/auth/... -> my.com/accept-auth -> outer.com
Initially I had a problem: cookie set after redirect was not sent when page loaded inside iframe.
I solved this problem using SameSite=None cookie attribute.
Right now the website works well in the Chrome.
However after testing in Firefox and Chrome Incognito mode it turned out that this is not enough. Cookie is not send inside iframe.
After I did research, it turned out to be caused by a feature called “Third-party cookie blocking”.
I found an advice to use “Partitioned” cookie attribute. However further testing revealed that this approach does not work. It allows iframe to set cookie “inside”, however if cookie was set from the outside, it still is not accessible inside iframe.
I also tried localStorage as alternative way to store session id, but it didn’t work as well. It seems that browser maintains a separate localStorage object for iframe to prevent sharing data.
How do I proceed from there? I can ask user to disable this feature, but I’d like a cleaner solution.