postMessage处理iframe 跨域问题

cooxer 发布于2019-08-19 17:42 / 1463人阅读

摘要：四传递信息给父页面参考跨域子页面传给父页面父页面代码崔涣测试父页面参数中有属性，就是父窗口发送过来的数据把父窗口发送过来的数据显示在子窗口中。五简单分析和安全问题传送过来的信息如下图，几乎包含了所有应该有的信息。

背景：由于同源策略存在，javascript的跨域一直都是一个棘手的问题。父页面无法直接获取iframe内部的跨域资源；同时，iframe内部的跨域资源也无法将信息直接传递给父页面。

一：传统的解决方式。

传统的iframe资源解决方式：主要通过通过中间页面代理，此处不再赘述，参考中间页获取跨域iframe

二：html5 postMessage的产生

随着HTML5的发展，html5工作组提供了两个重要的接口：postMessage(send) 和 onmessage。这两个接口有点类似于websocket，可以实现两个跨域站点页面之间的数据传递。

postMessage API

下面是实践过程中两个小栗子：分别父页面传递信息给iframe，iframe传递信息给父页面。

三：iframe获取父页面信息

话不多说，直接上码：
参考demo：父页面传给子页面demo

父页面代码



    
    崔涣 iframe postmessage 父页面

子页面代码

 
  
  
 崔涣测试子页面信息 
  
  
  
     this is the 8003 port for cuixiaozhuai

demo 效果如下图：两个跨域页面之间，父页面给子页面传递数据。

四：iframe传递信息给父页面

参考demo：跨域子页面传给父页面demo

父页面代码


 
 
 崔涣测试父页面
 
 
 
     
     

     this is the 1015 port for cuixiaozhuai。

子页面代码



    
    崔小涣iframe postmessage 测试页面
    




this is the  port for cuixiaozhuai

demo 效果如下图：两个跨域页面之间，子页面传递数据给父页面传递数据。

五：postmessage简单分析和安全问题

postmessage 传送过来的信息如下图，

几乎包含了所有应该有的信息。甚至data中可以包含object，出于安全考虑可以域的校验，数据规则的校验安全校验，如下代码

 window.addEventListener("message", function (event) {
        
        //校验函数是否合法
        var checkMessage = function () {
            // 只获取需要的域，并非所有都可以跨域
            if (event.origin != "need domain") {
                return false;
            }

            
            var message = event.data;
            // 传输数据类型校验
            if (typeof(message) !== "object") {
                return false;
            }

            // message 的rule中包含xxx则为xxx需要字段。
            return message.rule === "xxx";
        };

        if (checkMessage()) {
            // 通过校验进行相关操作
            addDetailFunc(event);
        }
    });

【转载请注明：postMessage处理iframe 跨域问题 | 靠谱崔小拽】

GPU云服务器云服务器 iframe跨域 iframe载入数据问题跨域问题 cdn跨域问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78770.html

关于跨域问题

摘要：面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。它...

ZoomQuiet 2019-08-23 16:25 评论0 收藏0
关于跨域问题

摘要：面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。它...

livem 2019-08-02 16:09 评论0 收藏0
关于跨域问题

摘要：面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。它...

Vicky 2019-08-30 15:43 评论0 收藏0