一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。
同源策略是什么
同源策略：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。———— MDN官方
同源指的是三个部分：协议、域名、端口。如果三者有任何一个是不同的，那么就不是同源，访问是就是跨域了。
同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。
为何要有同源
- 同源指的是：协议，域名，端口相同，同源策略是一种安全协议。
- 举例说明：比如一个黑客程序，他利用
Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名和密码就轻松到手了。
如果没有同源策略SOP：
iframe里的机密信息被肆意读取- 更加肆意地进行
CSRF - 接口被第三方滥用
同源带来的限制
Cookie、LocalStorage和IndexDB无法获取。- 无法获取和操作
DOM。 - 不能发送
Ajax请求。我们要注意，Ajax只适合同源的通信。
本质上 同源策略 并不是禁止跨域请求，而是在请求后拦截了请求的回应。但是引用图片、css、js 文件等资源的时候就允许跨域。
所以同源的分两种情况
- 可以正常引用 iframe、图片等各种资源，但是限制对其内容进行操作
- 直接限制 ajax 请求，准确来说是限制操作 ajax 响应结果，这会引起 CSRF
如何绕过跨域
同源策略SOP 虽然让用户更安全，同时也会对程序员带来一定程度的麻烦，因为有时候业务上就是有跨域的需求。绕过跨域的方案由于篇幅所限，并且网上也很多相关文章，所以不在这里展开解决跨域的方案，只给出几个关键词：
对于 ajax
- 使用
JSONP - 后端进行
CORS配置 - 后端反向代理
- 使用
WebSocket
对于 iframe
- 使用
location.hash或window.name进行信息交流 - 使用
postMessage
同样策略与AJAX
对于 ajax 请求，在获得数据之后你能肆意进行 js 操作。这时候虽然同源策略会阻止响应，但依然会发出请求。因为执行响应拦截的是浏览器而不是后端程序。事实上你的请求已经发到服务器并返回了结果，但是迫于安全策略，浏览器不允许你继续进行 js 操作，所以报出跨域错误的信息： blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.。
所以再次注意一下，同源策略不能作为防范 CSRF 的方法。
不过可以防范 CSRF 的例外还是有的，浏览器并不是让所有请求都发送成功，上述情况仅限于简单请求。
更多详细的跨域会在另一篇文章中讲解。
