Html5 postMessage完成跨域信息传送

日期:2021-01-20 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

1、同宗对策

    要了解跨域,大家最先要了解甚么是同宗对策。百度搜索百科上这样界定同宗对策:同宗对策(Same origin policy)是1种承诺,它是访问器最关键也最基础的安全性作用,假如缺乏了同宗对策,则访问器的一切正常作用将会都会遭受危害。能够说Web是搭建在同宗对策基本之上的,访问器只是对于同宗对策的1种完成。

    什么叫同宗:假如两个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恳求。应用了同宗对策以后,客户就可以保证自身正在查询的网页页面的确来自于正在访问的域。

    同宗对策在实际运用中是10分关键的。假定进攻者运用Iframe把真实的金融机构登陆网页页面嵌到他的网页页面上,当客户应用真正的客户名、登陆密码登陆时,该网页页面便可以根据JavaScript载入到客户表单中的內容,这样客户名和登陆密码信息内容就被泄露了。

    在访问器中,<script>、<link>、<img>、<iframe>等标识都可以以载入跨域資源,不会受到同宗对策限定,可是根据src载入的資源,访问器限定了javascript的管理权限,不可以开展各种各样的读写能力。从而,即便恳求发了,比较敏感数据信息回家了,也是取不到的。

2、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恶性事件接纳1个主要参数e,它是1个event目标。

    e的几个关键特性:

      1、data:postMessage传送过来的msg

      2、推送信息的对话框目标

      3、origin:推送信息对话框的源(协议书+主机+端口号号)

     来写1个简易的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.   

    运作結果以下:

 

   点一下推送按钮的情况下,target.html可能遭受推送的信息。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。

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