引言：一个看似矛盾的常见现象
"浏览器明明有严格的同源策略，为什么我们引用CDN上的jQuery、Bootstrap却从未遇到过跨域问题？"这个看似简单的现象背后，隐藏着浏览器安全模型的精妙设计。本文将带您深入理解这一机制，揭示CDN资源"豁免"同源策略的真正原因。
一、同源策略的本质与边界
1.1 同源策略的核心职责
同源策略(Same-Origin Policy)是浏览器最基本的安全机制，但它并非全面禁止所有跨域行为，而是有明确的管辖范围：
-
限制目标：阻止JavaScript跨域读取数据
-
不管辖范围：不阻止跨域请求的发送
-
三要素判定：协议(protocol)、域名(host)、端口(port)必须完全相同
// 示例：同源检查 const origin1 = new URL('example.com/page'); const origin2 = new URL('api.example.com/data'); console.log(origin1.origin === origin2.origin); // false (域名不同)
1.2 同源策略的实际限制场景
二、豁免机制：浏览器设计的"后门"
2.1 豁免标签列表与原理
浏览器为以下HTML标签默认开放跨域资源加载权限：
<!-- 全部可以跨域加载 -->
<script src="https://cdn.example/lib.js"></script>
<link rel="stylesheet" href="https://cdn.example/style.css">
<img src="https://cdn.example/logo.png">
<video src="https://cdn.example/video.mp4"></video>
设计考量：
-
历史兼容性：早期Web需要共享公共资源
-
内容安全假设：静态资源被视为"被动内容"
-
性能优化：允许并行加载第三方资源
2.2 豁免条件的深层逻辑
-
执行而非读取：浏览器直接处理资源内容，不暴露给页面JS
-
无数据泄露风险：图片/CSS等资源无法被JS直接提取原始数据
-
可控的副作用：脚本执行在独立作用域，不自动共享数据
三、CDN与CORS的关键区别
3.1 CORS的工作机制
3.2 CDN不需要CORS的原因
四、安全增强与特殊案例
4.1 子资源完整性(SRI)
<script src="https://cdn.example/lib.js"
integrity="sha384-xxxx"
crossorigin="anonymous"></script>
-
作用：验证CDN资源未被篡改
-
原理：对比哈希值
-
注意：使用SRI时需要添加
crossorigin属性
4.2 例外情况：Web字体
/* 需要CORS响应头 */
@font-face {
font-family: 'MyFont';
src: url('https://cdn.example/font.woff2') format('woff2');
}
限制原因：字体可能通过Canvas API被提取分析
五、面试深度回答指南
5.1 结构化回答框架
-
明确同源策略本质："同源策略限制的是JS代码读取跨域数据的能力，而非网络请求本身"
-
指出豁免机制："浏览器为
<script>、<img>等标签设计了豁免规则" -
关联CDN实现："CDN资源正是通过这些豁免标签引入"
-
对比CORS："CORS解决的是JS发起的跨域请求，与标签加载机制不同"
5.2 进阶知识点
-
历史演变：从
<script>跨域到JSONP，再到CORS -
安全扩展：Content Security Policy(CSP)的作用
-
性能影响：CDN分片域名对并行加载的优化
结语：理解设计哲学
CDN资源的跨域加载并非"漏洞"，而是浏览器精心设计的安全与功能平衡的典范。理解这一点，开发者才能：
-
正确评估跨域风险
-
合理设计资源加载策略
-
深入掌握浏览器安全模型
正如著名安全专家Adam Barth所说："好的安全策略应该像骨骼系统——提供支撑而不妨碍运动。"同源策略及其豁免机制正是这一理念的完美体现。
