I was going through AzureAD msal library for javascript. I tried to run the test app given in the same github link.
The app runs smoothly with facebook or microsoft account login. But when I try to login with twitter, it throws the following error:
Refused to display 'https://api.twitter.com/oauth/authenticate?oauth_token=....' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://tweetdeck.twitter.com https://tdapi-staging.smf1.twitter.com https://tdapi-staging.atla.twitter.com https://tweetdeck.localhost.twitter.com".
Also, the example works well when I have a single google account logged-in in my browser or when I enter google credential on the google login page. But when I have multiple google accounts logged-in and choose one of them for the app, it throws the following error:
Refused to display 'https://accounts.google.com/o/oauth2/auth?.....' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
In both the cases (twitter and multiple google accounts), the login happens, id token is generated but it fails to get access_token using acquireTokenSilent() and throws the above mentioned error. Then because of the acquireTokenpopup(), the login popup window shows again and when I enter my same credentials again, I get the access_token.
I have tried using loginRedirect() & acquireTokenRedirect() instead of popup but I have seen the same behavior.
What I have understood so far:
In the error cases, iframe is trying to add the google/twitter link into iframe src in the app home page (which is obviously not allowed).
In case of successful acquiring of access_token, I saw the iframe src has a microsoft login link (https://login.microsoftonline.com ...).
Can somebody help me understand why is it happening? And if someone has got a way to solve this, please help me out.
I haven't changed anything in the code, I just wanted to understand how msal.js works so that I can implement it in another project.