【安全系列之跨域】跨域解决方案

一、为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

二、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域，举几个例子：

三、非同源限制

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

四、跨域解决方法

跨域大致可以分为三种解决方案：

1. 服务端进行设置默认允许某些域名跨域访问
2. 从客户端入手想办法绕开同源安全策略
3. 使用代理服务器

不建议在前端利用什么 JSONP，iframe+domain 等来实现跨域请求，这种本质是绕过了欺骗了浏览器，起不到安全防护的作用。所以我们主要从服务端或者代理入手。
跨域请求究竟发出去没有？
跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么 Ajax 就不会?因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。

CORS

目前标准的跨域解决方案是CORS，CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。（有人容易将CORS和跨域划等号，其实他们一个是问题一个是解决方案）

它的实现则主要在服务端，它通过一些 HTTP Header 来限制可以访问的域，例如页面 A 需要访问 B 服务器上的数据，如果 B 服务器上声明了允许 A 的域名访问，那么从 A 到 B 的跨域请求就可以完成。对于那些会对服务器数据产生副作用的 HTTP 请求，浏览器会使用OPTIONS 方法发起 一个预检请求（preflight request），从而可以获知服务器端是否允许该跨域请求，服务器端确认允许后，才会发起实际的请求。在预检请求的返回中，服务器端也可以告知客户端是否需要身份认证信息。我们只需要设置响应头，即可进行跨域请求。主要是服务器端设置Access-Control-Allow-Origin头

*CORS 和前端没什么关系，但是标准的CORS请求不对cookies做任何事情，既不发送也不改变。想要传递cookie，需要客户端与服务端共同设置
1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin
2、带cookie跨域请求：前后端都需要进行设置，当需要传递cookie时，Access-Control-Allow-Origin 不能设置为 * 号，必须为具体的一个域名。同时，服务端需要设置 Access-Control-Allow-Credentials 为 true。表示服务端同意发送cookie。客户端需要设置Ajax请求属性withCredentials=true，让Ajax请求都带上Cookie
【前端设置】根据xhr.withCredentials字段判断是否带有cookie
①原生ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端设置是否带cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr