Search code examples
javascriptcross-origin-embedder-policycross-origin-resource-policy

Using Youtube iframe api in cross origin isolated site

My project uses multiple threads and SharedArrayBuffer. In firefox, to use SharedArrayBuffer, your site needs to be cross origin isolated. This will also be coming to chrome and edge. So I isolated the site by setting these headers from the node.js server:

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

This fixes the problem in firefox and removes the warnings in chrome and everything works as intended.

Now I am also using the youtube iframe api on the site. The videos get blocked due to cross origin isolation. It works when cross origin isolation is disabled. Is there any way to make it work?

enter image description here

This video on youtube tells that I will have to set a corp header or something for it to work but I dont understand that.

Solution

  • This can be resolved by either youtube side by adding Cross-Origin-Resource-Policy (reported) or by a browser via <iframe anonymous> feature (status).

    The feature is available in chrome 105 under flag --enable-blink-features=AnonymousIframe and can be tested on https://anonymous-iframe.glitch.me/ (look for "Status = Enabled")

    Running chrome with the flag + <iframe src="https://www.youtube...." anonymous></iframe> does work