关于浏览器跨域访问（同源策略）

1. what

跨域是指从一个域名的网页去访问另外一个域名的网页。一个完整URL地址一般由 协议+主机+端口+路径[+hash或search] 组成，其中hash和search是可选项、协议未列出则默认为http、port未列出则默认为80值。所以严格来讲，两个网页地址的协议（http/https）、主机、端口三者任何一个不一样就能够认为是跨域访问，即便两个地址是不一样子域名也是跨域，如app.baidu.com与baidu.com。

 浏览器出于安全考虑会限制跨域访问（即同源策略）。在该限制下，除非两个网页是来自于同一‘源头’， 不然不容许一个网页的JavaScript访问另一个网页的内容，像Cookie，DOM，LocalStorage均禁止访问；但对具备src属性的标签（如script、img、iframe等）不作跨域限制。

 

2. why

浏览器出于安全考虑会限制跨域访问，若不加限制则在一个站点上访问后本地存储的cookie等信息在访问第二个站点时就可能泄露了。（从这可见，跨域限制只是在经过浏览器访问时才存在，所以经过HTTP客户端等访问显然没有跨域限制问题）

没有同源限制时的危害示例：

在浏览器上先登陆股票网站www.stock.com，获得了cookie，之后再访问stock时浏览器会自动带上cookie；接着访问恶意网站www.beautify.com，假定该网站页面中包含一个恶意js脚本，其行为是去访问stock并把获得的信息发到beautify网站，因为访问stock时浏览器会自动带上cookie故恶意脚本能够成功窃取到数据。示意图以下：

 

上述过程就是跨站请求伪造（Cross-site request forgery，CSRF）的一种例子，所幸在有浏览器同源策略的限制下上述状况不会发生。

所以，浏览器同源策略的做用是防止跨站请求伪造。

3. 如何克服同源限制

浏览器的同源限制是种伤敌一千自损八百的作法，如对于一个大系统来讲有不少域名是正常的，同源限制使得同一系统内的不一样域名下的服务没法互相访问。

要突破浏览器跨域访问的限制，本质上有三种方法：

1. 只须要让不一样地址对浏览器来讲是同源的便可。如能够经过反向代理把须要互相访问的地址放到反向代理后，这样对浏览器来讲就是同源的了。参考：经过Nginx反向代理实现跨域访问-cnblogs
2. 绕过：JSONP。浏览器对具备src属性的标签（如script、img、iframe等）不作跨域限制，利用这些来实现跨域（即 jsonp）。原理：在页面append一个script标签，标签地址为被跨域访问站点地址，并在地址上加入自定义的回调函数名参数，如?callback=myCallbackFunction，这里的"callback"能够为其余，应事先商定好；被跨域站点的响应逻辑：若未检查到"callback"参数则直接返回data，不然将data做为回调函数名的参数一块儿返回，即 myCallbackFunction( data )；浏览器script加载完后会执行myCallbackFunction函数，所以能够在myCallbackFunction里对请求返回的data进行处理。参考：跨域与跨域访问-csdn
   
3. 协议支持：W3C标准中的跨域资源共享（Cross-Origin Resource Sharing，CORS）。它容许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制（在实现上借助了 Access-Control-Allow-Origin 等header来与服务端协商）。在先后端分离的场景下二者独立部署，常借助此来实现前端跨域访问后端。内部原理详见：跨域资源共享-阮一峰

注：

JSONP、CORS须要目标站点的配合（JSONP须要服务端代码调用回调函数、CORS须要服务端配置容许的origin的白名单），不然没法实现，第一种则不须要；

AJAX已封装支持了JSONP功能，但此时其和传统意义上的AJAX请求是不同的，本质上是不一样东西：ajax的核心是经过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。更多参考：jsonp原理

 CORS与JSONP的使用目的相同，可是比JSONP更强大。JSONP只支持GET请求，CORS支持全部类型的HTTP请求。JSONP的优点在于支持老式浏览器，以及能够向不支持CORS的网站请求数据。

 

思考：上一节中所述危害是以没有同源限制为前提的，现实是浏览器都作了严格的同源限制，故该状况不会发生。然而在有同源限制下，咱们仍可利用法2实现一个盗取用户信息的恶意脚本：

一、脚本干的事为读取当前所在用户站点的cookie等信息，并发送到脚本制做者的站点；

二、发送涉及到跨域，因为是“本身人”，能够选择jsonp解决跨域；

三、弄个恶意连接诱导用户点击，从而将恶意脚本加载到用户站点，因为浏览器加载完script后就好执行，故done。

上述过程其实就是跨站脚本攻击（Cross-Site Scripting，XSS）的一种例子，经过XSS获取到认证信息后就自热而然地能够用认证信息进行CSRF了。

 

4. 进阶

浏览器的同源策略用来确保在浏览器内对后端发起访问的前端是可信赖的前端。除了依靠浏览器源限制外，后端服务还能够根据所收到请求的origin字段来限制白名单（origin字段由浏览器自动加入HTTP header，用户没法经过编程方式如javascript修改；固然，经过中间人攻击仍是能够修改的，此时可用HTTPS或wss防范）。

目前，对于新兴的WebSocket协议（2008年诞生，2011年成为国际标准，目前全部浏览器都已支持），浏览器未作同源限制。所以应用要注意防范CSRF攻击，可借助token或上述的origin等方式防范。

 

参考资料：https://mp.weixin.qq.com/s?__biz=MzAxOTc0NzExNg==&mid=2665515571&idx=1&sn=0d0b7dea7f77e8f1844b366f1af9667f&chksm=80d67270b7a1fb66d93bae6cb36eabb52671ca9c4fcfcbd4b99a0f97477ea3d7f7ef87f086f3&mpshare=1&scene=1&srcid=0109bYD1q1hsbFIQCxtnMkrl&pass_ticket=N%2FHYzFttFxeBta6EX3SWLSsk8wIuqheCKE1kM4bs7LtE5NuawTt0V7zXvLe2iFMS#rd