JS跨域：window.postMessage + window.name +jsonp

最新推荐文章于 2024-09-11 07:57:51 发布
最新推荐文章于 2024-09-11 07:57:51 发布
阅读量909 收藏 1
点赞数

1.window.postMessage

(1)在发送数据窗口执行：otherWindow.postMessage(msg,targetOrigin)

  • otherWindow:表示接受数据的窗口的window对象，包括iframe的contentWindwohe和通过window.open打开的新窗口。
  • msg表示要发送的数据，包扩字符串和对象(ie9以下不支持，可以利用字符串和json互换)。
  • origin表示接收的域名。
(2)在接受的窗口监听window的message事件，回掉函数参数接受一个事件对象event，包括的属性有：

  • data：接受的数据
  • origin：发送端的域
  • source：发送端的DOMWindow对象
  • 例子
  • 1.在父框架页面index.html发送obj对象给远程服务器的wozien.com/test/b.html，该页面是通过iframe加载的，如下
  • [html]  view plain  copy
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <title>window.postMessage</title>  
    5.       
    6. </head>  
    7. <body>  
    8.     <iframe id="proxy" src="http://wozien.com/test/b.html" onload = "postMsg()" style="display: none" ></iframe>  
    9.   
    10.     <script type="text/javascript">  
    11.         var obj = {  
    12.             msg: 'this is come from client message!'  
    13.         }  
    14.   
    15.         function postMsg (){  
    16.             var iframe = document.getElementById('proxy');  
    17.             var win = iframe.contentWindow;  
    18.             win.postMessage(obj,'http://wozien.com');  
    19.         }  
    20.           
    21.     </script>  
    22. </body>  
    23. </html>  
    2.在远程页面b.html中监听message事件，先通过origin属性判断下数据来源的域是否可信任，加强安全措施。具体代码如下：
    [html]  view plain  copy
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <title></title>  
    5.     <script type="text/javascript">  
    6.         window.onmessage = function(e){  
    7.             if(e.origin !== 'http://localhost') return;  
    8.             console.log(e.origin+' '+e.data.msg);  
    9.         }  
    10.     </script>  
    11. </head>  
    12. <body>  
    13.     <p>this is my server</p>  
    14. </body>  
    15. </html>  

2.window.name

有三个页面：

    a.com/app.html：应用页面。
    a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。
    b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。

实现起来基本步骤如下：

    在应用页面（a.com/app.html）中创建一个iframe，把其src指向数据页面（b.com/data.html）。
    数据页面会把数据附加到这个iframe的window.name上，data.html代码如下：

?
1
2
3
4
<script type= "text/javascript" >
   window.name = 'I was there!' ;  // 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右
                    // 数据格式可以自定义，如json、字符串
</script>

    在应用页面（a.com/app.html）中监听iframe的onload事件，在此事件中设置这个iframe的src指向本地域的代理文件（代理文件和应用页面在同一域下，所以可以相互通信）。app.html部分代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type= "text/javascript" >
     var state = 0,
     iframe = document.createElement( 'iframe' ),
     loadfn = function () {
       if (state === 1) {
         var data = iframe.contentWindow.name;  // 读取数据
         alert(data);  //弹出'I was there!'
       } else if (state === 0) {
         state = 1;
         iframe.contentWindow.location = "http://a.com/proxy.html" ;  // 设置的代理文件
       }
     };
     iframe.src = 'http://b.com/data.html' ;
     if (iframe.attachEvent) {
       iframe.attachEvent( 'onload' , loadfn);
     } else {
       iframe.onload = loadfn;
     }
     document.body.appendChild(iframe);
   </script>

    获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）。

?
1
2
3
4
5
<script type= "text/javascript" >
     iframe.contentWindow.document.write( '' );
     iframe.contentWindow.close();
     document.body.removeChild(iframe);
   </script>

总结起来即：iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。有三个页面：

    a.com/app.html：应用页面。
    a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。
    b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。

实现起来基本步骤如下：

    在应用页面（a.com/app.html）中创建一个iframe，把其src指向数据页面（b.com/data.html）。
    数据页面会把数据附加到这个iframe的window.name上，data.html代码如下：

?
1
2
3
4
<script type= "text/javascript" >
   window.name = 'I was there!' ;  // 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右
                    // 数据格式可以自定义，如json、字符串
</script>

    在应用页面（a.com/app.html）中监听iframe的onload事件，在此事件中设置这个iframe的src指向本地域的代理文件（代理文件和应用页面在同一域下，所以可以相互通信）。app.html部分代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type= "text/javascript" >
     var state = 0,
     iframe = document.createElement( 'iframe' ),
     loadfn = function () {
       if (state === 1) {
         var data = iframe.contentWindow.name;  // 读取数据
         alert(data);  //弹出'I was there!'
       } else if (state === 0) {
         state = 1;
         iframe.contentWindow.location = "http://a.com/proxy.html" ;  // 设置的代理文件
       }
     };
     iframe.src = 'http://b.com/data.html' ;
     if (iframe.attachEvent) {
       iframe.attachEvent( 'onload' , loadfn);
     } else {
       iframe.onload = loadfn;
     }
     document.body.appendChild(iframe);
   </script>

    获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）。

