如何禁用同域iframe对父窗口的访问？兼容YouTube播放需求

这确实是个典型的两难场景——同域下默认允许iframe访问父窗口，而sandbox属性的配置又会和YouTube视频的正常播放冲突。下面是几个经过实践验证的解决方案：

方案1：使用子域名隔离（最安全彻底） #

既然同域是根源问题，最干脆的解法就是把用户创建的页面部署到子域名下（比如pages.yourdomain.com），而主站在yourdomain.com。这样两者属于不同源，默认情况下iframe就无法访问父窗口，同时不需要添加任何sandbox属性，YouTube视频能正常加载播放。

这个方案的优势是完全依赖浏览器的同源策略，安全性最高，不需要额外的代码修改。

方案2：在iframe页面中主动限制父窗口访问 #

如果没法调整域名结构，可以在用户生成的HTML页面中注入一段脚本，重写window.parent和window.top的指向，让iframe页面无法获取到真正的父窗口对象：

<!-- 在用户页面的<head>中添加这段脚本 -->
<script>
// 锁定window.parent和window.top为当前窗口，禁止访问父级
Object.defineProperty(window, 'parent', {
  get: () => window,
  configurable: false,
  writable: false
});
Object.defineProperty(window, 'top', {
  get: () => window,
  configurable: false,
  writable: false
});
</script>

之后你可以安全地给iframe配置sandbox="allow-scripts allow-same-origin"来保证YouTube视频正常播放——即使有这些权限，iframe里的代码也无法通过parent或top访问到父窗口了。

方案3：优化sandbox属性配置（有限适用） #

如果用户页面中没有自定义脚本，只有YouTube嵌入代码，可以尝试更精细的sandbox配置，只授予必要的权限：

<iframe src="user-page.html" 
        sandbox="allow-scripts allow-presentation allow-same-origin">
</iframe>

• allow-scripts：保证YouTube的嵌入脚本能运行
• allow-presentation：支持视频全屏播放等交互
• allow-same-origin：确保iframe页面能正常加载自身资源

不过这个方案的局限性在于，如果用户页面包含自定义脚本，仍然可能绕过限制访问父窗口，所以更适合纯静态内容的场景。

内容的提问来源于stack exchange，提问作者user1807338