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

一、什么是"源"(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. 安全沙盒:为每个源建立独立的运行环境,限制攻击面。


扩展阅读

相关推荐
独行soc2 分钟前
2025年渗透测试面试题总结-某步在线面试(题目+回答)
linux·网络·安全·web安全·面试·职场和发展·渗透安全
蓑笠翁00113 分钟前
Python异步编程入门:从同步到异步的思维转变
linux·前端·python
hie988941 小时前
如何配置 Java 安全管理器来避免访问控制异常
java·python·安全
芯盾时代1 小时前
RSAC 2025观察:零信任+AI=网络安全新范式
人工智能·安全·web安全·网络安全
☞无能盖世♛逞何英雄☜2 小时前
文件包含漏洞
安全·web安全
程序员小杰@2 小时前
✨WordToCard使用分享✨
前端·人工智能·开源·云计算
Ftrans2 小时前
【分享】解锁文件摆渡系统新玩法:虚拟目录助力企业效率提升
大数据·安全
larntin20022 小时前
vue2开发者sass预处理注意
前端·css·sass
Enti7c2 小时前
利用jQuery 实现多选标签下拉框,提升表单交互体验
前端·交互·jquery
Yungoal2 小时前
Wireshark抓账号密码
网络协议·安全·ssl