什么是同源策略？

同源策略是浏览器的安全机制，限制跨域交互以防止数据泄露。

前端安全 中等 浏览器机制 安全 浏览器

同源策略（Same-Origin Policy）是由浏览器强制执行的底层安全机制，用于限制从一个源（source）加载的文档或脚本与另一个源的资源进行交互，以防止恶意网站窃取用户数据或进行跨站点攻击。源被定义为协议（例如 HTTP、HTTPS）、域名（如 example.com）和端口（默认端口如 80 或 8080）的组合，只有当这些三项全部相同时才被视为同源。

同源的判断标准

源完全相同的条件如下：

  • 相同协议（Protocol）：如均使用 HTTP 或均使用 HTTPS。
  • 相同域名（Domain）：包括主域名和子域名（如 www.example.com 和 blog.example.com 即为不同源）。
  • 相同端口（Port）：标准端口可以隐性省略（如 HTTP 默认使用 80 端口，HTTPS 使用 443 端口）。 示例差异比较： 
    http://example.com:80 ⏐ http://example.com:8080  // 端口不同，跨域
http://example.com    ⏐ https://example.com       // 协议不同，跨域
https://sub.example.com ⏐ https://example.com      // 域名不同，跨域

主要限制行为

同源策略主要通过以下方式确保安全性:

  1. Cookie、LocalStorage、SessionStorage 和 IndexedDB：脚本无法访问其他源的客户端存储数据。
  2. DOM 操作：无法读取或修改其他源页面的 DOM 结构或元素。
  3. HTTP 请求（如 AJAX / XMLHttpRequest / Fetch）：默认无法向非同源服务器发送或接收资源响应。
  4. 事件绑定和脚本访问：限制不同源页面间 JavaScript 函数调用或事件监听。

目的和重要性

引入同源策略的核心目的是保护用户数据安全和隐私:

  • 防范恶意攻击：例如防止跨站点脚本攻击（XSS）、数据泄露。
  • 确保隔离性：避免页面资源被恶意修改或窃取。
  • 作为基础安全机制，它是实现跨域解决方案（如 CORS、JSONP）的前提。