?
1
2
3
4
5
<script type= "text/javascript" >
     iframe.contentWindow.document.write( '' );
     iframe.contentWindow.close();
     document.body.removeChild(iframe);
   </script>

总结起来即：iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

3.jsonp

JSONP具体实现

1.首先看下ajax中如果进行跨域请求会如何。 
前端代码在域www.practice.com下面，使用ajax发送了一个跨域的get请求

<!DOCTYPE html>
<html>
<head> <title>GoJSONP</title> </head> <body> <script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } </script> <script type="text/javascript" src="jquery-1.8.3.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type : "get", async: false, url : "http://www.practice-zhao.com/student.php?id=1", type: "json", success : function(data) { jsonhandle(data); } }); }); </script> </body> </html>

后端PHP代码放在域www.practice-zhao.com下，简单的输出一段json格式的数据

jsonhandle({
    "age" : 15, "name": "John", })

当访问前端代码http://www.practice.com/gojsonp/index.html 时 chrome报以下错误 
这里写图片描述
提示了不同源的URL禁止访问

2.下面使用JSONP，将前端代码中的ajax请求去掉，添加了一个script标签，标签的src指向了另一个域www.practice-zhao.com下的remote.js脚本

<!DOCTYPE html>
<html>
<head> <title>GoJSONP</title> </head> <body> <script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } </script> <script type="text/javascript" src="jquery-1.8.3.min.js"> </script> <script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script> </body> </html>

这里调用了跨域的remote.js脚本，remote.js代码如下：

jsonhandle({
    "age" : 15, "name": "John", })

也就是这段远程的js代码执行了上面定义的函数，弹出了提示框 
这里写图片描述

3.将前端代码再进行修改，代码如下：

<!DOCTYPE html>
<html>
<head> <title>GoJSONP</title> </head> <body> <script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } </script> <script type="text/javascript" src="jquery-1.8.3.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle"; var obj = $('<script><\/script>'); obj.attr("src",url); $("body").append(obj); }); </script> </body> </html>

这里动态的添加了一个script标签，src指向跨域的一个php脚本，并且将上面的js函数名作为callback参数传入，那么我们看下PHP代码怎么写的：

<?php
$data = array(
    'age' => 20, 'name' => '张三', ); $callback = $_GET['callback']; echo $callback."(".json_encode($data).")"; return;

PHP代码返回了一段JS语句，即

jsonhandle({
    "age" : 15, "name": "张三", })

此时访问页面时，动态添加了一个script标签，src指向PHP脚本，执行返回的JS代码，成功弹出提示框。 
所以JSONP将访问跨域请求变成了执行远程JS代码，服务端不再返回JSON格式的数据，而是返回了一段将JSON数据作为传入参数的函数执行代码。

4.最后jQuery提供了方便使用JSONP的方式，代码如下：

<!DOCTYPE html>
<html>
<head> <title>GoJSONP</title> </head> <body> <script type="text/javascript" src="jquery-1.8.3.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type : "get", async: false, url : "http://www.practice-zhao.com/student.php?id=1", dataType: "jsonp", jsonp:"callback", //请求php的参数名 jsonpCallback: "jsonhandle",//要执行的回调函数 success : function(data) { alert("age:" + data.age + "name:" + data.name); } }); }); </script> </body> </html>

