浏览器同源策略:从“源”到安全限制的全面解析

一、什么是"源"(Origin)?

在浏览器中,"源"是 Web 安全的核心概念。一个"源"由三部分组成

  1. 协议 (Protocol):如 http://https://ftp://

  2. 域名 (Host):如 www.example.com

  3. 端口 (Port):如 :80(HTTP 默认)、:443(HTTPS 默认)

示例

  • https://www.example.com:443https://www.example.com同源(端口隐式相同)。

  • http://blog.example.comhttps://www.example.com不同源(协议、子域名不同)。


二、同源与异源(Cross-Origin)的定义
  • 同源(Same Origin) :两个 URL 的协议、域名、端口完全一致

  • 异源(Cross-Origin):任意一部分不同即为异源。

判断示例

URL1 URL2 是否同源
https://a.com/index.html https://a.com/api ✅ 是
https://a.com:8080 https://a.com(浏览器默认端口443) ❌ 否
http://a.com https://a.com ❌ 否

三、同源策略(Same-Origin Policy)是什么?

同源策略是浏览器强制实施的安全机制,核心规则是:

默认禁止跨源脚本访问其他源的资源,除非明确授权。

设计目标

  1. 防止恶意网站窃取用户数据(如 Cookie)。

  2. 阻止跨站脚本攻击(XSS、CSRF)。


四、浏览器如何限制异源操作?

浏览器对跨源行为的限制体现在以下场景:

1. DOM 访问限制

规则:禁止通过 JavaScript 访问跨源页面的 DOM。

示例

javascript 复制代码
// 父页面尝试获取跨域 iframe 的内容
const iframe = document.getElementById('cross-origin-iframe');
const iframeDoc = iframe.contentWindow.document; // 抛出安全错误
2. 网络请求限制
  • AJAX/Fetch:默认禁止跨域请求(除非目标服务器返回 CORS 头)。

  • 错误提示

    复制代码
    Access to fetch at 'https://api.other.com' from origin 'https://www.example.com' 
    has been blocked by CORS policy.
3. 存储数据隔离
  • Cookie/LocalStorage:仅允许同源页面访问。

  • 示例https://malicious.com 无法读取 https://bank.com 的登录 Cookie。

4. 特殊资源的加载限制
  • 图片/音视频 :允许跨域加载,但通过 <canvas> 操作跨域图片会污染画布(tainted)。

  • 脚本/CSS:允许加载,但浏览器会隐藏跨域脚本的详细错误信息(避免信息泄露)。


五、跨源限制的例外与解决方案
1. CORS(跨源资源共享)
  • 原理 :服务器通过响应头(如 Access-Control-Allow-Origin: *)声明允许的源。

  • 适用场景:AJAX、Fetch 等复杂请求。

2. JSONP
  • 原理 :利用 <script> 标签的跨域特性,通过回调函数获取数据。

  • 缺点:仅支持 GET 请求,存在安全风险。

3. postMessage API
  • 用途:实现跨域 iframe 或窗口之间的安全通信。

  • 示例

    javascript

    复制

    复制代码
    // 父页面向跨域 iframe 发送消息
    iframe.contentWindow.postMessage('Hello', 'https://other.com');
4. 代理服务器
  • 原理:将跨域请求转发到同源的后端服务器,由服务器代为请求。

  • 适用场景:无法修改目标服务端 CORS 配置时。


六、为什么同源策略如此重要?
  1. 用户隐私保护:防止恶意网站窃取其他站点的用户会话(如银行 Cookie)。

  2. 数据完整性:阻止跨站请求伪造(CSRF)攻击。

  3. 安全沙盒:为每个源建立独立的运行环境,限制攻击面。


扩展阅读

相关推荐
BUG创建者5 分钟前
openlayer根据不同的状态显示不同的图层颜色
android·java·javascript
Pedantic19 分钟前
swift 日期与时间的三个结构体
前端
南方kenny19 分钟前
Mock.js:前端开发的假数据神器
前端·javascript
芹丸子20 分钟前
vue cli 创建项目一直失败
前端
Goboy20 分钟前
弹窗大战15年祭,零信任iOA的枪口,正对准哪吒的方向盘
安全·程序员·产品
鹏程十八少24 分钟前
6.android Vivo手机 指纹解锁动画 (附源码)
前端
AliciaIr24 分钟前
深入理解React Hook:useRef的底层机制与高级应用
前端·react.js
子林super24 分钟前
Linux下各种连接数配置及高并发Nginx优化
前端
Teamhelper_AR24 分钟前
AR眼镜:工业4.0时代高风险作业的安全守护者
安全·ar
Dream耀27 分钟前
CSS过渡 vs 动画:都有哪些技巧
前端·css