Search code examples
iframeoauth-2.0openid

Silent Authentication feedback from IFrame


I've read that the silent authentication is typically made in a 1px iFrame. What I've been wondering is how the response to the authentication request is passed back from the iFrame to the parent application. Only option i can think of is that the Auth-Server returns some javascript code that runs e.g.

window.top.postMessage('auth', 'thisisthetoken')

But that approach seems a little sloppy to me. So how does it work?


Solution

  • That is the traditional flow for token renewal in Single Page Apps. The initial authentication should be done on a main browser window via a redirect, eg as for Google Sign In or Office 365.

    TOKEN RENEWAL LIBRARY USAGE

    The oidc client library is commonly used to implement this, enabling the iframe post to be done with very little code.

    IFRAME MECHANICS

    The main window triggers an OpenID Connect redirect on a hidden iframe. When a response is received, the iframe uses the postMessage API to return an OpenID Connect response to the main window, containing code and state parameters. The main window then exchanges the code for tokens, using a PKCE code verifier that it saved to session storage before triggering the iframe redirect.

    BROWSER SUPPORT FOR THIRD PARTY COOKIES

    The above flow relies on the Authorization Server's SSO Cookie being sent in the iframe request, but browsers are starting to drop third party cookies to limit tracking - Safari already does this.

    Therefore it is now standard to instead manage renewal via a secure cookie issued for the site of the web origin, and to avoid iframe post solutions.

    Projects that rely on third party cookies these days will struggle - see this recent answer of mine.

    HOSTING PREREQUISITES

    In 2021 you are best to use secure SameSite cookies in the browser, since posting tokens between frames is vulnerable to Cross Site Scripting. Ensuring that the web origin of each frame can share a secure cookie via a child / sibling domain is therefore a prerequisite - you cannot really develop a secure web solution these days without it.

    Security in the browser is a tricky topic and needs an architectural design - for more info on 2021 web security recommendations, take a look at recent Curity Web Guidance.

    WITH TOKENS ONLY

    This will work buy is considered very poor security in 2021:

    • Redirect the whole window to authenticate the user (good)
    • Save tokens to local storage (bad) - to deal with page reloads - easily exploited by malicious code
    • Then post tokens between iframes (bad) - can be intercepted by malicious code that adds a listener