1

跨域的那些事

 1 year ago
source link: http://ponder.work/2023/08/15/cross-domain-things/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

跨域的那些事

2023-08-15编程

1.2k 2 分钟

  • 什么是跨域？
    • 就是当前域访问了非本域的资源。对于http来说，url代表资源，也就是访问了非本域的url。
  • 域的定义是啥？
    • 这里的域，也就是同源策略（Same-origin policy）中的源。
    • 如果两个 URL 的协议、端口和主机都相同的话，则这两个 URL 是同源的。
  • 为什么要限制跨域请求？
    • 导致目标域信息泄露
      • 如高仿淘宝站点，诱导登陆，获取用户密码。
      • js直接读取浏览器的目标域的sessionid、cookie
      • CSRF，如img标签的src会被访问
    • 导致当前域信息泄露
      • 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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK