同源策略详解

简介

同源策略（Same-Origin Policy）是浏览器最重要的安全特性之一，它限制了一个源（origin）加载的文档或脚本如何与另一个源的资源进行交互。这是Web应用程序安全模型的基础，用于防止恶意文档窃取另一个源的敏感数据。

同源的定义

• 源的构成
  • 协议（scheme）: http、https等
  • 域名（domain）: www.example.com、api.example.com等
  • 端口（port）: 80、443、8080等
• 同源判断规则
  • 只有协议、域名、端口都相同才算同源
  • 例如: https://www.example.com:443 和 https://www.example.com 是同源
  • 例如: http://www.example.com 和 https://www.example.com 不是同源（协议不同）
  • 例如: www.example.com 和 api.example.com 不是同源（域名不同）
  • 例如: www.example.com:8080 和 www.example.com 不是同源（端口不同）

同源策略限制的行为

• Cookie、LocalStorage和IndexDB
  • 不同源之间无法读取对方的Cookie、LocalStorage和IndexDB
  • 但可以设置document.domain来实现子域间共享
• DOM访问
  • 不同源的页面无法通过JavaScript访问对方的DOM
  • 防止恶意网站窃取用户信息
• AJAX请求
  • 不同源的XMLHttpRequest和Fetch请求会被浏览器拦截
  • 这是防止CSRF攻击的重要机制

绕过同源策略的方法

• document.domain
  • 适用于主域相同但子域不同的情况
  • 两个页面都需要设置document.domain为相同的主域
  • 只能设置为当前域或其父域
• window.name
  • 利用window.name属性在不同页面间传递数据
  • window.name容量较大（约2MB）且不会被跨域限制
• location.hash
  • 通过URL的hash部分传递数据
  • 适用于单向通信
• postMessage
  • HTML5引入的跨文档通信API
  • 可以安全地在不同源的窗口间传递消息
  • 支持多种类型的窗口: iframe、window.open等

安全考虑

• 正确理解和应用同源策略
• 谨慎使用绕过同源策略的方法
• 使用CORS时要正确配置Access-Control-Allow-Origin
• 避免设置过于宽松的document.domain
• 对postMessage传递的数据进行验证