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

Question

嗨，我正在使用下面的代码使用 AAD b2C 登录，它重定向到登录页面，并且工作方式就像如果用户 id 和 apsswords 正确，它会重定向回 l​​ocalhost:4200，而不会获取登录详细信息，当我检查控制台的日志，它显示错误拒绝在 iframe 中显示，因为它将“X-Frame-Options”设置为“拒绝”，这是由于 iframe 选项造成的。但如何解决这个问题，请帮忙。

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

我在使用 Angular 5 的应用程序中遇到了同样的问题，这是 MSAL 的问题，因为它在底层使用了 Iframe。

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.

他们还解释了如何解决这个问题:Solution

• 为 iframe 指定不同的 html。
• 主应用文件中的条件初始化。

在 wiki 中，他们解释了如何实现这一目标。