在 sandbox-iframe 中嵌入 youtube-iframe 失败答案

【问题标题】：Embedding youtube-iframe fails within sandbox-iframe在 sandbox-iframe 中嵌入 youtube-iframe 失败
【发布时间】：2020-05-06 17:34:08
【问题描述】：

当将 youtube-iframe 嵌入到另一个 iframe 中时，该 iframe 被沙盒化（以防止 XSS），播放器在所有主要浏览器中都保持黑色。

见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>

浏览器的控制台日志显示以下错误，因为 youtube-api 存在 CORS 问题（allow-same-origin 在这里没有选项，因为启用了 allow-scripts 并且会使 cookie 易受攻击）

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.

它没有帮助

允许在沙箱中使用更多功能，或者在内部 iframe 上也定义沙箱
使用 youtube 的旧对象嵌入源代码
从 youtube 播放器中删除允许参数
使用 youtube-nocookie.com 应用增强隐私模式

如何让 youtube 忽略 cookie-access- 或 preflight-origin-limitations？

（Vimeo 在这种沙盒 iframe 中没有问题，但有些视频只能在 youtube 中观看。）

【问题讨论】：

标签： youtube-api youtube-iframe-api

【解决方案1】：

我遇到了同样的问题，必须设置以下沙箱属性才能正常工作

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

【讨论】：

同时允许脚本和同源，实际上使沙箱unsafe
如果 iframe 的来源与页面的来源不同，它不会使其不安全。该安全漏洞仅在加载 blob 或与页面具有相同来源的内容时出现，如您提到的答案中所述。