Html5 postMessage实现跨域消息传递


Posted in HTML / CSS onMarch 11, 2016

一、同源策略

    要理解跨域,我们首先要知道什么是同源策略。百度百科上这样定义同源策略:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

    何谓同源:如果两个URL的域名、协议、端口相同,则表示他们同源。

    浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。 (白帽子讲web安全[1])。根据这个策略,a.com域名下的JavaScript无法跨域操作b.com域名下的对象。比如,baidu.com域名下的页面中包含的JavaScript代码,不能访问google.com域名下的页面内容。

    JavaScript必须严格遵循浏览器的同源策略,包括Ajax(事实上,Ajax也是由JavaScript组成)。通过XMLHttpRequest对象实现的Ajax请求,不能向不同的域提交,比如,在abc.test.com下的页面,不能向def.test.com提交Ajax请求。运用了同源策略之后,用户就能确保自己正在查看的页面确实来自于正在浏览的域。

    同源策略在现实应用中是十分重要的。假设攻击者利用Iframe把真正的银行登录页面嵌到他的页面上,当用户使用真实的用户名、密码登录时,该页面就可以通过JavaScript读取到用户表单中的内容,这样用户名和密码信息就被泄漏了。

    在浏览器中,<script>、<link>、<img>、<iframe>等标签都可以加载跨域资源,不受同源策略限制,但是通过src加载的资源,浏览器限制了javascript的权限,不能进行各种的读写。从而,即使请求发了,敏感数据回来了,也是取不到的。

二、postMessage实现跨域

   语法:window.postMessage(msg,targetOrigin)

    window: 指目标窗口,可能是window.frames属性的成员或者由window.open方法创建的窗口

    message:要发送的消息,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果

    targetOrigin:“目标域“,包括:协议、主机名、端口号。若指定为”*“,则表示可以传递给任意窗口,指定为”/“,则表示和当前窗口的同源窗口。

    获取postMessage传来的消息:为页面添加onmessage事件

XML/HTML Code复制内容到剪贴板
  1. window.addEventListener('message',function(e) {   
  2.        
  3. }  

    onmessage事件接受一个参数e,它是一个event对象。

    e的几个重要属性:

      1、data:postMessage传递过来的msg

      2、发送消息的窗口对象

      3、origin:发送消息窗口的源(协议+主机+端口号)

     来写一个简单的demo:

     http://source.com/source.html用来发送数据:

XML/HTML Code复制内容到剪贴板
  1. <iframe id="iframe" src="http://target.com/target.html"></iframe>  
  2. <input id="msg" type="text" placeholder="请输入要发送的消息">  
  3. <button id="send">发送</button>  
  4.   
JavaScript Code复制内容到剪贴板
  1. window.onload =function() {   
  2.     document.getElementById('send').onclick = function() {   
  3.     var msg = document.getElementById('msg').value;   
  4.     var iframeWindow = document.getElementById('iframe').contentWindow;   
  5.     iframeWindow.postMessage(msg,"http://target.com/target.html");   
  6.     }   
  7. }   

     http://target.com/target.html用来接收数据: 

XML/HTML Code复制内容到剪贴板
  1. <div>  
  2.    <h2>target.html,以下是接收到的消息:</h2>  
  3.     <section id="msg">  
  4.            
  5.     </section>  
  6. </div>  
JavaScript Code复制内容到剪贴板
  1. window.onload = function() {   
  2.   
  3.     if(window.addEventListener){   
  4.         window.addEventListener("message", handleMessage, false);   
  5.     }   
  6.     else{   
  7.         window.attachEvent("onmessage", handleMessage);   
  8.     }     
  9.   
  10.     function handleMessage(event) {   
  11.         event = event || window.event;   
  12.   
  13.         if(event.origin === 'http://source.com') {   
  14.             document.getElementById('msg').innerHTML = event.data;   
  15.         }   
  16.     }   
  17. }   
  18.   

    运行结果如下:

 Html5 postMessage实现跨域消息传递

   点击发送按钮的时候,target.html将会受到发送的消息。

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/MarcoHan/p/5245519.html

HTML / CSS 相关文章推荐
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 #HTML / CSS
HTML5如何实现元素拖拽
Mar 11 #HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 #HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 #HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 #HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 #HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 #HTML / CSS
You might like
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php学习之运算符相关概念
2011/06/09 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python实现计算器功能
2019/10/31 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
市场营销专业毕业生自荐信
2013/11/02 职场文书
小学家长学校培训材料
2014/08/24 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
先进集体申报材料
2014/12/25 职场文书
写给医生的感谢信
2015/01/22 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python