HangMine
关注
黑客跨网站获取传输数据实现JavaScript 跨域方法：JSONP、CORS、window.name、document.domain、location.hash、window.postMessage
代码讲故事
03-06 135
黑客跨网站获取传输数据实现JavaScript 跨域方法：JSONP、CORS、window.name、document.domain、location.hash、window.postMessage。 跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。注意：有些浏览器不允许从HTTPS的域跨域访问HTTP，比如Chrome和Firefox，这些浏览器在请求还未发出的时候就会拦截请求，这是一个特例。
window.postMessage 详细讲解
热门推荐
The world has changed because of technology!
03-20 1万+
由于浏览器同源策略的限制，通常情况下，两个不同的页面，需要同时满足协议、端口、主机三者相同，才可以相互通信，否则就会出现跨域的情况。方法可以安全地实现跨源通信。它提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。（下期预告，在Iframe里使用window.postMessage）
记一次：iframe嵌套网页，利用window.postMessage()实现子父窗口相互传值
m0_37461510的博客
09-11 8969
文章已移动至此地址 **场景需要：** http://a.com -父页面，记做A http://b.com -子页面，记做B B生成的DOM，获取DOM的属性，传到A A监听事件，获取监听的属性，传到B ## 正文 ## 利用window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口...
Js实现2个浏览器窗口数据交互window.postMessage()方法
XiaoCheng_T的博客
03-25 5188
一、window.postMessage是什么？ 根据官方给定的理解如下: window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。 从广义上讲，一个窗
js窗口间通信--postMessage
bob_baobao的博客
03-28 1万+
why我们知道：浏览器限制不同窗口之间的通信，除非同一个域名下的网页。为了解决这一问题，HTML5新出了一个API window.postMessage, 实现了不同域名的窗口通信。 whatMDN上webAPI语法： otherWindow.postMessage(message, targetOrigin);otherWindow: 其他窗口的一个引用，比如iframe的conten
js中【postMessage】八大点解读+完整示例
最新发布
2301_79858914的博客
09-11 4794
是一个强大而灵活的 API，能够实现不同窗口、iframe、Web Worker 以及其他上下文之间的安全通信。虽然它简化了跨域通信的实现，但也带来了潜在的安全风险。使用时，必须注意确保消息的发送和接收过程都是可信的，尤其是要谨慎指定和验证消息来源的origin属性。
window.postMessage学习（问答式）
m0_37158404的博客
03-11 1279
答：可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面同源时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。答：在JavaScript中，同源（Same-Origin）是指两个页面的协议、域名和端口都相同。这是浏览器安全策略的一部分，用于限制不同源之间的交互，以防止潜在的安全风险。
JS跨域探索：JSONP、domain、window.name与postMessage方法详解
总结起来，JavaScript的跨域问题主要通过JSONP、`document.domain`、`window.name`以及`window.postMessage`这几种方式来解决。开发者需要根据具体需求选择合适的跨域策略，确保在安全性和性能之间找到平衡。在实际...
跨域问题 之 window.name
05-24
在实际项目中，可能还会结合其他跨域解决方案，如CORS（跨源资源共享）、POSTMessage、JSONP等，来提高兼容性和安全性。 提供的两个HTML文件`demo_windowname.html`和`proxy.html`可能是用来演示`window.name`跨域...
PHP下ajax跨域的解决方案之window.name实例分析
12-20
3. **POSTMessage API**：通过`window.postMessage()`方法在不同源的窗口之间发送消息。安全，但需要双方协作。 选择哪种跨域解决方案取决于项目需求、安全性考虑以及对浏览器兼容性的要求。在实际开发中，通常会...
全面解读跨域技术：CORS、JSONP、postMessage实战示例
根据提供的文件信息，本篇将详细介绍跨域（CORS）、JSONP、postMessage、websocket、document.domain、window.name、iframe等技术知识点及其在Web开发中的应用。 **跨域资源共享（CORS）** 跨域资源共享（CORS）是...
js_window.postMessage往不同窗口里面发送数据
weixin_30362083的博客
07-15 435
一个页面通过iframe引入另外一个页面，页面之间如何通讯？两个页面就存在两个window，存在跨域。父子页面可以通过window.postMessage进行通讯。 1、子页面使用window.postMessage通讯； 2、父页面使用window.addEventListener("message", receiveMessage, false);实时接收子页面的数据。 ...
利用window.postMessage()实现跨域消息传递（JavaScript）
qq_32458791的博客
05-06 1886
说明 window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。 通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。...
window.postMessage的使用
韩旭不会敲代码吧的博客
06-03 3350
window.postMessage的使用
JavaScript高级语法之跨域（postMessage，CORS，JSONP）
上善若泪
05-08 3819
目录 1 postMessage概述 1.1 iframe与主页面的通信 2 CORS 2.1 发送请求，“预检”机制 2.2 收到响应 3 JSONP 1 postMessage概述 所谓“同域限制”指的是，出于安全考虑，浏览器只允许脚本与同样协议、同样端口、同样域名的地址进行通信。比如，www1.example.com页面上面的脚本，只能与该域名（相同协议、相同端口）进行通信，...
html中写js post,用HTML5里的window.postMessage在两个网页间传递数据
weixin_35753431的博客
06-02 285
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。数据发送端首...
window.name 结合postMessage api 实现跨域
xiongzhengxiang的专栏
07-30 935
html5 postMessage实现跨域 postMessage是html5的一个新功能，可以实现不同域名之间的通信，通过给postMessage方式发送数据，监听则通过在父子窗口添加onmessage事件进行。 缺点也就很明显了，只有支持html5的浏览器才支持这种跨域方式，像IE6、7当然就拒之门外了！
使用window.name和postMessage实现js跨域
冷月宫主的专栏
04-10 1056
js的跨域问题，老生长谈了。最近使用的比较多，于是整理了下。 一、js跨域的限制：      到底什么样的情况才属于跨域呢？下图给出所有的跨域情况。根据浏览器同源策略，为了安全起见，在跨域的情况下是不允许数据传递和交互的。 二、使用window.name解决跨域问题     怿飞写过这个话题的博客： http://www.planabc.net/2008/09/01/windo
js：window消息监听
Monkey
07-01 2863
在日常开发中，经常出现在新开tab页操作完毕后，发送消息更新其他页面的数据。 在此记录一下，以作参考 发送消息 window.postMessage({ action : 'refresh' // action : 自定义动作参数，用于接受收消息是的判断 }, '*'); /* 注意：根据发送消息页面，自行判断是否使用 window.parent */ 接收消息 window.addEventListener('message',function(e){ // 可通过e对象，自行获取相关参
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值