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

上一篇：手机微信H5小手机游戏在商业服务营销推广中的关 返回下一篇：没有了