Refused to display<url> in a frame because it set 'X-Frame-Options' to 'deny'.

[aromanarguello]

Hi have an SPA app built through CRA. My react app which is authenticated through react-adal library, which is amazing, thank you so much, has been receiving this message when I try to load my iframe inside this other app: Refused to display 'https://login.microsoftonline.com/ in a frame because it set 'X-Frame-Options' to 'deny'.

React:16.8.2
react-adal: 0.4.22

index.js:

const DO_NOT_LOGIN = false;

runWithAdal(
    authContext,
    () => {
        ReactDOM.render(<App />, document.getElementById('root'));
    },
    DO_NOT_LOGIN,
);

exports from App.js:
export default withAdalLoginApi(App);

adalConfig file:

import { AuthenticationContext, adalFetch, withAdalLogin, runWithAdal } from 'react-adal';

export const adalConfig = {
    tenant: process.env.REACT_APP_TENANT,
    clientId: process.env.REACT_APP_MSAL_CLIENT_ID,
    endpoints: { api: process.env.REACT_APP_GRAPH_ENDPOINT },
    cacheLocation: process.env.REACT_APP_CACHE_LOCATION,
    redirectUri: process.env.REACT_APP_REDIRECT_URI,
    popUp: true,
    //eslint-disable-next-line
    displayCall: function(urlNavigate) {
        const popupWindow = window.open(urlNavigate, 'login', 'width=483, height=600');
        if (popupWindow && popupWindow.focus) popupWindow.focus();
        const registeredRedirectUri = this.redirectUri;
        var pollTimer = window.setInterval(() => {
            if (!popupWindow || popupWindow.closed || popupWindow.closed === undefined) {
                window.clearInterval(pollTimer);
            }
            try {
                if (popupWindow.document.URL.indexOf(registeredRedirectUri) != -1) {
                    window.clearInterval(pollTimer);
                    window.location.hash = popupWindow.location.hash;
                    authContext.handleWindowCallback();
                    popupWindow.close();
                }
            } catch (e) {}
        }, 20);
    },
};

const DO_NOT_LOGIN = false;
export const authContext = new AuthenticationContext(adalConfig);

/**
 * Takes React.DOM App render and wraps it,
 * to avoid duplicate ReactApps started on iframes
 *
 * @param {*} path
 */
export const withAdal = dom => runWithAdal(authContext, () => dom, DO_NOT_LOGIN);

/**
 * Logs user out
 */
export const logOut = () => authContext.logOut();

/**
 * adalFetch
 *
 * @param {*} fetch
 * @param {*} url
 * @param {*} options
 */
export const adalApiFetch = (fetch, url, options) => adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);

thank you in advance 🙏 hope you can lend some insight :)

[Salvatore Ravidà]

your http server has set http response header X-Frame-Options to dany, so adal cannot work as it use iframes.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

remove it, or allow 'https://login.microsoftonline.com/