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

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


扩展阅读

相关推荐
IT、木易20 分钟前
大白话html第十章前沿的网页开发技术
前端·html
bin91531 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)示例3: 行选择
前端·javascript·vue.js·ecmascript·deepseek
浙江赛思电子科技有限公司3 小时前
从小米汽车召回看智驾“命门”:智能化时代 — 时间就是安全
人工智能·安全·自动驾驶·汽车·视觉检测·边缘计算·信息与通信
Hacker_xingchen3 小时前
网络安全需要学多久才能入门?
网络·安全·web安全
@HNUSTer9 小时前
基于 HTML、CSS 和 JavaScript 的五子棋游戏
前端·javascript·css·游戏·html
百锦再9 小时前
Vue核心知识:动态路由实现完整方案
前端·javascript·vue.js·前端框架·vue·路由·动态
上线之叁9 小时前
26-小迪安全-模块引用,mvc框架,渲染,数据联动0-rce安全
安全
aloha_10 小时前
江口村青年爱心基金会管理制度 - 暂定
前端
拉不动的猪10 小时前
刷刷题24
前端·javascript·面试
GISer_Jing10 小时前
【数据结构】二叉树总结篇
javascript·数据结构