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

时间 2019-11-12

原文原文链接

什么是浏览器同源策略

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

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

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

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

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

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

为何要有跨域限制

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

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

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

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

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

用户登陆了本身的银行页面 http://mybank.com，http://mybank.com 向用户的 cookie 中添加用户标识。
用户浏览了恶意页面 http://evil.com，执行了页面中的恶意 AJAX 请求代码。
http://evil.com 向 http://mybank.com 发起 AJAX HTTP 请求，请求会默认把 http://mybank.com 对应 cookie 也同时发送过去。
银行页面从发送的 cookie 中提取用户标识，验证用户无误，response 中返回请求数据。此时数据就泄露了。
并且因为 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）。

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

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

HEAD
GET
POST

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

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

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

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

简单请求

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

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

什么是浏览器同源策略

为何要有跨域限制

跨域的解决方法

CORS（跨域资源共享）

简单请求

非简单请求

优势

缺点

JSONP 跨域

优势

缺点

图像 Ping 跨域

优势

缺点

服务器代理

document.domain 跨域

window.name 跨域

location.hash 跨域

postMessage 跨域

参考资料