[TOC]

同源策略

定义

浏览器规定，如果JS运行在源A里，那么就只能获取源A的数据，不能获取源B的数据，即不允许跨域访问。
所谓”同源”指的是”三个相同”

  • 协议相同
  • 域名相同
  • 端口相同

与 URL [http://store.company.com/dir/page.html](http://store.company.com/dir/page.html) 的源进行对比的示例:

URL 结果 原因
[http://store.company.com/dir2/other.html](http://store.company.com/dir2/other.html) 同源 只有路径不同
[http://store.company.com/dir/inner/another.html](http://store.company.com/dir/inner/another.html) 同源 只有路径不同
[https://store.company.com/secure.html](https://store.company.com/secure.html) 不同源 协议不同
[http://store.company.com:81/dir/etc.html](http://store.company.com:81/dir/etc.html) 不同源 端口不同 (默认端口是80)
[http://news.company.com/dir/other.html](http://news.company.com/dir/other.html) 不同源 主机不同

目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

我们以QQ空间为例，假设一下没有同源策略会发生什么。
你像平常每一天那样用Cookie登录了源为https://user.qzone.qq.com的QQ空间，AJAX请求了 /friends.json 获取你的好友列表显示给你，到目前为止都很正常。
但是黑客来了，他假装成你的一个好友给你分享了一个神似QQ空间的链接https://qzone-qq.com，你没有注意这是一个钓鱼网站毫无防备的就点开了它，这个网页也请求了QQ空间的好友列表https://user.qzone.qq.com/friends.json，没有同源策略的情况下，他就成功的把你的好友列表偷走了。
如果 Cookie 包含隐私，这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。
由此可见，”同源政策”是必需的，如果没有同源策略，浏览器完全就是一个病毒，你登录的任何信息都有可能被其他人盗取。

问题的根源

产生这个问题的根源就是浏览器无法区分发送者，QQ空间页面里的JS和黑客网站里的JS除了referer有区别以外，发的请求几乎没有区别，如果后台开发者没有检查referer,那么就完全没有区别，所以没有同源策略，任何页面都能盗走QQ空间的数据。
那检查referer不就好了？
安全链条的强度取决与最弱的一环，万一这个网站的后端开发工程师没有检查referer，那么数据不就被盗走了，所以浏览器应该主动预防这种偷数据的行为，最后浏览器为了用户隐私，设置了严格的同源策略。

怎么实现跨域

CORS

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

因为浏览器默认不同源之间不能互相访问数据，但是qq.com和tang.com都是我的网站，如果我想让两个网站实现互相访问，应该怎么做呢？
就像进别人家要先告知主人，主人让进才可以，浏览器也是一样，如果想要共享数据，就要提前声明，qq.com需要先在响应头里写tang.com可以访问。

Access-Control-Allow-Origin:http://tang.com

还可以通过referer读取它来自哪个网站

console.log(request.headers['referer'])

CORS分为简单请求和复杂请求，具体用法看文档

JSONP

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，支持IE6、7、8、9。

它的基本思想是，网页通过添加一个