search

discord / discord-api-docs

Official Discord API Documentation
https://discord.com/developers/docs/intro
Other
5.91k stars 1.25k forks source link

Discord Widget Cross Origin Embedder Policy #6447

Open ForbiddenEra opened 11 months ago

ForbiddenEra commented 11 months ago

Description

The Discord widget/iframe doesn't set a CSP header.

Without something like

Content-Security-Policy: frame-ancestors 'self' https://*;

or

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Resource-Policy: cross-origin

sites that use 

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

can't embed the widget properly.

Chrome at least supports credentialless="true" as an attribute on the <iframe> which makes it work (Chrome also allows crossOriginIsolated with Cross-Origin-Embedder-Policy: credentialless) but Firefox doesn't and it won't embed..

Steps to Reproduce

Embed widget into site with headers:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Expected Behavior

Should work in Firefox / other browsers as it does in Chrome - though Chrome has specific workarounds for this.

Current Behavior

image

Doesn't work!

Screenshots/Videos

No response

Client and System Information

Chrome/Firefox latest versions as of writing

matthova commented 11 months ago

@ForbiddenEra we've applied some changes which should address the behavior you've described. Can you confirm?

ForbiddenEra commented 11 months ago

@ForbiddenEra we've applied some changes which should address the behavior you've described. Can you confirm?

Oo, lovely! Let me peek... Yep! Seems like the issue is solved for the widget!

Thanks!

I am wondering though - the iframe code has allow-popups and allow-popups-to-escape-sandbox - how needed are these? I'd guess the first would probably be needed at least. Is there a specific method of functionality I can test to ensure it's working properly for everyone? I tested clicking "Join Discord" in both browsers, with COOP set to same-origin and a tab opened which then opened my local Discord client, so that seems to work as expected.

With COOP set to same-origin-allow-popups I lose crossOriginIsolated in both Chrome/FF; I'm not sure exactly how the interaction between the HTTP header and iframe attributes is implemented across both browsers - but with just same-origin without the -allow-popups as I said above, it seems to be able to popup/open a tab so long as the iframe has allow-popups, without that sandbox attribute value, neither browser will open a new tab, however both also work seemingly fine without allow-popups-to-escape-sandbox. Haven't tried any of this on Safari or mobile yet.

Chrome at least supports credentialless attribute on an iframe tag, Firefox doesn't, and Firefox doesn't (didn't?) support credentialless in the COEP header, although MDN now lists FF v119 as having it in preview, so that should help soon for these situations. However, if the remote origin (in this case, Discord) has their headers setup properly, then it's not needed - much appreciated that you fixed this!

Just to clarify, my goal is to to have crossOriginIsolated across my site; fortunately at this moment it's not an absolutely required feature, however, having SharedArrayBuffer would definitely be great since I use workers a fair bit.

I can't seem to win, however! Google login is having a COEP-related error now in Firefox which is new - and of course works fine in their browser.. I had it all working except for the page w/the Discord widget when I made this thread and now it doesn't - but that's Googles fault now :)

As much as I love that everyone is on the latest browsers these days unlike times past, sometimes I feel like I'm being gaslit with things that work or not or I have to doubt myself whether something worked, LMAO.

Thanks again - this issue can be considered closed, it would be great if I can get answers/insight into why specific sandbox tags were chosen but otherwise the core issue is solved.