Solving (or working around) frame-ancestors errors for OAuth2 Implicit flow

[jeroenheijmans]

Hello, and thank you so much for a wonderful service! I unfortunately run into a problem, and was wondering if a solution is available (or even possible).

My issue is demonstrated by this example StackBlitz: https://stackblitz.com/edit/angular-dkn4hf

If you click "Login" an OAuth2 Implicit Flow login sequence should be triggered, but that causes a redirect to another domain (that of the https://demo.identityserver.io/ IDS, kindly provided by IdentityServer). This is blocked, the error in the console says:

Refused to display 'https://demo.identityserver.io/account/login?returnUrl=%2Fconnect%2Fauthorize%2Fcallback%3Fresponse_type%3Did_token%2520token%26client_id%3Dimplicit%26state%3DisMgG925fYSI4uStdDolTZxzURalQUF3yVKNxRdH;%25252Fhome%26redirect_uri%3Dhttps%253A%252F%252Fangular-dkn4hf.stackblitz.io%252Findex.html%26scope%3Dopenid%2520profile%2520email%26nonce%3DisMgG925fYSI4uStdDolTZxzURalQUF3yVKNxRdH' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

This makes perfect sense to me, but to test OAuth flows you'd really need this.

Is there a way to configure a StackBlitz to allow this kind of behavior?

I can however imagine it being blocked for security reasons, and if that's the case I wouldn't be sad if it's just not possible. However, then I'd ask: is there some way to host a NodeJS-based test OAuth2 server inside the StackBlitz itself?

[apai4]

@jeroenheijmans Thanks for letting us know about this! It looks like we're currently unable to view other domains using the preview frame that's embedded within the editor. A workaround for this is you can open up the preview in its own tab/window detached from the editor: https://angular-dkn4hf.stackblitz.io/ then the auth flow and redirects work properly, and you'll still be able to see your app update as you make changes in the editor. Lmk if this works for you!

[jeroenheijmans]

@apai4 Yes, thank you. The workaround seems to work, that'll do for now ❤️ 👍

[purplem1lk]

@jeroenheijmans Thanks for letting us know about this! It looks like we're currently unable to view other domains using the preview frame that's embedded within the editor. A workaround for this is you can open up the preview in its own tab/window detached from the editor: angular-dkn4hf.stackblitz.io then the auth flow and redirects work properly, and you'll still be able to see your app update as you make changes in the editor. Lmk if this works for you!

This issue has been resolved and will be closed accordingly. If this issue persists, feel free to tag me or ask to reopen this issue with screenshots of the error. Thank you! :)