search

authts / oidc-client-ts

OpenID Connect (OIDC) and OAuth2 protocol support for browser-based JavaScript applications
https://authts.github.io/oidc-client-ts/
Apache License 2.0
1.37k stars 207 forks source link

Downsides of using parent.postMessage for silent iframe response instead of the library? #1317

Open fzakfeld opened 10 months ago

fzakfeld commented 10 months ago

Hi,

In keycloak-js, the silent callback is very simple to implement. Just a few lines of HTML + JavaScript:

    <script>
        parent.postMessage(location.href, location.origin);
    </script>

(Source: https://www.keycloak.org/docs/latest/securing_apps/)

With oidc-client-ts, this is also possible in some way, but the documentation and samples are suggesting to use the signinSilentCallback method, which would require me to bring in the entire UserManager class.

var mgr = new oidc.UserManager({ response_mode: 'query' });
  mgr.signinSilentCallback().catch(error => {
    console.error(error);
  });

This works, but requires some extra configuration on the build tool (e.g. Vite) in order to either copy the entire library as well as a second html file to dist, or, to create a seperate bundle for it. This also causes the callback to have a larger than needed bundle size since it brings in the entire UserManager class.

While reverse engineering the code, I found this to be working just fine:

<script>
      parent.postMessage(
        {
          source: "oidc-client",
          url: window.location.href,
          keepOpen: false,
        },
        window.location.origin
      );
    </script>

This can be embedded in a single silent-callback.html file, which can be put directly into a public folder and untouched by the build tool

Is there any reason why we should not do this, but instead bring in the library? If not, I'd suggest to document an approach similar to keycloak-js.

pamapa commented 9 months ago

Is there any reason why we should not do this, but instead bring in the library? If not, I'd suggest to document an approach similar to keycloak-js.

Looks good, i do not use html code at, but i am using the full application to process the callback.

Badisi commented 8 months ago

I second this.

I remember asking myself the same question when implementing redirects (ie. why would we import the whole lib a second time only to access the callbacks..).

So I've been using the same simpler code since: https://github.com/Badisi/auth-js/tree/main/projects/auth-js/oidc/assets

// silent_redirect.html
<body><script>window.parent.postMessage({ source: 'oidc-client', url: location.href }, location.origin);</script></body>
// popup_redirect.html
<body><script>window.opener.postMessage({ source: 'oidc-client', url: location.href }, location.origin);</script></body>