FE.B-明白浏览器的同源战略与跨域计划

2023年9月16日 163次阅读 来源: seasonley

同源

观点：协定，域名，端口 雷同。
目标：保证用户信息的平安，防备歹意的网站盗取数据。
限定的行动：

  • Cookie、LocalStorage 和 IndexDB 没法读取。
  • DOM 没法取得。
  • AJAX 要求不能发送。

跨域

  1. 资本跳转： A链接、重定向、表单提交
  2. 资本嵌入： <link>、<script>、<img>、<frame>等dom标签，另有款式中background:url()、@font-face()等文件外链
  3. 剧本要求： js提议的ajax要求、dom和js对象的跨域操纵等

解决计划

  • 场景：

    • 两个网页一级域名雷同，二级域名差别，须要同享 Cookie
    • iframe窗口和window.open的窗口，须要与父窗口通讯。

  • 计划：

    • 浏览器设置一级域名。document.domain = 'example.com';
    • 服务器设置一级域名。Set-Cookie: key=value; domain=.example.com; path=/
    • MessageChannel

  • 场景：

    • 完整差别源的网站，须要窗口通讯

  • 计划：

    • 父子窗口（相互）写location.hash,（相互）监听hashchange
    • 子窗口写window.name后跳回同域,父窗口读window.name
    • 浏览器跨文档通讯 window.postMessage

  • 场景：

    • AJAX要求非同源地址

  • 计划：

    • 架设服务器代办
    • JSONP
    • WebSocket
    • CORS

参考资料
浏览器同源政策及其躲避要领 – 阮一峰
前端罕见跨域解决计划（全）
跨域几种体式格局

    原文作者：seasonley
    原文地址: https://segmentfault.com/a/1190000017465414
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