前端面试题宝典

CDN跨域魔术：为什么你的资源请求能"偷渡"同源策略？

简介：90%前端答错的面试题，3个底层原理让你彻底看透浏览器安全边界！
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~
hello大家好，我是Range。
“同源策略”，相信前端er都知道，这是浏览器里一个非常重要的基础安全机制（对于非浏览器这样的终端，就没有这样的限制，比如native APP）。“CDN”，大部分同学也应该听说过，甚至已经实际用过。今天我们就来看看，CDN为什么能够绕过浏览器的同源策略限制。
下面是正文部分。

🌐 CDN跨域魔术：为什么你的资源请求能"偷渡"同源策略？

前端面试中，同源策略是必考题，但CDN资源为何能无视它？90%的候选人答错关键点

作为前端工程师，你是否曾在面试中被问：“浏览器有同源策略，为什么CDN资源不受影响？” 这问题看似基础，却直指你对浏览器安全机制本质的理解深度。本文带你彻底拆解这个高频考点！

🔍 一、同源策略的管辖范围：它究竟防什么？

核心原理：同源策略（Same-Origin Policy）限制的是不同源脚本读取对方数据的能力，而非发送请求本身。

  • 关键术语：
    • 源（Origin）：由协议（protocol）、域名（host）、端口（port）三要素组成，如 https://www.example.com:443
    • 跨域（Cross-Origin）：两个URL的协议、域名或端口任一不同即构成跨域
  • 管辖对象：
    • XMLHttpRequest / Fetch API：限制读取跨域响应内容（除非CORS允许）
    • localStorage / IndexedDB：限制不同源页面访问
    • iframe 内容：限制不同源父页面访问子页面DOM
  • 核心逻辑：浏览器阻止的是JavaScript代码获取跨域请求的响应数据，而非阻止请求发出！
// 尝试用Fetch请求跨域资源（会触发CORS检查）
fetch('https://api.other-site.com/data')
  .then(response => response.json()) // 此处可能被浏览器拦截！
  .then(data => console.log(data))
  .catch(err => console.error('跨域请求被阻止:', err));

💡 重要认知拐点：同源策略是浏览器给JavaScript代码设置的“数据访问监狱”，而非“网络请求监狱”。你的代码可以发起任意跨域请求，但浏览器可能不让你看响应内容。

🛡️ 二、豁免特权的资源标签：浏览器的“后门”

核心原理：某些HTML标签加载外部资源时，默认豁免同源策略读取限制，这是浏览器的主动设计！

  • 豁免标签清单：
    • <script src="...">（加载JS脚本）
    • <img src="...">（加载图片）
    • <link rel="stylesheet" href="...">（加载CSS）
    • <video> / <audio>（加载媒体资源）
    • <iframe>（加载文档，但受限于同源策略访问其内容）
  • 设计原因：
    1. 历史兼容性：早期网页需自由嵌入公共资源（如JS库、通用图片）
    2. 内容安全假设：这些资源通常被视为被动内容（如脚本执行后无法直接窃取数据）
    3. 性能考量：允许并行加载公共CDN资源提升页面速度
  • CDN的天然契合：CDN资源（JS库、CSS框架、图片等）正是通过<script>、<link>、<img>标签引入！
<!-- 跨域加载CDN资源完全合法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37/dist/vue.global.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<img src="https://my-cdn.com/images/logo.png">

⚠️ 重要安全补充：豁免标签不等于绝对安全！恶意脚本可能通过<script>加载并执行，因此CDN资源需确保可信（如SRI校验）。

🔐 三、CORS机制的对比认知：为何CDN不需要它？

核心区别：CORS解决的是通过JS发起的跨域请求的权限问题，而CDN资源属于豁免标签的被动加载。

  • CORS工作流程：
    1. 浏览器在发送实际请求前，可能先发OPTIONS预检请求（Preflight）
    2. 服务器响应Access-Control-Allow-Origin等头声明允许的源
    3. 浏览器校验通过后，才允许JS读取响应内容
  • CDN不需要CORS的原因：
    • 资源通过<script>/<img>等标签加载，属于豁免范畴
    • 响应内容由浏览器内核直接处理（如解析JS、渲染图片），而非暴露给页面JS代码
    • 即使CDN响应头没有Access-Control-Allow-Origin，资源依然能加载使用！
  • 特例注意：通过JS动态创建<img>/<script>标签加载资源，同样不受同源策略限制，这是豁免标签的特性延伸。
// 动态创建<script>加载CDN资源（不受同源策略限制）
const script = document.createElement('script');
script.src = 'https://cdn.example.com/some-library.js';
document.head.appendChild(script); // 浏览器会加载并执行，无跨域拦截

🔍 深度扩展：@font-face字体跨域是个例外！通过CSS引入的跨域Web字体需要CORS响应头，否则浏览器可能阻止使用。这是因字体可能被JS通过Canvas API提取分析，构成信息泄露风险。

💎 核心总结：CDN跨域的真相

  1. 同源策略限制的是JS读取数据，而非发送请求。
  2. <script>/<img>/<link>等资源标签具有豁免权，其加载的跨域资源不受同源策略限制。
  3. CDN资源正是通过这些豁免标签引入，因此天然规避跨域问题。
  4. CORS解决的是JS发起的跨域请求权限，与CDN资源加载机制无关。

本质归纳：CDN跨域并非“绕过”同源策略，而是浏览器主动为特定资源类型开放的安全通道。理解这点，才算真正看透同源策略的设计哲学！

🚀 面试制胜技巧：四步征服面试官

  1. 基础定义先行：清晰解释同源策略三要素及其限制目标（强调限制的是数据读取）。
  2. 点破豁免机制：明确指出<script>、<img>、<link>等标签加载资源不受同源策略限制。
  3. 关联CDN实现：说明CDN资源正是通过这些豁免标签引入页面，故无跨域问题。
  4. 对比CORS：强调CORS解决的是JS发起请求的权限，与资源标签加载机制本质不同。

加分项：

  • 提及豁免标签的历史原因（兼容性、被动内容假设）
  • 指出@font-face需要CORS的例外情况
  • 简要说明SRI（integrity属性）对CDN资源安全的意义

情绪价值拉满：

“能讲清这个问题，说明你已跳出‘死记API’的层面，真正理解了浏览器安全模型的底层逻辑——这是区分优秀工程师的关键一步。下次面试再遇此题，请自信微笑：是时候展现真正的技术洞察了！”


最后

欢迎大家访问我们的刷题网站（https://fe.ecool.fun/）或者小程序 前端面试题宝典 进行刷题，1200多道全网最全的前端面试题，让你一网打尽。近期还有会员卡免费领，全场打折的活动不容错过！刷题会员周卡免费送

有会员购买、辅导咨询的小伙伴，可以通过下面的二维码，联系我们的小助手。

图片