Refused to display ‘login.microsoftonline…’ in a frame because it set ‘X-Frame-Options’ to ‘deny'

New Contributor

I’m currently trying to implement my website into Microsoft Teams. For that I’ve made a custom app with App Studio. In that app I have a tab to direct to my website. This website has a button that executes a code in which it tries to authContext.login(), which causes the site to direct to the microsoft login and back to the redirect.

In web browsers (Firefox, Chrome, Edge) it works fine. But when I try to use authContext.login() in the Teams Desktop Client I get this error in the DevTools console (Due to security concerns I’ve changed some of the hexcode for this post):

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

The website gets displayed until the button with authContext.login() is executed, then it vanishes and the error is thrown.


This is a code snippet of my button:


<!--- Import packages for authentication information in Teams/Azure --->
<script src="<a href="<a href="" target="_blank"></a>" target="_blank"><a href="</a" target="_blank"></a</a>>"  crossorigin="anonymous"></script>


function loginO365() {
    let config = {
        clientId: "190af997-d6f8-4730-9462-e13dee41d451",
        redirectUri: "#application.gc_app_rootURL#", // same URL as redirect in error and Azure app
        cacheLocation: "localStorage",
        navigateToLoginRequestUrl: true,

    let authContext = new AuthenticationContext(config);
    let isCallback = authContext.isCallback(window.location.hash);
    authContext.login(); // causes error



My questions:

  1. What causes this?
  2. Why does it not happen in web browsers?
  3. How do I fix it?


Attention: I'm aware that you should not repost. But since this post got no attention on stack I posted it here. (To the original Stackoverflow Post )

1 Reply