iframe嵌套页面跨域？如何让iframe可以跨域访问
大家好，关于iframe嵌套页面跨域很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于如何让iframe可以跨域访问的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！
详解iframe跨域的几种常用方法(小结)
背景
随着业务的发展，自然地会有一些公共的业务被抽离成为公共组件共各个项目使用。但是由于各个项目用到的技术栈都有所不同，所以这个公共组件就不能方便地被引用了。为解决这个问题，我们把这个组件写成了单独的页面挂到一个域名下，其他项目采用iframe或者webview的方式去加载这个页面，从而实现功能的简单复用。
不过这过程中也产生了很多问题，单是跨域就会出现好几次了。以下我将会介绍我遇到的跨域问题以及一些解决方法。
为什么会跨域
为了保证用户信息的安全，95年的时候Netscape公司引进了同源策略，里面的同源指的是三个相同：协议、域名、端口。
违反了同源策略就会出现跨域问题，主要表现为以下三方面：
无法读取cookie、localStorage、indexDB
DOM无法获得
ajax请求无法发送
场景
最近在做一个需求，需要用iframe引入一个别人封装好的类似视频播放器的东西。iframe里面有一个全屏的按钮，点击后需要页面让iframe全屏，由于受到同源策略的限制，iframe无法告诉页面全屏。
解决办法
设置domain
document.domain作用是获取/设置当前文档的原始域部分，同源策略会判断两个文档的原始域是否相同来判断是否跨域。这意味着只要把这个值设置成一样就可以解决跨域问题了。
在此我将domain设置为一级域名的值，a页面url为a.demo.com，a页面中iframe引用的b页面url为b.demo.com，具体设置为
document.domain='demo.com'
设置完之后，在a页面的window上挂载使iframe全屏的方法
// a页面
window.toggleFullScreen=()=>{
// do something
}
在b页面上可以直接获取到a页面的window对象并直接调用
// b页面
window.parent.toggleFullScreen()
但是这个值的设置也有一定限制，只能设置为当前文档的上一级域或者是跟该文档的URL的domain一致的值。如url为a.demo.com，那domain就只能设置为demo.com或者a.demo.com。因此，设置domain的方法只能用于解决主域相同而子域不同的情况。
使用中间页面
我们还可以使用一个与a页面同域名但不同路由的c页面作为中间页面，b页面加载c页面，c页面调用a页面的方法，从而实现b页面调用a页面的方法。具体操作如下：
在a页面的node层新开一个路由，此路由加载一个c页面作为中间页面，c页面的url为a.demo.com/c。c页面只是一个简单的html页面，在window的onload事件上调用了a页面的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.onload= function(){
parent.parent.toggleFullScreen();
}
</script>
</body>
</html>
由于c页面和a页面是符合同源策略的，所以可以避开跨域问题，执行全屏的方法。
postmessage
window.postMessage方法可以安全地实现跨源通信，写明目标窗口的协议、主机地址或端口就可以发信息给它。
// b页面
parent.postMessage(
value,
""
);
// a页面
window.addEventListener("message", function( event){
if(event.origin!=='') return;
toggleFullScreen()
});
为了安全，收到信息后要检测下event.origin判断是否要收信息的窗口发过来的。
通过以上的方法，我们就可以和iframe自由通信啦。
iframe跨域嵌套后内页无法访问怎么办
iframe跨域嵌套后内页无法访问的问题源于浏览器同源策略限制，此问题无法通过技术手段直接绕过或解决。以下是具体原因和替代方案：
原因分析浏览器安全策略：现代浏览器通过同源策略（Same-Origin Policy）禁止跨域访问页面内容，防止恶意网站窃取数据或执行跨站脚本攻击（XSS）。错误表现：当尝试通过JavaScript访问跨域iframe的contentWindow或contentDocument时，浏览器会抛出安全错误，例如：Blocked a frame with origin"; from accessing a frame with origin";。无法直接解决的根源被嵌套页面不可控：若无法修改被嵌套页面的代码（如第三方网站），则无法通过添加X-Frame-Options或CORS头来允许跨域访问。技术限制：即使使用postMessage通信，也需要被嵌套页面主动配合发送消息，否则无法单向获取数据。替代解决方案1.同源代理（需服务器权限）原理：通过后端服务器代理跨域请求，将目标页面内容转为同源后再嵌入。步骤：在您的服务器上编写代理脚本（如PHP、Node.js），请求目标URL并返回内容。
修改iframe的src为代理地址（如/proxy?url=）。
限制：需服务器支持代理功能。
可能违反目标网站的使用条款（如爬虫限制）。
无法执行被嵌套页面中的JavaScript（仅返回静态HTML）。
2.修改被嵌套页面的响应头（需权限）适用场景：若您拥有被嵌套页面的控制权，可配置服务器允许跨域。方法：添加X-Frame-Options: ALLOW-FROM （已废弃，部分浏览器不支持）。
使用CORS头：Access-Control-Allow-Origin: : true
现代推荐：使用Content-Security-Policy的frame-ancestors指令：Content-Security-Policy: frame-ancestors'self' ;
3.使用postMessage进行跨域通信（需双方配合）原理：通过浏览器提供的window.postMessageAPI实现安全的数据交换。步骤：被嵌套页面需监听消息并发送数据：//在domainB.com的页面中window.addEventListener('message',(event)=>{ if(event.origin===';){ event.source.postMessage({ data:'允许访问的内容'}, event.origin);}});
父页面发送请求并接收响应：//在domainA.com的页面中const iframe= document.getElementById('myIframe');iframe.contentWindow.postMessage('请求数据',';);window.addEventListener('message',(event)=>{ if(event.origin===';){ console.log('收到数据:', event.data);}});
限制：需被嵌套页面主动实现消息监听逻辑。4.完全避免跨域嵌套推荐方案：若无法控制被嵌套页面，考虑以下替代设计：链接跳转：将iframe替换为超链接，引导用户在新标签页打开。
API集成：若目标网站提供API，直接调用API获取数据而非嵌套页面。
浏览器扩展：开发扩展程序绕过限制（仅限特定场景，如企业内部工具）。
总结无解场景：若无法修改被嵌套页面且无服务器代理权限，则无法通过技术手段访问跨域iframe内容。优先方案：根据实际需求选择代理、postMessage或重构页面结构。安全提示：任何绕过同源策略的尝试（如修改浏览器设置或使用非法插件）均会带来严重安全风险，不建议实施。
JavaScript 怎么跨域获取 iframe 中的内容
要解释这个问题，首先要解释两个技术点。
每个“窗口”都是一个JS Runtime，即JS的运行时。如果只有一个窗口，那么就只有一个Runtime；如果一个窗口下面还有一个iframe，那么就有两个Runtime；以此类推。
Runtime之间互操作（或者通信）是有跨域限制的。也就是说，如果这个窗口本身是a.baidu.com域名下的页面，那么如果这个页面下还有一个iframe，这个iframe中加载的页面是b.baidu.com域名下的。那么外层的JS。就不能跟这个iframe中的内容互操作（或者通信）。
因此外层Runtime中的JS想操作内层iframe中的内容，就必须要避免跨域限制。要么内层iframe加载页面的域名跟外层是一样的。要么就是需要在内层iframe加载的页面中执行document.domain='baidu.com';从而设置跟外层的主域相同。
例如，当前页面是a.baidu.com/test.html
<html>
<head>
</head>
<body>
<iframe id="iFrm1" src="0c893329b8c9af6ff578db9b1a128d13"margin: 0px; padding: 0px; color: rgb(69, 69, 69); font-family: arial,宋体, sans-serif, tahoma,'Microsoft YaHei'; font-size: 14px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;-webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);-webkit-text-size-adjust: auto;-webkit-text-stroke-width: 0px;">
iframe中加载的页面内容如下：
<html>
<head>
</head>
<body>
<div id="innerDiv">恭喜操作到内部iframe中的元素了！！！</div>
<script>
document.domain='baidu.com';
</script>
</body>
</html>
在HTML5中新增了postMessage的API。可以方便窗口跟内部iframe之间进行通信，并且可以实现跨主域通信。但是有一些限制，1.老版本的浏览器一般不支持。2.父窗口只能向iframe中发送信息，iframe只能收消息，且父窗口不能直接操作iframe中的内容。3.父窗口发送的数据也是有限制的。只能发送基本数据类型或者plain object。
关于iframe嵌套页面跨域到此分享完毕，希望能帮助到您。