Nrthugu

I am trying to run Microsoft's sample code for implementing Azure AD B2C authentication.
The codebase can be found here:
https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp/blob/master/index.html

I modified the code so as shown in the following gist. The main change is that instead of using the Msal.UserAgentApplication object's loginPopup() method, I am using loginRedirect() (for the better user experience)
https://gist.github.com/ttchuah/6718e268a235a3206968b36d748fd369

Here is what happens when I run the code.

1. I see the index.html page as expected.


2. I click the login button, get redirected to the Microsoft login page, where I can see the option to do a social login via Google.


3. I log in through Google and get redirected back to my index.html page.

At this point, the "authCallback()" function fires.

In Chrome, I get the following console error. Any ideas why?
Refused to display 'https://accounts.google.com/o/oauth2/auth?client_id=903295266285-78au30g3bsmt8q1phvfqqu65c58kp35i.apps.googleusercontent.com&redirect_uri=https%3a%2f%2flogin.microsoftonline.com%2fte%2fdv0dop000devaad000.onmicrosoft.com%2foauth2%2fauthresp&response_type=code&scope=email+profile&state=StateProperties%3deyJTSUQiOiJ4LW1zLWNwaW0tcmM6OGM1YTQwNDQtNGYyYi00ZTJmLTgyMmUtYjU2ZjRkMWU4ZWU2IiwiVElEIjoiMDBmZjUzOTctNjYxZC00NDY4LWFlODktNzlkOThlMmEwMzI0In0' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

The same error does not happen in FireFox or Safari. For those browsers, I am able to get an auth token back without issue.

The X-Frame-Options header is a security measurement against clickjacking, the thing is, not all browsers have an implementation that takes that header into consideration when processing a returned response (see X-Frame-Options on MDN).

Long story short, Chrome will block any response processing that doesn't have a matching allow-from value in the X-Frame-Options header from rendering in a frame, iframe or object element.

Hope it helps!