oidc-client-ts
oidc-client-ts copied to clipboard
authts
Downsides of using parent.postMessage for silent iframe response instead of the library?
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.
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.
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>
