Angular-auth-oidc-client: Version 1.3.19: Duplicate of application in iframe for silent renew

[mwymann]

Hi,

I just installed version 1.3.19 and realized in our app, that after the first silent renew the iframe with id="myiFrameForSilentRenew" contains a duplicate of the entire application and initializes it.

Not sure if this is the expected behavior.

Can you please check that?

[jcannata]

I am seeing this too on my angular app as well as the AngularClient in damienbod/AspNet5IdentityServerAngularImplicitFlow.
I'm a newbie dealing with OAuth/OIDC so this library has been a real lifesaver!

[damienbod]

https://github.com/damienbod/angular-auth-oidc-client/issues/128

[damienbod]

@mwymann @jcannata At present the whole app is loaded in the iframe. This coould be improved

[jcannata]

@damienbod For the record, I am using version 3.0.4 sources. A related issue to having the entire app loaded in the iframe is that subscriptions such as

 this.oidcSecurityService.getIsAuthorized().subscribe(authorized => {
            this.isAuthorized = authorized;
        });

in the 'main' app will not receive any change notifications detected by the iframe's instance.
In my case I protect various routes by subscribing to getIsAuthorized(). If a user logs outs (via oidcSecurityService.logoff()) I will receive a notification and everything works correctly. However, if I revoke access to the client directly from the Identity Server the iframe instance will detect this change and update the sessionStorage data but the 'main' instance will still allow access as getIsAuthorized() never fired.

Maybe I'm not understanding how best to use the oidcSecurityService subscriptions? Although not optimal, is there a way to force recalculating the isAuthorized state to account for this situation?

[robisim74]

@damienbod I think I found the reason why the whole app is loaded in the iframe. After the silent renew, you redirect to the base redirect_url, and so all the content at the redirect url is loaded into the iframe. Other libraries like _oidc-client-js_ redirect to another content, for example _silent-renew.html_, just to provide the necessary operations, so only the content of _silent-renew.html_ is loaded into the iframe.

[jcannata]

But just redirecting to an .html file is not enough, @robisim74 . What must happen is that _code_ must be able to process the data returned in the redirected url. That code is currently implemented by the angular-auth-oidc-client library in TypeScript. So the silent_renew.html would either have to duplicate (in JavaScript) the library so it could update the session data or you need a separate angular application that executes at your silent renew redirect url. Either way, the main application's subscriptions won't fire (as I explain in my previous comment).

Is there a way to 'pipe' the silent renew data from that iframe back to the main frame? That way the main application could handle the renew as a 'callback' method.

[robisim74]

There are several ways to achieve that: simplest is one line of code with a post message to an event listener in the library.

[paszkowskik]

@robisim74 could you tell us how you did resolve that issue because we today noticed the same like whole app is loaded into iframe.

[robisim74]

@paszkowskik I do not think you can solve this problem yourself. It must be resolved within the library.

@damienbod Why did you close this issue?

[mcshiz]

I am noticing this too. Doesn't look like this has been resolved based on the comments. Any Updates? @jcannata how did you solve the issue?

[jcannata]

Hi @mcshiz,
I have made progress on this. In order for this to work I had to slightly modify the project source to support a 'silent_redirect_uri'. I then registered an event handler in my app's auth service code that could receive the id_token from a special HTML file.

I copied the project source into my application (to make debugging easier) and modified the refreshSession() method in the OidcSecurityService class to call a new method 'createSilentRenewUrl' which returns the 'silent_redirect_uri'. This url points to a static HTML file which contains the following:

<script>
    window.onload = function () {
    /* The parent window hosts the Angular application */
    var parent = window.parent;
    /* Send the id_token information to my message handler */
    var event = new CustomEvent('auth-message', {detail: window.location.hash.substr(1) });
    parent.dispatchEvent(event);
};
</script>

In a service inside my app code I did the following...

   myMessageEvent: any;

    constructor(private oidcSecurityService: OidcSecurityService,
        private oidcConfigService: OidcConfigService) {

        this.isAuthorizedSubscription = this.oidcSecurityService.getIsAuthorized().subscribe(authorized => {
          this.isAuthorized = authorized;
        });

        this.getUserDataSubscription = this.oidcSecurityService.getUserData().subscribe(userData => {
            this.userData = userData;
        });

        this.myMessageEvent = this.messageHandler.bind(this);
        window.addEventListener('auth-message', this.myMessageEvent, false);
    }

    private messageHandler(e: CustomEvent) {
        this.oidcSecurityService.authorizedCallback(e.detail);
    }

When a silent renew request occurs, the OAuth2 server calls my silent-renew.html file which then fires an event containing the id_token information which is handled by my app's code. No duplicate application is created and validation occurs as expected (#102 , #152, #145)

I just got this working today so there may be some issues with this but so far it is working. Integrating this into the library is not difficult, a 'silent_renew_uri' (#128) just needs to be added to the configuration class and OidcSecurityService.

John

[damienbod]

Thanks John

Would you be interested in doing a PR? This would be great to have in the npm package. This is 1 of the major missing features which everyone requests.

Greetings Damien

[jcannata]

Yes, @damienbod. I'll get something next week.

[damienbod]

added in version 4.1.0

https://github.com/damienbod/angular-auth-oidc-client/blob/master/API_DOCUMENTATION.md#silent_renew_url