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

一、什么是“源”(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。

示例

 

// 父页面尝试获取跨域 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. 特殊资源的加载限制
  • 图片/音视频:允许跨域加载,但通过 操作跨域图片会污染画布(tainted)。

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


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

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

2. JSONP
  • 原理:利用

你可能感兴趣的:(安全,前端,vue.js,javascript)