跨域（一）

最近几天学习跨域，记录一下。

跨域只是针对浏览器和服务器之间。跨域的原因是因为同源策略。

同源策略：是浏览器的一种安全策略，目前所有的浏览器都采用同源策略。浏览器限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻止恶意文档，减少可能被攻击的媒介。

同源策略又分为两种：
DOM同源策略：禁止对不同源页面的DOM进行操作。主要是针对iframe跨域情况，不同域名的iframe限制互相访问。
XMLHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起请求。

都说同源是为了防止攻击，保护用户的安全。那么如果不采用同源策略，会出现那些安全问题呢？同源策略解决了那些安全问题讷？根据上面两种不同的同源策略：

如果没有DOM同源策略（不同域的iframe可以互相访问）：
1.做一个假网站，里面用ifr
ame嵌套银行网站 http://chbank.com。
2.把iframe宽高调整到全部页面，这样页面出了域名不同，其余的全部和银行网站相同。
3.用户登陆这个页面，假网站跨域访问银行http://chbank.com的DOM节点，拿到用户的账号密码。

如果没有XMLHttpRequest同源策略：
1.用户登录银行 http://chbank.com， http://chbank.com向用户的cookie添加用户标识，浏览器保存这个cookie。
2.用户浏览恶意网站http://heike.com 执行了页面中的AJAX请求
3.http://heike.com向http://chbank.com发起AJAX HTTP请求，此时将浏览器中 http://chbank.com的cookie同时发送。
4.http://chbank.com提取cookie中的用户标识，判定为用户，response请求中返回数据，数据被黑客获取。

那么何为同源呢？同源是针对URL(统一资源定位符)而言的。如果两个URL的协议+域名+端口号相同，则判定为同源。譬如一个URL为http://AAAA.com:01/CC/DD/EE

https://AAAA.com:01/CC/DD/EE 非同源 协议不同
https://AAAA.com:02/CC/DD/EE 非同源 端口不同
https://QQQQ.com:02/CC/DD/EE 非同源 域名不同
http://AAAA.com:01/FF 同源 路径不同
http://AAAA.com:01//CC/TT 同源 路径不同

如果判断是非同源，共有三种行为受到限制：
Cookie、LocalStorage 和 IndexDB 无法读取
DOM 无法获得
AJAX 请求不能发送
可以发现，此三种行为正是上文不采用同源策略可能引发安全问题的操作。

非同源的情况下，浏览器会允许部分操作不收同源策略的约束。比如：

跨域写操作：一般被允许，如链接，重定向以及表单提交(from提交)
跨域资源嵌套：
<img src = xxx>
<link href=XXX>
<script src=XXX>
简单总结：浏览器自己是可以发起跨域请求的（比如a标签，img标签，from表单提交），但是JS不能去跨域获取资源（如ajax）

实现跨域的方式主要有以下几种
1.CORS
2.JSONP
3.服务端转发跨域（如njinx反向代理）

1.CORS是在HTTP头部中添加信息，使服务器和浏览器进行沟通，决定响应的成功或者失败。
2.上面说到有三个标签是允许跨域加载资源的，JSONP就是使用< script > 标签没有跨域限制，网页可以从其他源动态的产生JSON数据，JSONP请求一定需要对方的服务器做支持才可以。
3.同源策略是浏览器所遵循的，而服务器却不需要。所以跨域是浏览器和服务端之间的，但是服务器和服务器之间是没有跨域的。在浏览器和目标服务器之间增加一个代理服务器，让代理服务器和目标服务器交互，然后返回资源。

同源策略是在浏览器端的，跨域并不是请求发不出去。而是请求可以正常发送，并且服务器端处理这个请求并返回正常结果，但是返回的结果被浏览器拦截了。跨域是阻止一个域下的用户读取另一个域下的资源，是拦截读取，而不是发送。所以说跨域并不能完全的阻止CSRF，因为请求是发送到服务器上了。