YouTube embedded player fails when using Cross-Origin-Embedder-Policy (COEP) different than 'unsafe-none' [351843802]

Assigned

Bug

Status Update

No update yet.

Description

ri...@metadrop.net

created issue #1

Jul 8, 2024 06:26PM

Description

When embedding the YouTube player in a website with Cross-Origin Embedder Policy (COEP) enabled, the player fails to render because www.youtube.com site is not sending the Cross-Origin-Embedder-Policy header.

How to repoduce

For example, let's use the HTML code returned by YouTube itself to embed this video:

<html>
  <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/3KtWfp0UopM?si=5tsAKBelFXy70hhh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  </body>
</html>

Let's say this HTML code is served from a server with COEP enabled using this header:

Cross-Origin-Embedder-Policy: require-corp

When loading this page with Google Chrome the YouTube player fails to render. If you check the Google Chrome's Issue tab in Development tool there's an issue on the request to the YouTube server:

Specify a Cross-Origin Embedder Policy to prevent this frame from being blocked

Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each embedded iframe must also specify this policy. This behavior protects private data from being exposed to untrusted third party sites.
To solve this, add one of following to the embedded frame’s HTML response header:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Embedder-Policy: credentialless (Chrome > 96)

See attached screenshot.

Expected result

YouTube player renders.

Is it 100% reproducible?

Yes, when server uses Cross-Origin-Embedder-Policy: require-corp it is always reproducible.

Proposed solution

Adding the following header to the response from YouTube fixes the issue:

Cross-Origin-Embedder-Policy: require-corp

This has been tested using a Chrome extension that is able to alter Response headers.

Screenshot_20240708_201935.png

172 KB

View

Download

Comments

sn...@google.com <sn...@google.com> #2Jul 9, 2024 05:22PM

Assigned to sn...@google.com.

Hi, thanks for reaching out to us and reporting this issue! Will share this to the internal teams and open a report on your behalf. Will reach back with updates as soon as I have one.

Thanks!

lu...@gmail.com <lu...@gmail.com> #3Jul 20, 2024 05:43PM

This has created significant limitations in our app - we need to enable COEP so we can use SharedArrayBuffer for some performance-intensive code, however we currently can't do this and embed YouTube videos at the same time, which we need to support. Credentialless/anonymous iframes would theoretically also solve this issue, but this is not widely adopted in browsers (and WebKit is in fact resistant to implementing it due to user safety concerns:

https://github.com/WebKit/standards-positions/issues/45)

Issue 351843802

Description

Issue summary

Comments

sn...@google.com <sn...@google.com> #2Jul 9, 2024 05:22PM

lu...@gmail.com <lu...@gmail.com> #3Jul 20, 2024 05:43PM

Add comment

Issue metadata