MSAL with Angular2 : Refused to display in a frame because it set 'X-Frame-Options' to 'deny'

Question

Hi I am using below code to login using AAD b2C, it is redirecting to the login page and and working like if user id and apsswords are correct it is redirecting back to localhost:4200 without getting the login details, when I am checking the console for logs, it is showing the error Refused to display in a iframe because it set 'X-Frame-Options' to 'deny' that is due to iframe option. But how to resolve this issue, please help.

import { Injectable } from '@angular/core';
import '../../../node_modules/msal/out/msal';
/// <reference path="../../../node_modules/msal/out/msal.d.ts"

@Injectable()
export class AuthService {
private applicationConfig: any = {
        clientID: 'df7cc9df-8073-4017-a108-85869852',
        authority: "https://login.microsoftonline.com/tfp/mylogintest.onmicrosoft.com//B2C_1_SiUpIn",
        b2cScopes: ["https://mylogintest.onmicrosoft.com/user.read"],
        webApi: 'http://localhost:4200',
    };

    private app: any;

    constructor() {
        this.app = new Msal.UserAgentApplication(this.applicationConfig.clientID, this.applicationConfig.authority, (errorDesc, token, error, tokenType) => {
            // callback for login redirect          
        });
    }
    public login() {
                return this.app.loginPopup(this.applicationConfig.b2cScopes).then(idToken => {
                this.app.acquireTokenSilent(this.applicationConfig.b2cScopes).then(accessToken => {
                   // updateUI();
                   console.log(this.app.getUser());
                }, error => {
                    this.app.acquireTokenPopup(this.applicationConfig.b2cScopes).then(accessToken => {
                        console.log(this.app.getUser());
                      //  updateUI();
                    }, error => {
                        console.log("Error acquiring the popup:\n" + error);
                    });
                })
            }, error => {
                console.log("Error during login:\n" + error);
            });
    }

    public logout() {
        this.app.logout();
    }
    public getToken() {
        return this.app.acquireTokenSilent(this.applicationConfig.graphScopes)
            .then(accessToken => {
                return accessToken;
            }, error => {
                return this.app.acquireTokenPopup(this.applicationConfig.graphScopes)
                    .then(accessToken => {
                        return accessToken;
                    }, err => {
                        console.error(err);
                    });
            });
    }
}

Answer 1

I have changed the login function code and its working fine now.

`public login() {
    return this.app.loginPopup(this.applicationConfig.graphScopes)
        .then(idToken => {
            const user = this.app.getUser();
            console.log(user);
            if (user) {
                console.log(user);
                return user;
            } else {
                return null;
            }
        }, () => {
            return null;
        });`

Answer 2

I had the same problem in my app using angular 5, this is an issue with MSAL because it uses Iframes under the hood.

MSAL.js uses hidden iframes to acquire and renew tokens silently in the background. Azure AD returns the token back to the registered redirect_uri specified in the token request(by default this is the app's root page). Since the response is a 302, it results in the HTML corresponding to the redirect_uri getting loaded in the iframe. Usually the app's redirect_uri is the root page and this causes it to reload.

They also explain how to solve it: Solution

• Specify a different html for the iframe.
• Conditional initialization in your main app file.

In the wiki they explain how this can be achived.