Silent Authentication fail (iframe sandbox)

[numabilis]

We have developped a custom tab for Microsoft Teams and would like to authenticate users silently, using Adal as describe in this article https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/auth-silent-aad It works fine in development environment, but fail in production environment ! The console show the following error message :

Unsafe JavaScript attempt to initiate navigation for frame with origin 'https://teams.microsoft.com' from frame with URL 'https://login.microsoftonline.com/common/oauth2/authorize?response_type=id_token&client_id=(...) Unsafe JavaScript attempt to initiate navigation for frame with origin 'https://teams.microsoft.com' from frame with URL 'https://login.microsoftonline.com/common/oauth2/authorize?response_type=id_token&client_id=(...)'. The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.

I don't understand why the behavior is different in development and production environment? How can I fix it?

Thanks

[nehaagrawal]

@numabilis Could you please tell us the attributes you are using for sandbox iframe?

[numabilis]

@nehaagrawal Thanks for your reply. I don't set any attributes on the iframe. As written in https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/auth-silent-aad : "The ADAL.js library creates a hidden iframe for OAuth implicit grant flow, but it specifies prompt=none so that AAD never shows the login page." And we can see that in the library code : https://github.com/AzureAD/azure-activedirectory-library-for-js/blob/dev/lib/adal.js#L1682

Is there any solution to set the sandbox attribute ? I can't do that or am I wrong ?

[nehaagrawal]

@numabilis we don't allow calling our library from inside an iframe because of security concerns. From the error, it looks like you app has a sandbox iframe. If you can share a sample code where we can reproduce this issue, we can help you. I also looked at some of the past issues and found these https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/129 https://benoitpatra.com/2015/05/28/implementing-the-oauth-2-0-flow-in-app-for-office-sandboxed-environment/

[numabilis]

@nehaagrawal Our application is a Custom Tab for Teams which embed it in an iframe but our code doesn't have an iframe in it. SO I think it is a problem with Teams... For the code, we follow what has been explained in this article : https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/auth-silent-aad

And it works perfectly on dev environment...

[Tyrcheg]

Hi I'm having the same issue in my angular app I'm developing an integration with on of the Microsoft services for which I'm using adal-angular library and I successfully authenticate user via Adal with microsoft account but when I try to acquireToken for another service it shows me this errors:

authorize?response_type=token&client_id=.... Unsafe JavaScript attempt to initiate navigation for frame with origin 'https://teams.microsoft.com' from frame with URL 'https://login.microsoftonline.com/common/oauth2/authorize?response_type=token&client_id=.... The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.

and

authorize?response_type=token&client_id=... Uncaught DOMException: Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to 'https://login.microsoftonline.com/common/oauth2/authorize?response_type=token&client_id=...

So I can't move on and have no idea why Adal.js doesn't work

Also I've made simple app, which only authenticates and acquires token in plain vanilla js and when I start up that example in the same way - everything works fine. I get token and can make other request to Microsoft services without any errors

So, basically I have the same issue, as were mentioned at the beginning, I just wanted to know if you have any solution for this?

[numabilis]

After a break and an update of azure portal, I finally succeed to authenticate silently on the web app. I had to go to the azure portal > Azure Active Directory > App registrations (preview), select my app, and on the API permissions click on the button "Grant admin consent for XXX". May this help you @Tyrcheg . A strange thing is that doesn't work on Teams Rich Client...

[Tyrcheg]

@numabilis much thanks for your answer. I'll check my app permissions and hope it'll resolve the problem! I also wonder how this might not work in Teams in my angular app, but works in plain vanilla js with the same inserted iframe by adaljs

[tabinnorway]

I am having the same problem. This means that it is not possible (at the moment) to add Tab to Microsoft Teams that needs to authenticate with Azure AD using msadal. There must be a way around this.

[AmonHouston]

Similar issue happening to me, I'm getting the same error as @numabilis, granting admin consent didn't seem to have an affect.

[SanthoshThangarasu]

Facing same issue, when try sample teams silent authentication, any workaround?

[textminer]

Having same issue. I have a simple html with no iFrame. The grant consent step did not work for me either. I'm surprised that it worked for others, since precisely is Teams platform that prevents doing the navigation to the authorizing web page. Any workaround?

[Titaye]

Same issue here within teams desktop client. I think the issue come from https://login.microsoftonline.com/common/reprocess page. I don't know why this page tries to manipulate top location instead of its own window. In teams tab we are inside a sandboxed iframe and the adal lib is pushing a nested iframe too. I think manipulating top window is wrong in this case. Here is the piece of code doing the redirect inside the reprocess page

!function(){
  var e=window,o=e.document,i=e.$Config||{};
  if(e.self===e.top) {
    o&&o.body&&(o.body.style.display="block")
  }else{
    if(!i.allowFrame){
var s=e.self.location.href,l=s.indexOf("#"),n=-1!==l,t=s.indexOf("?"),f=n? l:s.length,d=-1===t||n&&t>l?"?":"&";s=s.substr(0,f)+d+"iframe-request- 
 id="+i.sessionId+s.substr(f),
e.top.location=s
}
  }
}();

[janklan]

Same here. I'm using the code from the official sample here: https://github.com/OfficeDev/microsoft-teams-sample-complete-node/tree/master/src/views/tab-auth (the silent*.hbs files) and am getting an iframe sandbox error, forcing the user to log in manually in a pop-up window.

[chandrakaladhaundiyal]

For me my system is failing when its trying to fetch the token post expiry. The system is trying to redirect to https://login.microsoftonline.com/common/oauth2/authorize?response_type and Uncaught DOMException: Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to 'https://login.microsoftonline.com/common/oauth2/authorize?response_type=id_token&client_id=. in my console.

Any workaround?

[DarylThayil]

The iframe trying to redirect the top level page is a known bug in adal, it has been fixed in msal js I would encourage anyone who is able to move to msal. https://github.com/AzureAD/microsoft-authentication-library-for-js It is backwards compatible with AAD v1 applications and in active development where issues like this are being resolved.

[DenisChimborDev]

I had the same issue. But in my case problem was in configuration:

1. Ensure that you added redirectUri from Adal config to Azure app redirect URIs list.
2. On "silent-end" page use latest version of adal.min.js (now it is 1.0.17),

[jmckennon]

@DenisChimborDev is correct, especially on 1. Please make sure that both the config and the Azure portal contains the proper redirectURI.

I'll be closing this issue as it's been some time, and the general suggestion is to move to the msal js library here, which is has far more support. adal js is currently only being updated for security fixes.