关于同源策略的一些见解

注:本文仅供学习参考

同源策略的定义
同源策略(Same Origin Policy)是一种约定，它是浏览器最核心最基本的安全功能。所谓的同源是指域名、协议、端口相同。不同源的客户端脚本在没有明确授权的情况下是不允许读写其他网站的资源

为什么要设置同源策略呢？
如果没有同源策略,那么a.com加载过的js,能够在未加载过这个脚本的b.com上的页面随意执行并被读取(cookie等敏感信息)，是十分危险的。

就好像A网站是一家银行，用户登录以后，又去浏览其他的网站，如果其他网站可以读取A网站的Cookie,会发生什么？很显然，如果Cookie包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是Cookie往往用来保存用于的登录状态，如果用户没有退出登录，其他网站就可以冒充用户为所欲为，因为浏览器同时还规定，提交表单不受同源策略的限制。

由此可见，同源策略是必须的。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

什么是cookie?

Cookies是由网络服务器发送出来以存储在网络浏览器上，便于下次同一访客又访问该网络服务器所使用的信息。
Cookies最典型的应用是判定注册用户是否已经登录网站，用户可能会得到提示，是否在下一次进入此网站时保留用户信息以便简化登录手续，这些都是Cookies的功用。
另一个重要应用场合是“购物车”之类的应用。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品，这些信息都会写入Cookies，以便在最后付款时提取信息。
Cookies可以保持登录信息到用户下次与服务器的会话，还有一些Cookie在用户退出会话的时候就被删除了，这样可以有效保护个人隐私。

同源策略会限制以下几种行为

1.cookie、LocalStorage和IndexDB无法读取
2.DOM和js对象无法获取
3.AJAX请求不能发送

如何绕过同源策略叫做跨域

1. 资源跳转： A链接、重定向、表单提交
2. 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3. 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

跨域解决方案
JSONP(JSON with padding)
HTML 中 script，img标签这样获取资源的标签是没有跨域限制的，比如我们经常引入一个其他域下线上cdn的jQuery。
实现：JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行。提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。
缺点：JSONP只能发GET请求，因为本质上script加载资源就是GET

CORS
CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。
实现：当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该响应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。
普通跨域请求只需要服务端设置Access-Control-Allow-Origin即可，前端无须设置；若要带cookie请求：前后端都需要设置。

但是这两项技术也引起了CSRF漏洞。jsonp利用script标签的src属性不受同源策略影响的特性。

暂时总结到这,有点乱见解一下。