I'm trying to handle reauthentication using a different Authorisation website, while within a Single Page Application (SPA) in my home website. Both websites are internal to a client site.
I've investigated and had CORS setup on the Auth website so it's now returning
So I couldn't get the page to load correctly into a standard jQuery Modal dialog and I have no control over the Auth page I was connecting to. To solve this I investigated the problem I was having with the
iframe and used an HTML5 feature
sandbox to fix it.
The Auth page was using a "break out" script to reload the page if it was loaded into an
iframe and obviously this broke my SPA context. HTML5 allows you to restrict the contents of an iframe.
<iframe src="" id="my_auth" sandbox="allow-forms allow-scripts allow-same-origin"></iframe>
allow-same-originlet it consider the Origin the same as the script (i.e. the Auth website), this was necessary to enable cookies
allow-top-navigationwhich is what was reloading the page
Voilà, auth page displayed inside a jQuery modal dialog (containing the
iframe) with no need to pop up another window.