Skip to content

Latest commit

 

History

History
42 lines (29 loc) · 2.52 KB

32.同源策略-XMLHttpRequest为什么不能跨域请求.md

File metadata and controls

42 lines (29 loc) · 2.52 KB

32 | 同源策略：为什么XMLHttpRequest不能跨域请求资源？

Web页面安全、浏览器网络安全、浏览器系统安全

Web世界假设没有安全

  • 打开一个银行站点，然后打开恶意站点，恶意站点可以有以下操作：
    1. 修改银行站点的CSSOM，DOM等信息
    2. 在银行站点内部插入JS脚本
    3. 劫持用户登录的用户名和密码
    4. 读取银行站点的Cookie，IndexDB等数据
    5. 将上述信息上传自家服务器，然后伪造交易记录或者转账请求等信息

同源策略(same-origin policy)出现

  • 同源：两个URL协议、域名、端口相同
  • 浏览器默认两个相同源可以互相访问资源和操作DOM
  • 主要表现在DOM，Web数据和网络三个层面
    1. DOM：同源策略限制了不同源的JS脚本对当前DOM对象读写操作，可以在第一个源中操作第二个页面的DOM
    2. 数据层面：同源策略限制了不同源站点读取当前站点的Cookie，IndexDB，不同源下依然无法通过opener获取相关数据内容
    3. 网络层 XMLHttpRequest等请求方式同源策略拒绝
  • 安全和便利性的权衡
  • CSP(Content Security Policy)内容安全策略
    • 为解决XSS攻击引入，核心思想让服务器决定浏览器可以加载的资源，同时让服务器决定浏览器是否能执行内联JS代码，减少XSS攻击
  • 经典攻击：XSS攻击， CSRF攻击
    • 页面可以嵌入第三方资源
    • 跨域资源共享和跨文档消息机制
      • 跨域资源共享(CORS):可以让页面跨域访问控制，使跨域数据传输安全进行
      • 页面不同源的情况下需要两个不同源DOM进行通信，浏览器引入跨文档消息机制。通过window.postMessage的JS API和不同源DOM进行通信

summary

  • 同源策略隔离不同源的DOM，页面数据和网络通信，确保网络的安全性，然而安全和便利性不可兼得，要绝对的安全必然会牺牲便利性，所以找到了一个平衡点进行权衡，二者共同做出让步，也就是页面安全策略的模型，如下特征
    1. 页面可以引用第三方资源，但是XSS安全问题也随之而来。所以在开放的基础上引入CSP内容安全策略。
    2. 使用XMLHttpRequest和Fetch等都无法直接进行跨域请求，所以在严格策略的基础上引入CORS(access-control-allow-origin: *最挫做法)引入跨站资源共享策略
    3. 不同源DOM无法进行操作，浏览器之后有引入了跨文档消息机制，通过window.postMessage等通信机制让文档进行通信