Skip to content

fix(docs-infra): load cross-origin video embeds under COEP credential…#69205

Open
erkamyaman wants to merge 1 commit into
angular:mainfrom
erkamyaman:docs-coep-credentialless
Open

fix(docs-infra): load cross-origin video embeds under COEP credential…#69205
erkamyaman wants to merge 1 commit into
angular:mainfrom
erkamyaman:docs-coep-credentialless

Conversation

@erkamyaman
Copy link
Copy Markdown
Contributor

adev is cross-origin isolated (COOP same-origin + COEP require-corp) so the embedded WebContainer editor can use SharedArrayBuffer. Under require-corp the cross-origin YouTube iframe in <docs-video> only loaded in Chromium, leaving the player blank in Safari.

Switch COEP from require-corp to credentialless. The page stays cross-origin isolated, so the editor keeps working, but cross-origin frames are now allowed to load, which restores the inline player in Safari as well.

PR Checklist

Please check to confirm your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.io application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

adev sets COOP: same-origin + COEP: require-corp on every response so the
embedded WebContainer editor can use SharedArrayBuffer. Under require-corp,
the cross-origin YouTube iframe in <docs-video> only loads in Chromium (via
the credentialless iframe attribute). In Safari the player is blank.

What is the new behavior?

Switches COEP from require-corp to credentialless in adev/angular.json and
adev/firebase.json. The page stays cross-origin isolated (the editor keeps
working), but cross-origin frames are now allowed to load, which fixes the
inline player in Safari as well as Chromium.

Does this PR introduce a breaking change?

  • Yes
  • No

…less

adev is cross-origin isolated (COOP same-origin + COEP require-corp) so the
embedded WebContainer editor can use SharedArrayBuffer. Under require-corp the
cross-origin YouTube iframe in `<docs-video>` only loaded in Chromium, leaving
the player blank in Safari.

Switch COEP from `require-corp` to `credentialless`. The page stays cross-origin
isolated, so the editor keeps working, but cross-origin frames are now allowed
to load, which restores the inline player in Safari as well.
@erkamyaman erkamyaman marked this pull request as ready for review June 6, 2026 08:20
@angular-robot angular-robot Bot added the area: docs-infra Angular.dev application and infrastructure label Jun 6, 2026
@pullapprove pullapprove Bot requested a review from alan-agius4 June 6, 2026 08:20
@ngbot ngbot Bot added this to the Backlog milestone Jun 6, 2026
@erkamyaman
Copy link
Copy Markdown
Contributor Author

erkamyaman commented Jun 6, 2026

Thanks for the pointer in #55310 (comment) this was exactly it @JeanMeche Relaxing the embedder policy to
credentialless keeps the cross-origin isolation the editor needs while letting
the YouTube iframe load, and it fixes Safari on top of Chromium.

One gap remains: Firefox still blocks the embed, since it has no credentialless
iframe attribute and its credentialless policy only applies to subresources,
not nested frames. I have a facade-based fallback ready for that and will open it
as a follow-up once this lands so this header fix can land on its own.

What do you think of this approach? I know it's a bit ugly but better than firefox error screen. Happy to adjust if you'd rather handle it differently.

Screen.Recording.2026-06-06.at.11.27.41.mov

Firefox is sadly still the same.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: docs-infra Angular.dev application and infrastructure

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant