iframe 内嵌报跨域SecurityError: Blocked a frame with origin “http://x“from accessing a cross-origin frame

在Vue项目中,当iframe内嵌页面时遇到跨域SecurityError,可以通过设置`document.domain`来规避同源政策,允许不同二级域名的页面间通信。在父窗口和子窗口的mounted生命周期中分别设置document.domain,使子窗口能够调用父窗口的方法,例如调整iframe高度。同时,利用`postMessage`和`message`事件进行父子窗口间的通信。在本地调试环境,需要服务器配合设置`X-Frame-Options`头来允许页面在iframe中加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue 项目中 嵌入 iframe

<iframe id="iframe" width="100%" height="100%" frameborder="0" :src="embedSrc"></iframe>

报跨域错误

 Error in nextTick: "SecurityError: Blocked a frame with origin "https://test-live.cantonfair.org.cn" from accessing a cross-origin frame."

解决方案
如果两个网页不同源,就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口,它们与父窗口无法通信。
比如,父窗口运行下面的命令,如果iframe窗口不是同源,就会报错。


document.getElementById("iframe").contentWindow.postMessage(message, targetOrigin)
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.

如果两个窗口一级域名相同,只是二级域名不同,那么设置document.domain属性,就可以规避同源政策,拿到DOM。
在父窗口的 mounted() 生命周期开头插入

docment.domain='cantonfair.org.cn'

在插入子窗口的mounted() 生命周期开头插入

docment.domain='cantonfair.org.cn'

这样,子窗口就可以 调用父类中的方法,动态设定iframe的高度

// 调用父类中的方法,动态设定iframe的高度,使用三段来进行兜底,控制页面高度
this.$nextTick(() => {
	window.parent.setVideoHeight 
	&&
	window.parent.setVideoHeight(document.getElementById('app'))
	&& document.getElementById('app').scrollHeight + 2 || 2000
})

这样,子窗口可以使用 发送消息给父窗口

window.parent.postMessage({ msg: 'MessageFromIframePage' }, '*')

父窗口通过 方式监听到 事件

window.addEventListener('message', ({ data }) => {
	if (data.msg == 'MessageFromIframePage') {
          var frame = document.getElementById('iframe')
          frame.contentWindow.postMessage('hideRisk', '*')
    }
})

具体参考阮一峰老师的文章
浏览器同源政策及其规避方法

服务器配合
localhost 本地调试环境,运维配合增加 header
X-Frame-Options: 用来告诉浏览器这个网页是否可以放在 Frame 内

X-Frame-Options: DENY
// 全部拒绝
X-Frame-Options: SAMEORIGIN
// 架设的iframe网站 与发出 X-Frame-Options的网站相同
X-Frame-Options: ALLOW-FROM https://xxx 
// 这个网页只能放在 https://xxx  架设的 iframe内
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值