跨域的那些事
发表于 更新于 分类于 编程 本文字数： 652 阅读时长 ≈ 2 分钟
- 什么是跨域？
- 就是当前域访问了非本域的资源。对于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;">
- 通过在src里构造url，恶意请求目标域
- XSS跨站脚本(Cross-site scripting)注入，导致用户在信息泄露
- 一般是接受了用户构造的输入，输入里包含恶意脚本内容，内容未被转义，又输出在页面上，从而被执行
- 其他用户查看了该页面，注入的脚本被执行
- js直接读取浏览器的目标域的sessionid、cookie，伪造请求。
- 怎么限制跨域？浏览器的同源策略
- 禁止的
- DOM 同源策略： 不同源的dom之间不能相互操作，多个iframe的情况
- XMLHttpRequest 同源策略： 禁止请求不同源url
- Cookie、LocalStorage、IndexedDB 等存储性内容同源策略
- 允许的
- 页面中的链接，重定向以及表单提交
<script>、<img>、<link>这些包含 src 属性的标签可以加载跨域资源。（只能GET）
- 禁止的
- 限制跨域导致哪些不便？
- 前后端分离开发时，localhost不能正常访问后端资源
- 一些公共的api不能被访问
- https的页面的http的静态资源，不能加载
- 如何绕过同源策略？
- 浏览器启动参数（在用户端操作）
- 反向代理（在当前域操作）
- JSONP（在目标域操作）
- 利用
<script>允许跨域的特点，设置标签的src为目标域，动态生成需要的javascript内容
- 利用
- 跨源资源共享（CORS）（目标域操作）
- 设置相应的reponse header
1
2
3
4Access-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
- 设置相应的reponse header
- 参考