如何阻止父窗口访问iframe？反向跨框架权限控制技术问询

好问题！很多开发者都熟悉用sandbox属性限制iframe访问父窗口，但反过来阻止父窗口操控iframe的内容，确实是个容易被忽略的实用技巧。答案是完全可行，主要靠两种浏览器原生的安全机制：

1. 跨域隔离（最彻底的方案） #

这是浏览器同源策略自带的保护机制：如果iframe加载的页面和父窗口属于不同源（协议、域名、端口任一不一致），父窗口将无法访问iframe的contentWindow、document或任何JS变量/函数。

举个例子，父窗口运行在https://my-site.com，iframe加载https://another-site.com的页面，那么父窗口里的这段代码会直接报错：

const iframe = document.getElementById('my-iframe');
// 以下代码会触发跨域安全错误
console.log(iframe.contentWindow.document);

浏览器会直接拦截这类跨域访问，这是最可靠的阻止方式，不需要额外配置，只要保证iframe的源和父窗口不同即可。

2. 同源场景下用sandbox强制隔离 #

如果iframe和父窗口必须同源，也可以通过iframe的sandbox属性强制让浏览器把iframe当成独立源处理，从而阻断父窗口的访问。

默认情况下，给iframe添加空的sandbox属性会禁用很多权限（比如脚本执行、弹窗等），但我们可以按需开启必要权限，同时保留隔离效果：

<!-- 允许iframe执行脚本，但强制隔离源 -->
<iframe src="same-origin-page.html" sandbox="allow-scripts"></iframe>

这时候哪怕iframe和父窗口同源，浏览器也会把iframe标记为一个唯一的、与父窗口不同的源，父窗口尝试访问iframe的DOM或JS时，同样会触发跨域安全错误。

需要注意的是，sandbox的其他权限需要按需添加，比如如果需要iframe提交表单，要加上allow-forms；如果需要iframe和父窗口通过postMessage通信（这是唯一允许的跨源/隔离后通信方式），不需要额外配置，postMessage不受这个限制。

补充：为什么不能在iframe内部做限制？ #

很多人会想能不能在iframe里修改window.parent或者做其他操作来阻止父访问，但实际上不行：父窗口的代码运行在自己的上下文里，iframe无法修改父窗口对它的引用，也没法阻止父窗口尝试访问的行为，只能靠浏览器的安全机制从外部拦截。

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