u02sgb u02sgb - 20 days ago 5
Javascript Question

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?

Answer

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 reloading the page

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.