浏览器同源策略及跨域的解决方法

什么是浏览器同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，若是缺乏了同源策略，则浏览器的正常功能可能都会受到影响。能够说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被容许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

所谓同源是指：域名、协议、端口相同。

下表是相对于 http://www.laixiangran.cn/home/index.html 的同源检测结果：

另外，同源策略又分为如下两种：

1. DOM 同源策略：禁止对不一样源页面 DOM 进行操做。这里主要场景是 iframe 跨域的状况，不一样域名的 iframe 是限制互相访问的。
2. XMLHttpRequest 同源策略：禁止使用 XHR 对象向不一样源的服务器地址发起 HTTP 请求。

为何要有跨域限制

由于存在浏览器同源策略，因此才会有跨域问题。那么浏览器是出于何种缘由会有跨域的限制呢。其实不难想到，跨域限制主要的目的就是为了用户的上网安全。

若是浏览器没有同源策略，会存在什么样的安全问题呢。下面从 DOM 同源策略和 XMLHttpRequest 同源策略来举例说明：

若是没有 DOM 同源策略，也就是说不一样域的 iframe 之间能够相互访问，那么黑客能够这样进行攻击：

1. 作一个假网站，里面用 iframe 嵌套一个银行网站 http://mybank.com。
2. 把 iframe 宽高啥的调整到页面所有，这样用户进来除了域名，别的部分和银行的网站没有任何差异。
3. 这时若是用户输入帐号密码，咱们的主网站能够跨域访问到 http://mybank.com 的 dom 节点，就能够拿到用户的帐户密码了。

若是没有 XMLHttpRequest 同源策略，那么黑客能够进行 CSRF（跨站请求伪造） 攻击：

1. 用户登陆了本身的银行页面 http://mybank.com，http://mybank.com 向用户的 cookie 中添加用户标识。
2. 用户浏览了恶意页面 http://evil.com，执行了页面中的恶意 AJAX 请求代码。
3. http://evil.com 向 http://mybank.com 发起 AJAX HTTP 请求，请求会默认把 http://mybank.com 对应 cookie 也同时发送过去。
4. 银行页面从发送的 cookie 中提取用户标识，验证用户无误，response 中返回请求数据。此时数据就泄露了。
5. 并且因为 Ajax 在后台执行，用户没法感知这一过程。

所以，有了浏览器同源策略，咱们才能更安全的上网。

跨域的解决方法

从上面咱们了解到了浏览器同源策略的做用，也正是有了跨域限制，才使咱们能安全的上网。可是在实际中，有时候咱们须要突破这样的限制，所以下面将介绍几种跨域的解决方法。

CORS（跨域资源共享）

CORS（Cross-origin resource sharing，跨域资源共享）是一个 W3C 标准，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，仍是应该失败。

CORS 须要浏览器和服务器同时支持。目前，全部浏览器都支持该功能，IE 浏览器不能低于 IE10。

整个 CORS 通讯过程，都是浏览器自动完成，不须要用户参与。对于开发者来讲，CORS 通讯与同源的 AJAX 通讯没有差异，代码彻底同样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感受。

所以，实现 CORS 通讯的关键是服务器。只要服务器实现了 CORS 接口，就能够跨源通讯。

浏览器将CORS请求分红两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时知足如下两大条件，就属于简单请求。

1. 请求方法是如下三种方法之一：

• HEAD
• GET
• POST

2. HTTP的头信息不超出如下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不一样时知足上面两个条件，就属于非简单请求。

浏览器对这两种请求的处理，是不同的。

简单请求

1. 在请求中须要附加一个额外的 Origin 头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应。例如：Origin: http://www.laixiangran.cn
2. 若是服务器认为这个请求能够接受，就在 Access-Control-Allow-Origin 头部中回发相同的源信息（若是是公共资源，能够回发 * ）。例如：Access-Control-Allow-Origin：http://www.laixiangran.cn
3. 没有这个头部或者有这个头部但源信息不匹配，浏览器就会驳回请求。正常状况下，浏览器会处理请求。注意，请求和响应都不包含 cookie 信息。
4. 若是须要包含 cookie 信息，ajax 请求须要设置 xhr 的属性 withCredentials 为 true，服务器须要设置响应头部 Access-Control-Allow-Credentials: true。

非简单请求

浏览器在发送真正的请求以前，会先发送一个 Preflight 请求给服务器，这种请求使用 OPTIONS 方法，发送下列头部：

• Origin：与简单的请求相同。
• Access-Control-Request-Method: 请求自身使用的方法。
• Access-Control-Request-Headers: （可选）自定义的头部信息，多个头部以逗号分隔。

