Hi!
I’ve stumbled on an issue that I cannot really get my head around which appears to be caused by some difference between Edge and Chrome.
Background: We are developing a B2B application which is supposed to work together with whichever authentication mechanism the customer is using. Hence we are using or trying to use Auth0 to facilitate all this…
One requirement is that this application should be possible to use within Microsoft Teams.
What we have is a React app served by a Node.js server. All works well in the browser of course and it is possible to login to the app. We then proceeded to smoketest this in Microsoft Teams and as Teams renders the app in an iframe we had to do some CSP configuration on the Node server to allow teams to be a frameancestor among others, so in that sense nothing auth0 specific. Things then worked in Microsoft Teams when logged in through browser with Chrome, interestingly though it doesn’t work with Edge. The same applies to using Teams desktop app, doesn’t work there as it uses the same technology as Edge.
Picture 1: Loginpage rendered in Microsoft Teams using the browser application in Chrome
Picture 2: Error xxx.eu.auth0.com refused to connect when rendered in Microsoft Teams using the browser in Edge
The exact error that is being thrown in edge is:
Refused to frame ‘https://XXXX.eu.auth0.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘none’”.
Unless my diagnosis is entirely wrong it means that the auth0 login page has the frame-ancestors: none. This seems to be the default in order to prevent clickjacking. Weird though that it works in chrome and not in edge which is what makes me so confused. Any thoughts about this?
As can be seen from Picture 1 we are using the New Login Experience. With New Login Experience it is not possible to disable clickjacking. However, if I switch login experience to Classic it can be done, in that case the login page is also shown in Edge. Of course we want to keep the app as safe as possible so running Classical mode with clickjacking prevention disabled is not an option.
What could explain the difference between Chrome and Edge?
Ïdeally we would want to be able to set an allowed frame ancestor for the auth0 login page. Can the security headers for the New Login Experience be customized like that? Haven’t been able to try that myself as we are still determining if we want to use auth0 and therefore just using the free plan.