6

When embedding a youtube-iframe into another iframe, which is sandboxed (to prevent XSS) the player stays black in all major browser.

See https://jsfiddle.net/ms9fwLbk/

<!DOCTYPE html><html lang='en'><head><title>Sandbox iframe youtube problem</title></head><body>
<iframe sandbox='allow-scripts allow-presentation' width='600' height='400' srcdoc='
     <!DOCTYPE html><html lang="en"><head><title>iframe</title></head><body>
     <!-- original source-code shared from youtube: -->
     <iframe width="560" height="315"
         src="https://www.youtube.com/embed/QwS1r1mc888?controls=0"
         frameborder="0"
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
         allowfullscreen></iframe>
     </body></html>
'></iframe></body></html>

The browsers' console log shows following errors, because the youtube-api has troubles with CORS (allow-same-origin is no option here, because allow-scripts is enabled and would make cookies vulnerable)

Uncaught DOMException: Failed to read the 'cookie' property from 'Document':
The document is sandboxed and lacks the 'allow-same-origin' flag.
at Vb.m.get (https://www.youtube.com/yts/jsbin/www-embed-player-vflwaq4V_/www-embed-player.js:142:47)

Access to XMLHttpRequest at 'https://www.youtube.com/error_204?...'
from origin 'null' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

It does not help to

  • allow more features within the sandbox, or define sandbox also on the inner iframe
  • use youtube's old object embed source-code
  • remove allow-parameters from the youtube-player
  • apply enhanced privacy mode by using youtube-nocookie.com

How to make youtube ignore cookie-access- or preflight-origin-limitations?

(Vimeo has no issues within such sandboxed iframe, but some videos are only available in youtube.)

Reinhard Hofmann
  • 61
  • 1
  • 4

1 Answers1

10

I ran into the same issue and had to set the following sandbox attributes for it to work

sandbox="allow-scripts allow-same-origin"

More info https://www.w3schools.com/tags/att_iframe_sandbox.asp

Leif Boström
  • 101
  • 1
  • 3
  • 5
    Allowing Scripts and Same-Origin at once, actually makes the sandbox [unsafe](https://stackoverflow.com/questions/35208161/is-it-safe-to-have-sandbox-allow-scripts-allow-popups-allow-same-origin-on-if/62431584#62431584) – Reinhard Hofmann Nov 16 '20 at 08:24
  • 3
    It doesn't make it unsafe if the origin of the iframe is different to the origin of the page though. That security hole is only when loading a blob or something that will take on the same origin as the page, as explained in the answer you mentioned. – shadow-light Nov 12 '21 at 07:26