跨域的那些事

什么是跨域？
- 就是当前域访问了非本域的资源。对于http来说，url代表资源，也就是访问了非本域的url。
域的定义是啥？
- 这里的域，也就是同源策略（Same-origin policy）中的源。
- 如果两个 URL 的协议、端口和主机都相同的话，则这两个 URL 是同源的。
- 当前域：当前网页的域；目标域：访问的资源所在的域
为什么要限制跨域请求？信息泄露
- js直接读取浏览器的目标域的sessionid、cookie，伪造请求。
  - 比如，当前站点是恶意站点，它用js请求银行站点，盗取信息。
- CSRF，如img标签的src会被访问，利用受害者已认证的身份，在不知情的情况下向受害者认证的站点发起恶意请求。
  - 通过在src里构造url，恶意请求目标域
    1
    2
    <img src="https://bank.com/transfer?amount=1000&to=attackerAccount"
    style="display:none;">
- XSS跨站脚本(Cross-site scripting)注入，导致用户在信息泄露
  - 一般是接受了用户构造的输入，输入里包含恶意脚本内容，内容未被转义，又输出在页面上，从而被执行
  - 其他用户查看了该页面，注入的脚本被执行
怎么限制跨域？浏览器的同源策略
- 禁止的
  - DOM 同源策略：不同源的dom之间不能相互操作，多个iframe的情况
  - XMLHttpRequest 同源策略：禁止请求不同源url
  - Cookie、LocalStorage、IndexedDB 等存储性内容同源策略
- 允许的
  - 页面中的链接，重定向以及表单提交
  - <script>、<img>、<link>这些包含 src 属性的标签可以加载跨域资源。（只能GET）
限制跨域导致哪些不便？
- 前后端分离开发时，localhost不能正常访问后端资源
- 一些公共的api不能被访问
- https的页面的http的静态资源，不能加载

如何绕过同源策略？

浏览器启动参数（在用户端操作）
反向代理（在当前域操作）
JSONP（在目标域操作）
- 利用<script>允许跨域的特点，设置标签的src为目标域，动态生成需要的javascript内容

跨源资源共享（CORS）（目标域操作）

设置相应的reponse header

Access-Control-Allow-Origin: https://foo.example  // 所允许的来源域
Access-Control-Allow-Methods: POST, GET, OPTIONS   // 所允许的请求方法
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type  // 所允许的请求header
Access-Control-Max-Age: 86400

参考