例如：

Origin: http://www.laixiangran.cn
Access-Control-Request-Method: POST
Access-Control-Request-Headers: NCZ
复制代码

发送这个请求后，服务器能够决定是否容许这种类型的请求。服务器经过在响应中发送以下头部与浏览器进行沟通：

• Access-Control-Allow-Origin：与简单的请求相同。
• Access-Control-Allow-Methods: 容许的方法，多个方法以逗号分隔。
• Access-Control-Allow-Headers: 容许的头部，多个方法以逗号分隔。
• Access-Control-Max-Age: 应该将这个 Preflight 请求缓存多长时间（以秒表示）。

例如：

Access-Control-Allow-Origin: http://www.laixiangran.cn
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: NCZ
Access-Control-Max-Age: 1728000
复制代码

一旦服务器经过 Preflight 请求容许该请求以后，之后每次浏览器正常的 CORS 请求，就都跟简单请求同样了。

优势

• CORS 通讯与同源的 AJAX 通讯没有差异，代码彻底同样，容易维护。
• 支持全部类型的 HTTP 请求。

缺点

• 存在兼容性问题，特别是 IE10 如下的浏览器。
• 第一次发送非简单请求时会多一次请求。

JSONP 跨域

因为 script 标签不受浏览器同源策略的影响，容许跨域引用资源。所以能够经过动态建立 script 标签，而后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理。

直接经过下面的例子来讲明 JSONP 实现跨域的流程：

// 1. 定义一个 回调函数 handleResponse 用来接收返回的数据
function handleResponse(data) {
    console.log(data);
};

// 2. 动态建立一个 script 标签，而且告诉后端回调函数名叫 handleResponse
var body = document.getElementsByTagName('body')[0];
var script = document.gerElement('script');
script.src = 'http://www.laixiangran.cn/json?callback=handleResponse';
body.appendChild(script);

// 3. 经过 script.src 请求 `http://www.laixiangran.cn/json?callback=handleResponse`，
// 4. 后端可以识别这样的 URL 格式并处理该请求，而后返回 handleResponse({"name": "laixiangran"}) 给浏览器
// 5. 浏览器在接收到 handleResponse({"name": "laixiangran"}) 以后当即执行 ，也就是执行 handleResponse 方法，得到后端返回的数据，这样就完成一次跨域请求了。
复制代码

优势

• 使用简便，没有兼容性问题，目前最流行的一种跨域方法。

缺点

• 只支持 GET 请求。
• 因为是从其它域中加载代码执行，所以若是其余域不安全，极可能会在响应中夹带一些恶意代码。
• 要肯定 JSONP 请求是否失败并不容易。虽然 HTML5 给 script 标签新增了一个 onerror 事件处理程序，可是存在兼容性问题。

图像 Ping 跨域

因为 img 标签不受浏览器同源策略的影响，容许跨域引用资源。所以能够经过 img 标签的 src 属性进行跨域，这也就是图像 Ping 跨域的基本原理。

直接经过下面的例子来讲明图像 Ping 实现跨域的流程：

var img = new Image();

// 经过 onload 及 onerror 事件能够知道响应是何时接收到的，可是不能获取响应文本
img.onload = img.onerror = function() {
    console.log("Done!");
}

// 请求数据经过查询字符串形式发送
img.src = 'http://www.laixiangran.cn/test?name=laixiangran';
复制代码

优势

• 用于实现跟踪用户点击页面或动态广告曝光次数有较大的优点。

缺点

• 只支持 GET 请求。
• 只能浏览器与服务器的单向通讯，由于浏览器不能访问服务器的响应文本。

服务器代理

浏览器有跨域限制，可是服务器不存在跨域问题，因此能够由服务器请求全部域的资源再返回给客户端。

服务器代理是万能的。

document.domain 跨域

对于主域名相同，而子域名不一样的状况，可使用 document.domain 来跨域。这种方式很是适用于 iframe 跨域的状况。

好比，有一个页面，它的地址是 http://www.laixiangran.cn/a.html，在这个页面里面有一个 iframe，它的 src 是 http://laixiangran.cn/b.html。很显然，这个页面与它里面的 iframe 框架是不一样域的，因此咱们是没法经过在页面中书写 js 代码来获取 iframe 中的东西的。

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

例如，在页面 http://www.laixiangran.cn/a.html 中设置document.domain：

<iframe src="http://laixiangran.cn/b.html" id="myIframe" onload="test()">
<script> document.domain = 'laixiangran.cn'; // 设置成主域 function test() { console.log(document.getElementById('myIframe').contentWindow); } </script>
复制代码

