跨域

Posted on

定义

一般情况下，当且仅当执行脚本的页面使用相同的协议（通常都是 http）、相同的端口（http默认使用80端口）和相同的 host（两个页面的 document.domain 的值相同）时，才允许不同页面上的脚本互相访问。只要协议、域名、端口有任何一个不通，都被当做为不同域。JavaScript跨域指通过JS在不同域之间进行数据传输或通讯。

JSONP跨域

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
在JS中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，JSONP正是利用这个特性来实现的。
利用 script 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料。 用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

1
2
3
4
5
<?php
$callback = $_GET['callback'];
$data = array('a','b','c');
echo $callback.'('.json_encode($data).')';
?>

所以通过http://example.com/data.php?callback=dosomething 得到的js文件，就是我们之前定义的dosomething函数,并且它的参数就是我们需要的json数据，这样我们就跨域获得了我们需要的数据。

1
2
3
4
5
6
7
<script src='http://example.com/data.php?callback=dosomething'><script>
<script>
function dosomething(jsondata){
}
</script>
// dosomething(['a','b','c']);

通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

1
2
3
4
5
<script>
$.getJSON(‘http://example.com/data.php?callback=?',function(jsondata){
});
</script>

jquery.ajax不需要手动的插入script标签以及定义回掉函数。jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。

document.domain跨子域

浏览器中不同域的框架之间是不能进行js的交互操作的，获得一个无用的window对象。
例如：http://www.example.com/a.html ， 在这个页面里面有一个iframe，它的src是http://example.com/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：

1
2
3
4
5
6
7
<iframe id=‘iframe’ src='http://example.com/b.html' onload=‘onload()’></iframe>
<script>
var iframe = document.getElementById(‘iframe’);
var win = iframe.contentWindow;  //获取到
var doc = win.document;  //获取不到
var name = win.name;     //获取不到
</script>

我们只要把http://www.example.com/a.html 和 http://example.com/b.html 这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。

1
2
3
4
5
6
7
8
<iframe id=‘iframe’ src='http://example.com/b.html' onload=‘onload()’></iframe>
<script>
document.domain = ‘example.com’;
var iframe = document.getElementById(‘iframe’);
var win = iframe.contentWindow;  //获取到
var doc = win.document;  //获到了
var name = win.name;     //获到了
</script>

window.name 跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

1
2
3
4
5
6
7
8
9
10
11
<script>
window.name = ‘i from a’;
setTimeout(function(){
     window.location = ‘b.html'
},3000);
</script>
<script>
console.log(window.name);
// i from a
</script>

window.postMessage

调用 window.postMessage时,将分发一个MessageEvent事件到目标窗口, 在所有挂起必须执行的脚本完成后. (例如：当一个事件处理程序调用window.postMessage时,仍剩余事件处理程序, 先前的挂起等待超时等)。MessageEvent 有消息类型，它被设置为第一个参数值提供给window.postMessage的data属性， 对应的window调用window.postMessage的时候，window.postMessage主文档的来源的origin属性被称为源属性，指哪个调用window.postMessage的窗口。 (事件的其他标准属性都存在与对应的预期值。)

语法:

1
otherWindow.postMessage(message, targetOrigin);

发送：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var popup = window.open(...popup details...);
// When the popup has fully loaded, if not blocked by a popup blocker:
// This does nothing, assuming the window hasn't changed its location.
popup.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");
// This will successfully queue a message to be sent to the popup, assuming
// the window hasn't changed its location.
popup.postMessage("hello there!", "http://example.org");
function receiveMessage(event)
{
  // Do we trust the sender of this message?  (might be
  // different from what we originally opened, for example).
  if (event.origin !== "http://example.org")
    return;
  // event.source is popup
  // event.data is "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);

监听：

1
2
3
4
5
6
7
8
9
10
11
12
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
  // For Chrome, the origin property is in the event.originalEvent
  // object.
  var origin = event.origin || event.originalEvent.origin;
  if (event.origin !== "http://example.org:8080")
    return;
  // ...
}