Microsoft-authentication-library-for-js: DOMError when acquireTokenSilent called

[aappddeevv]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Browser:

• [X ] Chrome version 79
• [ ] Firefox version XX
• [ ] IE version XX
• [ ] Edge version XX
• [ ] Safari version XX

Library version

Library version: 1.2.0

Current behavior

I validated I'm still logged in, but after login, I can get an error when asking for a token:

Error 1

Unsafe JavaScript attempt to initiate navigation for frame with origin 'https://localhost:8080....

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.

Error 2

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/<tenaant>/oauth2/v2.0/authorize?response_type=token

&scope=api%3A%2F%2F80<clientid>%2Fuser%20openid%20profile&client_id=<clientid>

&redirect_uri=https%3A%2F%2Flocalhost%3A8080%2Fapage

&state=42a056ed-797b-4620-8570-245ed8565c3c&nonce=38370aa0-81e2-454d-942e-ff2ce2548348&client_info=1&x-client-SKU=MSAL.JS&x-client-Ver=1.2.0

&login_hint=me%40 blah.com&login_req=255faf44-ae5c-4e96-8a68-aba2b74856dd

&domain_req=1ea72227-640e-4622-87a3-e655e8628bf1&domain_hint=organizations&client-request-id=ff26b8a5-6e7e-4e69-817f-a6a0fe0ad88e

&prompt=none&response_mode=fragment&iframe-request-id=9581430b-0a05-4c11-b273-e1e6aff21200'

Expected behavior

No error.

Minimal reproduction of the problem with instructions

Login on my tab. I'm using local-storage. I pop a new tab from another tab that needs to access data on my server. All my requests start by calling acquireTokenSilent to always have the latest access token. All of this works fine on my initial tab but after awhile I get this error.

[jasonnutter]

@aappddeevv This errors occurs when the page inside the hidden iframe is attempting to navigate the top frame, most likely to show you an error message. When this happens, you should try openingthat new page (which is trying to be navigated to) in its own tab.

In this case, I checked the logs and it looks the redirectUri that was set on the request (https://localhost:8080/<page>) was invalid (i.e. it was not registered as a redirect uri in the portal for this application).

[aappddeevv]

Ah great point, its a redirect so indeed it needs to be there.

[aappddeevv]

One question, if I am always calling acquireTokenSilent to make sure I get a fresh token which I thought was the way to go, and I could call that from any page, how would I ever register all my pages for the redirectUri? You can't use wildcards.

[jasonnutter]

@aappddeevv Unfortunately, we do not support wildcards for redirect uris for security reasons.

Instead, 1.2.0 made it so that the page you set for the redirect uri doesn't have to have MSAL (or any other content). Furthermore, you can now set the redirect uri per request. What this means is that you can create a simple page with no content (e.g. domain.com/auth.html), and set that as the redirect uri for your acquireTokenSilent requests (be sure to register this uri in the portal, as well). This is because for silent calls, the redirect page is never actually shown to the user, it is just loaded in the hidden iframe when token has been returned.

msalInstance.acquireTokenSilent({
  // ... other options
  redirectUri: 'http://domain.com/auth.html'
})

[sameerag]

In addition to @jasonnutter's explanation, there is a sample that demos it in our code here.

"if I am always calling acquireTokenSilent to make sure I get a fresh token which I thought was the way to go, and I could call that from any page?" - As long as the "localStorage" is shared, which seems to be the case for a new tab, you should not need to make token acquisition call every time you need a token, you need to be able to fetch it up from the cache.

[aappddeevv]

I think everything is working, at least as far as I can tell with some initial testing. I did setup the fake auth page and provide that to the acquireTokenSilent call as the redirectUri.