跨域场景下从iframe访问父级对象时出现SecurityError的问题

嘿，这个问题我之前也碰到过！你遇到的是浏览器**同源策略（Same-Origin Policy）**导致的SecurityError——浏览器为了防范恶意脚本，会阻止跨域的iframe访问父页面的window对象，所以你的parent.SomeApi.clickMe()调用才会报错。

先回顾下你的代码场景：

你的现有代码 #

主HTML页面 #

<script type="text/javascript"> 
var SomeApi = {}; 
SomeApi.clickMe = function() { 
    // 自定义事件逻辑
} 
</script>

Iframe代码 #

<a href='#' onclick='parent.SomeApi.clickMe();return false;'>Click me</a>

下面分两种场景给你解决方案：

1. 如果你是同源场景（同域名/协议/端口） #

先快速排查几个容易踩的坑：

• 确认iframe的src没有隐性跨域：比如父页面是https://xxx.com，iframe却用了http://xxx.com（协议不同），或者端口一个是80一个是8080
• 检查浏览器隐私模式：部分浏览器的隐私模式会额外限制同源页面的交互，试试正常模式下运行
• 确认没有其他安全插件/浏览器设置拦截了页面交互

2. 跨域场景下的标准解决方案 #

如果iframe和父页面确实不同源，推荐用以下几种方法：

方法一：用postMessage实现跨域通信（最推荐） #

这是浏览器官方指定的跨域通信方案，安全且通用，核心是通过消息传递来触发父页面的方法，而不是直接访问父对象。

父页面修改：添加消息监听

window.addEventListener('message', function(event) {
    // 一定要验证消息来源！防止恶意网站发送伪造消息
    if (event.origin !== 'https://你的iframe完整域名.com') {
        return;
    }
    // 根据消息内容执行对应方法
    if (event.data === 'callClickMe') {
        SomeApi.clickMe();
    }
});

Iframe代码修改：发送消息给父页面

<a href='#' onclick='window.parent.postMessage("callClickMe", "https://你的父页面完整域名.com");return false;'>Click me</a>

小贴士：postMessage的第二个参数填父页面的准确域名更安全，别偷懒用*（会允许发送给任意域名）。

方法二：同主域名子页面对接（仅限你控制两个域名的情况） #

如果父页面和iframe是同主域名的子域名（比如a.yourdomain.com和b.yourdomain.com），可以通过设置document.domain来放宽同源限制：

父页面和iframe都要添加这段代码：

document.domain = 'yourdomain.com'; // 设置为共同的主域名

设置后两个页面就可以互相访问对方的window对象了，不过这种方法只适合同主域名场景，灵活性不如postMessage。

方法三：配置iframe的sandbox属性（谨慎使用） #

如果是嵌入自己的iframe，可以给iframe添加sandbox属性并开启必要权限：

<iframe src="你的iframe地址" sandbox="allow-same-origin allow-scripts"></iframe>

注意：sandbox会默认限制iframe的很多权限，只添加你需要的允许项（比如allow-same-origin允许同源，allow-scripts允许执行脚本），避免过度开放带来安全风险。

总的来说，优先用postMessage，这是跨域场景下最稳妥的解决方案；如果是同源问题，先排查协议、域名、端口是否完全一致。

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