Question about Angular 5 iframe issue

[ESadouski]

Hi guys, There is a know problem with adal.js iframe: https://github.com/AzureAD/azure-activedirectory-library-for-js/wiki/FAQs#q1-my-app-is-re-loading-every-time-adal-renews-a-token Has anyone already solved this problem in Angular 2+ and Angular-Cli?

[rohitnarula7176]

@ESadouski This issue is not a bug in the library but the way 302 response works. If you set the root page of your app as the redirectUri and try to acquire a token for a resource, you are redirected back to your app with the accessToken served in the url fragment which forces a browser reload and all the scripts defined on your root page to rerun.

This happens inside an iframe and a quick way to avoid it in Angular 2 is by using decorators that ignores the scripts from running when you are inside an iframe. Please see snippet below:

const resolveTokenOnlyIfOutOfIframe = (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
  const tokenAcquisitionMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
      return this.isInIframe()
          ? new Promise(() => { })
          : tokenAcquisitionMethod.apply(this, args);
  };
  return descriptor;
};

[nehaagrawal]

@ESadouski Did @rohitnarula7176 helped you solve this issue? If yes, can you please close this issue?

[husseinkorly]

@rohitnarula7176, I have the same issue. Do I need to decorate the method that acquires the token ? Please checkout this sample. This is how I implemented authentication in my app. After acquiring the token I can see the whole app loaded in the iFrame !!!

[husseinkorly]

@rohitnarula7176 @nehaagrawal @ESadouski I was able to fix this issue in my Angular 5 app by adding this code to main.ts. This will prevent bootstrapping any module inside an Iframe.

[sameerag]

Latest msal@1.2.0 supports applications in iframes and has a workaround for silent calls not reloading the application. Please check our release notes.

All current authentication work from microsoft is delivered through msal js library here. adal js is still supported only for security fixes. We would recommend to move to msal js for any advanced feature asks.