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

最新推荐文章于 2025-05-18 19:19:11 发布

userDengDeng

最新推荐文章于 2025-05-18 19:19:11 发布

阅读量2.3w

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue js

本文链接：https://blog.youkuaiyun.com/userDengDeng/article/details/114583151

在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内