理解同源（Same-Origin Policy）和跨域(CORS)

写在前面

本文作为我这几天阅读相关文章的一个小结。

什么是浏览器的同源策略？

同源策略是浏览器的一种为了保护用户信息安全而制订的安全策略。

为什么要有同源保护？

既然是一种安全策略，那肯定是没有它的时候，会有安全问题，也就是说，没有它 = 不安全，有它 = 有了基本的安全保障，下面为了解释没有同源保护存在时可能出现的安全问题，先解释cookie。

什么是cookie？

学习web开发的朋友，或者cs从业人员肯定都知道cookie这个东西的存在。简单来说，它是用户的一个会员卡，就好像在现实生活中，去超市（超市网站）买东西（访问超市网站）出示的是超市折扣卡（超市网站的cookie）， 去理发店理发出示的是理发卡（理发网站的cookie），这是cookie的基本概念，第二个问题就是cookie怎么出示？每一次你访问一个使用cookie的网站并且同意了cookie使用后，你使用的浏览器会保存这个网站给你设置的cookie，等你再次访问相应的网站的时候，浏览器会帮你附上相应的cookie。

解决了什么安全问题？（一个简单的例子）

情景（以下推演基于浏览器没有实现同源策略的假设）：

1. 你今天登陆你的银行去查询信息。
2. 银行网站说他们开始使用cookie了，你要不要同意？
3. 你寻思银行的提议应该是安全的，于是点了同意。
4. 点击同意之后，银行网站的服务器发现你同意了使用cookie的提议。
5. 银行网站的服务器给你发送属于你的专属cookie。
6. 浏览器接收到cookie，缓存在你的电脑里面，也就是cookie现在在本地了（你的电脑里）。
7. 此时你觉得无事可做，在浏览器上新开了一个tab（页面），并且访问一个论坛，准备看看帖子。
8. 论坛被植入了很多广告，你在无意中不小心点到了一个广告，在这里称呼这个广告为广告A。
9. 浏览器不知道你是不是有意点的还是无意点的，它只知道，ok刚才界面上发现了一个点击事件，现在我要对这个地址发送请求。于是浏览器开始发送请求。
10. 广告A的服务器，收到了你这边发送的请求，邪恶开始了，广告A的编写人员是一个坏人，他早就在服务器这边准备好了一份恶意满满的js脚本等待别人的请求。此时你的请求发过来，服务器接收到后就把 imreallybad.js 附在response里面并发送给你。来看看服务器返回来的 imreallybad.js里面是什么内容呢？很简单，它打开了一个AJAX请求，然后用 ajax.open()方法打开你之前打开的银行界面，用 GET方法，并且设置携带cookie，等请求成功后，把response返回到坏人写的服务器里面。
11. 你的浏览器成功收到回复 status：200绿灯，因为假设浏览器没有同源策略！浏览器不管不顾就直接跑了imreallybad.js，这时具体发生了什么？假设你用的是Chrome，Chrome的v8引擎在执行到发送那一行的时候，它附上银行在第5步发送给你的专属cookie并且发送给银行网站服务器。
12. 银行网站在收到这个请求后，发现附带了cookie，检查一番后觉得有道理，没问题。就把你的个人信息，存款数额，等等返回了过去。
13. 由于整个过程都在imreallybad.js脚本里面执行，整个过程对你来说，像是什么都没发生，你依然在这个论坛看这贴，也丝毫没把点击这个广告网站的事情当回事！但是坏人早就成功通过使用你的cookie获得了你银行账户的私人信息！

是不是很恐怖！

是的。

需不需要同源政策！

需要。

同源策略是如何解决以上潜在危险的？

很简单：浏览器在以上过程的第11步，引入了同源策略的概念，也就是收到服务器返回的答复后，浏览器不急着跑返回的js脚本，浏览器会先检测加载返回的js脚本的页面，是不是和你现在在的页面同源，那么什么是同源呢？对于任何一个域，都一定由三部分构成。

1. 协议名称
2. 域名
3. 端口号
   用 https://www.baidu.com来举个例子，
4. https://就是协议名。
5. www.baidu.com就是域名
6. 80是web的默认端口，因为是默认的，所以一般大家上网都不用再去输入www.baidu.com