Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Web: YouTube embeds broken #411

Closed
Tracked by #653
adamziel opened this issue May 22, 2023 · 3 comments
Closed
Tracked by #653

Web: YouTube embeds broken #411

adamziel opened this issue May 22, 2023 · 3 comments
Labels
[Aspect] Browser [Type] Bug An existing feature does not function as intended

Comments

@adamziel
Copy link
Collaborator

The web version of Playground serves aCross-Origin-Embedder-Policy: credentialless header which conflicts with Cross-Origin-Embedder-Policy: require-corp served by YouTube. As a result, iframed videos don't load.

The credentialless header got added to support embedding in StackBlitz. However, that use-case didn't pick up much steam.

Let's remove the Cross-Origin-Embedder-Policy header entirely for now, and if it's needed later, add it behind a Query API flag.
@adamziel adamziel added the [Type] Bug An existing feature does not function as intended label May 22, 2023
@adamziel
Copy link
Collaborator Author

adamziel commented Jun 2, 2023 •
edited
Loading

Potentially related error:

{"hostName":"playground.wordpress.net","msg":"\u003Cspan jscontent="hostName">\u003C/span> is blocked"},"hideDetails":"Hide details","iconClass":"icon-generic","language":"en","suggestionsDetails":[],"suggestionsSummaryList":[],"summary":{"failedUrl":"https://playground.wordpress.net/scope:0.6838545064196246/wp-admin/admin.php?page=graphiql-ide","hostName":"playground.wordpress.net","msg":"\u003Cstrong jscontent="hostName">\u003C/strong> refused to connect."},"textdirection":"ltr","title":"playground.wordpress.net"}

@adamziel adamziel mentioned this issue Jun 20, 2023
Merged
@adamziel adamziel mentioned this issue Oct 4, 2023
Closed
10 tasks
@adamziel
Copy link
Collaborator Author

adamziel commented Oct 13, 2023 •
edited
Loading

It's worth noting that adding credentialless to the embed iframe like <iframe src="" credentialless> fixes the YouTube embed. This could be solved in WordPress core.

However, let's think about it some more.

Making a choice, like require-corp or credentialless has consequences for both sites trying to embed Playground, and the sites Playground wants to embed.

Maybe Playground doesn't need to provide the Cross-Origin-*-Policy headers at all? Removing it fixes the YouTube embed.

Chrome developer blog says:

We're introducing <iframe credentialless> to help embed third-party iframes that don't set COEP

That would work perfectly here.

Here's what MDN says about the credentialless iframe parameter:

This results in the documents inside the credentialless <iframe> being loaded using new, ephemeral contexts — those contexts don't have access to the data associated with their origins; for example cookies and localStorage. [data] is no longer accessible once the user has navigated away.

adamziel added a commit that referenced this issue Oct 13, 2023
@adamziel
Remove Cross-Origin-*-Policy headers
bfd16e4 
These headers were introduced to enable embedding Playground on sites
where CORP headers are set.

However, choosing a header value like require-corp or credentialless has
consequences for both sites trying to embed Playground, and the sites
Playground wants to embed. In particular, it broke YouTube embeds
(#411).

Let's rollback these headers for now. Embedding Playground should still
be possible on sites with CORP headers by using a credentialless iframe:

[Chrome developer blog](https://developer.chrome.com/blog/iframe-credentialless/) says:

> We're introducing <iframe credentialless> to help embed third-party iframes that don't set COEP

Credentialless iframes generate ephemeral contexts for cookies and
storage that are destroyed once the user navigates away from the
top-level page. For the most part, it doesn't matter in Playground. In
the future we might see a use-case for preserving the state of
Playground embedded in a credentialless iframe. Let's revisit these
headers if and when that happens,.

Solves #411
@adamziel adamziel mentioned this issue Oct 13, 2023
Merged
adamziel added a commit that referenced this issue Oct 13, 2023
@adamziel
Remove Cross-Origin-*-Policy headers (#695)
e5db16e 
These headers were introduced to enable embedding Playground on sites
where CORP headers are set.

However, choosing a header value like require-corp or credentialless has
consequences for both sites trying to embed Playground, and the sites
Playground wants to embed. In particular, it broke YouTube embeds
(#411).

Let's rollback these headers for now. Embedding Playground should still
be possible on sites with CORP headers by using a credentialless iframe:

[Chrome developer
blog](https://developer.chrome.com/blog/iframe-credentialless/) says:

> We're introducing <iframe credentialless> to help embed third-party
iframes that don't set COEP

Credentialless iframes generate ephemeral contexts for cookies and
storage that are destroyed once the user navigates away from the
top-level page. For the most part, it doesn't matter in Playground. In
the future we might see a use-case for preserving the state of
Playground embedded in a credentialless iframe. Let's revisit these
headers if and when that happens,.

Solves #411

Related to #586
@adamziel
Copy link
Collaborator Author

Fixed in #695

@adamziel adamziel mentioned this issue Jan 18, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Aspect] Browser [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@adamziel