在页面 http://laixiangran.cn/b.html 中也设置 document.domain，并且这也是必须的，虽然这个文档的 domain 就是 laixiangran.cn，可是仍是必须显式地设置 document.domain 的值：

<script> document.domain = 'laixiangran.cn'; // document.domain 设置成与主页面相同 </script>
复制代码

这样，http://www.laixiangran.cn/a.html 就能够经过 js 访问到 http://laixiangran.cn/b.html 中的各类属性和对象了。

window.name 跨域

window 对象有个 name 属性，该属性有个特征：即在一个窗口（window）的生命周期内，窗口载入的全部的页面（不论是相同域的页面仍是不一样域的页面）都是共享一个 window.name 的，每一个页面对 window.name 都有读写的权限，window.name 是持久存在一个窗口载入过的全部页面中的，并不会因新页面的载入而进行重置。

经过下面的例子介绍如何经过 window.name 来跨域获取数据的。

页面 http://www.laixiangran.cn/a.html 的代码：

<iframe src="http://laixiangran.cn/b.html" id="myIframe" onload="test()" style="display: none;">
<script> // 2. iframe载入 "http://laixiangran.cn/b.html 页面后会执行该函数 function test() { var iframe = document.getElementById('myIframe'); // 重置 iframe 的 onload 事件程序， // 此时通过后面代码重置 src 以后， // http://www.laixiangran.cn/a.html 页面与该 iframe 在同一个源了，能够相互访问了 iframe.onload = function() { var data = iframe.contentWindow.name; // 4. 获取 iframe 里的 window.name console.log(data); // hello world! }; // 3. 重置一个与 http://www.laixiangran.cn/a.html 页面同源的页面 iframe.src = 'http://www.laixiangran.cn/c.html'; } </script>
复制代码

页面 http://laixiangran.cn/b.html 的代码：

<script type="text/javascript"> // 1. 给当前的 window.name 设置一个 http://www.laixiangran.cn/a.html 页面想要获得的数据值  window.name = "hello world!"; </script>
复制代码

location.hash 跨域

location.hash 方式跨域，是子框架修改父框架 src 的 hash 值，经过这个属性进行传递数据，且更改 hash 值，页面不会刷新。可是传递的数据的字节数是有限的。

页面 http://www.laixiangran.cn/a.html 的代码：

<iframe src="http://laixiangran.cn/b.html" id="myIframe" onload="test()" style="display: none;">
<script> // 2. iframe载入 "http://laixiangran.cn/b.html 页面后会执行该函数 function test() { // 3. 获取经过 http://laixiangran.cn/b.html 页面设置 hash 值 var data = window.location.hash; console.log(data); } </script>
复制代码

页面 http://laixiangran.cn/b.html 的代码：

<script type="text/javascript"> // 1. 设置父页面的 hash 值 parent.location.hash = "world"; </script>
复制代码

postMessage 跨域

window.postMessage(message，targetOrigin) 方法是 HTML5 新引进的特性，可使用它来向其它的 window 对象发送消息，不管这个 window 对象是属于同源或不一样源。这个应该就是之后解决 dom 跨域通用方法了。

调用 postMessage 方法的 window 对象是指要接收消息的那一个 window 对象，该方法的第一个参数 message 为要发送的消息，类型只能为字符串；第二个参数 targetOrigin 用来限定接收消息的那个 window 对象所在的域，若是不想限定域，可使用通配符 *。

须要接收消息的 window 对象，但是经过监听自身的 message 事件来获取传过来的消息，消息内容储存在该事件对象的 data 属性中。

页面 http://www.laixiangran.cn/a.html 的代码：

<iframe src="http://laixiangran.cn/b.html" id="myIframe" onload="test()" style="display: none;">
<script> // 1. iframe载入 "http://laixiangran.cn/b.html 页面后会执行该函数 function test() { // 2. 获取 http://laixiangran.cn/b.html 页面的 window 对象， // 而后经过 postMessage 向 http://laixiangran.cn/b.html 页面发送消息 var iframe = document.getElementById('myIframe'); var win = iframe.contentWindow; win.postMessage('我是来自 http://www.laixiangran.cn/a.html 页面的消息', '*'); } </script>
复制代码

页面 http://laixiangran.cn/b.html 的代码：

<script type="text/javascript"> // 注册 message 事件用来接收消息 window.onmessage = function(e) { e = e || event; // 获取事件对象 console.log(e.data); // 经过 data 属性获得发送来的消息 } </script>
复制代码

参考资料

• js中几种实用的跨域方法原理详解
• 跨域的那些事儿
• 跨域资源共享 CORS 详解

---

转载请注明出处，谢谢！