Microsoft Teams Adal silent Authentication fail (iframe sandbox)

Question

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

Answer 1

You need to allow top navigation on your iframe element by providing some attribute value to the sandbox attribute

<iframe src="yourpage.html" sandbox="allow-top-navigation"></iframe>

Have a look at here to know more about those attribute values.

Answer 2

Put this in you tab page

 window.onload = function () { if (parent.document.getElementById("extension-tab-frame")) { var iframe = parent.document.getElementById("extension-tab-frame"); iframe.sandbox = 'allow-forms allow-modals allow-popups allow-pointer-lock allow-scripts allow-same-origin allow-top-navigation'; } }