跨域分为广义跨域和狭义跨域
广义跨域：一个域下的文档或脚本试图去请求另一个域下的资源；
广义跨域可以分为以下几种：
1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等
狭义跨域：我们通常所说的跨域是指狭义跨域，也就是同源策咯限制下的跨域，[同源策略:即同协议，同域名，同端口号下，脚本页面可以互相访问数据]，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。
同源策略限制以下几点内容：
1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送
所以受同源策略的限制，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。
跨域的几种方法：
（一）通过jsonp跨域
JSONP的原理：（举例：a.com/jsonp.html想得到b.com/main.js中的数据）在a.com的jsonp.html里创建一个回调函数xxx，动态添加<script>元素，向服务器发送请求，请求地址后面加上查询字符串，通过callback参数指定回调函数的名字。请求地址为http://b.com/main.js?callback=xxx。在main.js中调用这个回调函数xxx，并且以JSON数据形式作为参数传递，完成回调。
原生js写法：
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调执行函数
function onBack(res) {
alert(JSON.stringify(res));
}
</script>
JQuery写法：
$.ajax({
url: 'http://www.domain2.com:8080/login',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "onBack", // 自定义回调函数名
data: {}
});
jsonp方法的缺点：
1. 使用这种方法，只要是个网站都可以拿到b.com里的数据，存在安全性问题。
2. 只能是GET，不能POST。
3. 可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题。
（二）通过websocket进行跨域
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，本身不受同源策略的限制，是server push技术的一种很好的实现。
WebSocket是一种在单个TCP连接上进行全双工通讯的协议。
像发起AJAX请求一样，发起WebSocket请求需要借助浏览器提供的WebSocket对象，该对象提供了用于创建和管理WebSocket连接，以及通过该连接收发数据的API。所有的浏览器都默认提供了WebSocket对象。让我们看看该对象的用法：
和使用XHRHttpRequest对象一样，我们首先要实例化一个WebSocket对象：
var ws = new WebSocket("wss://echo.websocket.org")
传入的参数为响应WebSocket请求的地址。
同样类似AJAX的是，WebSocket对象也有一个readyState属性，用来表示对象实例当前所处的链接状态，有四个值：
0：表示正在连接中（CONNECTING）；
1：表示连接成功，可以通信（OPEN）；
2：表示连接正在关闭（CLOSING）；
3：表示连接已经关闭或打开连接失败（CLOSED）；
我们可以通过判断这个值来执行我们相应的代码。
除此之外，WebSocket对象还提供给我们一系列事件属性，使我们控制连接过程中的通信行为：
onopen：用于指定连接成功后的回调函数；
onclose：用于指定连接关闭后的回调函数；
onmessage：用于指定收到服务器数据后的回调函数；
onerror：用于指定报错时的回调函数；
通过.send()方法，我们拥有了向服务器发送数据的能力（WebSocket还允许我们发送二进制数据）：
ws.send('Hi, server!')
如何知道何时我们的数据发送完毕呢？我们需要使用WebSocket对象的bufferedAmount属性，该属性的返回值表示了还有多少字节的二进制数据没有发送出去，所以我们可以通过判断该值是否为0而确定数据是否发送结束。
var data = new ArrayBuffer(1000000)
ws.send(data)
if (socket.bufferedAmount === 0) {
// 发送完毕
} else {
// 还在发送
}
（三）CORS跨域
CORS是一种W3C标准，全称“跨域资源共享”，也就是说它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
如果在b.com里面添加响应头声明允许a.com的访问，代码：
Access-Control-Allow-Origin: http://a.com
然后a.com就可以用ajax获取b.com里的数据了。
（四）postMessage
以上这些跨域技术都只适用于客户端请求异域服务端资源的情景。而除此之外，有时候我们还需要在异域的两个客户端之间共享数据，例如页面与内嵌iframe窗口通讯，页面与新打开异域页面通讯。
这就是使用HTML5提供的新API -- postMessage的时候了。
使用postMessage技术实现跨域的原理非常简单，一方面，主窗口通过postMessageAPI向异域的窗口发送数据，另一方面我们在异域的页面脚本中始终监听message事件，当获取主窗口数据时处理数据或者以同样的方式返回数据从而实现跨窗口的异域通讯。
让我们用具体的业务场景与代码进一步说明，假如我们的页面现在有两个窗口，窗口1命名为“window_1”， 窗口2命名为“window_2”，当然，窗口1与窗口2的“域”是不同的，我们的需求是由窗口1向窗口2发送数据，而当窗口2接收到数据时，将数据再返回给窗口1。先让我们看看窗口1script标签内的代码：
// window_1 域名为 http://winodow1.com:8080
window.postMessage("Hi, How are you!", "http://window2.com:8080")
可以看到，postMessage函数接收两个参数，第一个为要发送的信息（可以是任何JavaScript类型数据，但部分浏览器只支持字符串格式），第二个为信息发送的目标地址。让我们再看看窗口2script标签内的代码：
// window_2 域名为 http://window2.com:8080
window.addEventListener("message", receiveMessage, false)
function receiveMessage(event) {
// 对于Chorme，origin属性为originalEvent.origin属性
var origin = event.origin || event.originalEvent.origin
if (origin !== "http://window1.com:8080") {
return
}
window.postMessage("I'm ok", "http://window1.com:8080")
}
看到了吗，我们在window上绑定了一个事件监听函数，监听message事件。一旦我们接收到其他域通过postMessage发送的信息，就会触发我们的receiveMessage回调函数。该函数会首先检查发送信息的域是否是我们想要的，如果验证成功则会像窗口1发送一条消息。
如何鉴别发送至页面的信息呢？答案是通过 message事件监听函数的事件对象，我们称它为event，该对象有三个属性：
data：值为其他window传递过来的对象；
origin：值为消息发送方窗口的域名；
source：值为对发送消息的窗口对象的引用；
很显然的，我们应该着重检测event对象的origin属性，建立一个白名单对origin属性进行检测通常是一个明智的做法。
网友评论