Search code examples
javascriptajaxcorssingle-page-applicationsiteminder

Using CORS to handle reauthentication on another site

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 can't use the standard "redirect" method as I'll lose my SPA JavaScript context.

I've investigated and had CORS setup on the Auth website so it's now returning Access-Control-Allow-Origin: https://www.mywebsite.com. When I try to load the Auth page into a JQuery UI dialog it fails as the scripts all try to load in the context of the Home website.

i.e.
From my website https://www.mywebsite.com/static/
I'm loading https://www.auth.com/login.html.

When loaded into a JQuery UI dialog it tries to load it's scripts as https://www.mywebsite.com/static/scripts/authscript.js
instead of
https://www.auth.com/scripts/authscript.js

I also tried loading the Auth page into an iframe by changing the src tag but it just reloaded the page.

Is there a way to change the Source directory in the context of the CORS web page I'm trying to show?

Solution

  • 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-forms Allow form and submit
    • allow-scripts let it run JavaScript
    • allow-same-origin let it consider the Origin the same as the script (i.e. the Auth website), this was necessary to enable cookies
    • Of note is that I am not including allow-top-navigation which is what was allowing the reload of the page and loss of my JavaScript context

    Voilà, auth page displayed inside a jQuery modal dialog (containing the iframe) with no need to pop up another window.

    CORS was necessary to allow the redirect to the Auth website (which happens in the browser before JavaScript gets involved). You could also trap the "Access-control-allow-origin" exception instead.

    The iframe with the Siteminder login was accessing a page from my site that set a value in localStorage once the user had logged in. The app just polled localStorage in the background to see if the user had logged in successfully.

    Hope this is useful to someone.