【2025年前端高频场景题系列】一文彻底搞懂浏览器同源策略与CDN跨域加载的秘密

前端布鲁伊
199 阅读11分钟

想获取更多2025年最新前端场景题可以看这里：fe.ecool.fun

【2025年前端高频场景题系列】使用同一个链接，如何实现PC打开是web应用、手机打是一个H5 应用？

引言：为何面试官钟爱这个问题？

在前端开发面试中，"浏览器有同源策略，但为何CDN请求资源时不会有跨域限制"是一个经典问题，出现频率很高。为什么面试官如此青睐这个问题？因为它能够一石三鸟：考察候选人对浏览器安全机制的理解、对网络资源加载过程的掌握，以及解决跨域问题的实战经验。

许多开发者在日常工作中使用CDN加载资源，却没有深入思考过为什么这些跨域资源可以正常工作。当面试官抛出这个问题时，很多候选人会一脸困惑："对啊，为什么CDN资源不受同源策略限制？"这正是面试官想要的效果——找出真正理解Web底层机制的开发者。

本文将深入剖析浏览器同源策略的本质，CDN资源加载的工作原理，以及二者之间看似矛盾却又和谐共存的关系，帮助你在面试中对答如流。

同源策略：浏览器的安全基石

什么是同源策略？

同源策略（Same-Origin Policy）是浏览器实施的一种安全机制，它限制了一个源（origin）的文档或脚本如何与另一个源的资源进行交互。

所谓"同源"，是指协议、域名和端口都相同。例如：

https://example.com/page1.html 和 https://example.com/page2.html 是同源的
https://example.com 和 http://example.com 不是同源的（协议不同）
https://example.com 和 https://api.example.com 不是同源的（子域名不同）
https://example.com 和 https://example.com:8080 不是同源的（端口不同）

同源策略限制了什么？

同源策略主要限制以下三种行为：

  1. Cookie、LocalStorage 和 IndexDB 的读取：JavaScript 只能读取同源的存储数据。
  2. DOM 的访问：JavaScript 只能访问同源的 DOM。
  3. AJAX 请求的发送：默认情况下，XMLHttpRequest 和 Fetch API 只能向同源 URL 发送请求。

但重要的是，同源策略并不是限制所有的跨域资源访问。这就是很多开发者容易混淆的地方。

为什么某些资源可以跨域加载？

浏览器允许一些HTML标签加载跨域资源，最常见的包括：

  1. <script src="..."></script> 加载 JavaScript 文件
  2. <link rel="stylesheet" href="..."> 加载 CSS 文件
  3. <img src="..."> 加载图片
  4. <video> 和 <audio> 加载媒体文件
  5. <object>, <embed> 和 <applet> 加载插件
  6. <font> 和 @font-face 加载字体

这些被称为"简单资源"，浏览器允许它们跨域加载的原因是：

  1. 历史原因：Web 早期设计时就允许这些资源跨域加载，以支持网页引用不同服务器上的资源。
  2. 单向性：这些资源被加载后，JavaScript 无法读取其内容（如无法读取图片的像素数据，除非将其绘制到同源 Canvas 上）。
  3. 只读性：这些资源只能被浏览器解析和渲染，不能主动执行代码或访问源页面的数据。

CDN资源加载的本质

CDN（内容分发网络）通常用于分发静态资源，如JavaScript库、CSS框架、图片等。这些恰好都属于上面提到的"简单资源"类别。

当你在HTML中引用CDN资源时：

<script src="https://cdn.example.com/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.example.com/bootstrap.min.css">
<img src="https://cdn.example.com/logo.png">

浏览器允许加载这些资源，因为：

  1. 这些资源的加载不会直接威胁到用户的安全（它们不能读取你的Cookie或执行特权操作）
  2. Web的设计初衷就是允许组合来自不同源的资源

AJAX请求与CORS：真正的跨域挑战

与简单资源不同，AJAX请求（XMLHttpRequest或Fetch API）默认受到同源策略的严格限制。这是因为：

  1. AJAX可以读取响应内容，这可能包含敏感信息
  2. AJAX可以发送Cookie等凭证，可能导致CSRF攻击
  3. AJAX请求通常用于数据交互，安全风险更高

CORS：跨域资源共享

为了安全地允许跨域AJAX请求，浏览器实现了CORS（Cross-Origin Resource Sharing，跨域资源共享）机制。

CORS的工作原理：

  1. 浏览器在发送跨域请求时，会自动添加Origin头部，标明请求来源
  2. 服务器检查Origin，如果允许该来源访问，则在响应中添加Access-Control-Allow-Origin头部
  3. 浏览器检查该头部，如果包含当前源或通配符*，则允许JavaScript访问响应内容
// 请求头
Origin: https://example.com

// 响应头
Access-Control-Allow-Origin: https://example.com
// 或
Access-Control-Allow-Origin: *

预检请求（Preflight）

对于非简单请求（如使用PUT/DELETE方法，或包含自定义头部），浏览器会先发送一个OPTIONS请求（称为"预检请求"），询问服务器是否允许实际请求：

OPTIONS /api/data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

服务器需要返回适当的CORS头部：

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 86400

实战案例：从需求到实现的CDN资源加载与跨域处理

让我们通过一个实际案例，逐步解析前端开发中常见的CDN资源加载和跨域问题。

背景：构建一个数据可视化仪表板

产品经理小李找到你："我们需要开发一个数据仪表板，需要加载多个第三方库和API数据。为了提高性能，我们想使用CDN加载这些库。"

第一阶段：基础资源加载

需求：使用CDN加载Bootstrap、Chart.js和jQuery

实现：

<!DOCTYPE html>
<html>
<head>
  <title>数据仪表板</title>
  <!-- 使用CDN加载CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <!-- 使用CDN加载JavaScript库 -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>数据仪表板</h1>
    <div class="row">
      <div class="col-md-6">
        <canvas id="salesChart"></canvas>
      </div>
      <div class="col-md-6">
        <canvas id="trafficChart"></canvas>
      </div>
    </div>
  </div>
  
  <script>
    // 使用加载的库创建图表
    $(document).ready(function() {
      const salesCtx = document.getElementById('salesChart').getContext('2d');
      new Chart(salesCtx, {
        type: 'bar',
        data: {
          labels: ['一月', '二月', '三月'],
          datasets: [{
            label: '销售额',
            data: [1200, 1900, 3000]
          }]
        }
      });
      
      // 更多图表初始化...
    });
  </script>
</body>
</html>

结果：页面成功加载了所有CDN资源，图表正常显示。这些资源虽然来自不同域，但都是"简单资源"，浏览器允许跨域加载。

第二阶段：加载API数据

需求：从后端API获取实时数据更新图表

实现：

// 尝试从API获取数据
$.ajax({
  url: 'https://api.example.com/sales-data',
  method: 'GET',
  success: function(data) {
    // 更新图表
    salesChart.data.datasets[0].data = data.sales;
    salesChart.update();
  },
  error: function(xhr, status, error) {
    console.error('无法加载数据:', error);
  }
});

问题：控制台出现错误：

Access to XMLHttpRequest at 'https://api.example.com/sales-data' from origin 'https://dashboard.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

分析：这是典型的CORS错误。虽然我们可以从CDN加载静态资源，但AJAX请求受到同源策略限制，需要服务器配置CORS头部。

第三阶段：解决API跨域问题

方案1：服务器端配置CORS

如果你有API的控制权，最佳解决方案是在服务器端配置CORS头部：

// Node.js Express服务器示例
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://dashboard.example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  
  // 处理预检请求
  if (req.method === 'OPTIONS') {
    return res.status(204).end();
  }
  
  next();
});

app.get('/sales-data', (req, res) => {
  // 返回销售数据
  res.json({ sales: [1500, 2300, 3200] });
});

app.listen(3000, () => {
  console.log('API服务器运行在端口3000');
});

方案2：使用代理服务器

如果无法修改API服务器，可以设置代理：

// 前端开发服务器配置（如webpack-dev-server）
module.exports = {
  // ...其他配置
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        pathRewrite: { '^/api': '' },
        changeOrigin: true
      }
    }
  }
};

然后修改前端请求：

// 通过代理请求数据
$.ajax({
  url: '/api/sales-data', // 请求会被代理到https://api.example.com/sales-data
  method: 'GET',
  success: function(data) {
    // 处理数据...
  }
});

方案3：JSONP（仅适用于GET请求）

JSONP利用<script>标签可以跨域加载的特性：

function handleSalesData(data) {
  // 更新图表
  salesChart.data.datasets[0].data = data.sales;
  salesChart.update();
}

// 动态创建script标签
const script = document.createElement('script');
script.src = 'https://api.example.com/sales-data?callback=handleSalesData';
document.body.appendChild(script);

// 服务器需要返回：handleSalesData({ sales: [1500, 2300, 3200] });

第四阶段：处理字体和图片资源

需求：加载自定义字体和图表图标

实现：

/* 使用CDN加载字体 */
@font-face {
  font-family: 'CustomFont';
  src: url('https://fonts.example.com/custom-font.woff2') format('woff2');
}

.dashboard-title {
  font-family: 'CustomFont', sans-serif;
}

<!-- 加载图标 -->
<img src="https://icons.example.com/chart-icon.svg" alt="图表图标">

结果：字体和图片正常加载，因为它们也属于"简单资源"，浏览器允许跨域加载。

第五阶段：处理跨域iframe

需求：嵌入第三方报表页面

实现：

<iframe src="https://reports.partner.com/embedded-report" width="100%" height="500"></iframe>

问题：虽然iframe可以加载，但JavaScript无法访问iframe内容：

// 尝试访问iframe内容
const iframe = document.querySelector('iframe');
try {
  const iframeContent = iframe.contentDocument;
  console.log(iframeContent);
} catch (e) {
  console.error('无法访问iframe内容:', e);
}

控制台错误：

Uncaught DOMException: Blocked a frame with origin "https://dashboard.example.com" from accessing a cross-origin frame.

解决方案：使用postMessage进行跨域通信

父页面：

// 向iframe发送消息
const iframe = document.querySelector('iframe');
iframe.onload = function() {
  iframe.contentWindow.postMessage({
    type: 'requestData',
    dashboardId: 123
  }, 'https://reports.partner.com');
};

// 接收iframe消息
window.addEventListener('message', function(event) {
  if (event.origin !== 'https://reports.partner.com') return;
  
  console.log('收到iframe数据:', event.data);
  // 处理数据...
});

iframe页面：

// 接收父页面消息
window.addEventListener('message', function(event) {
  if (event.origin !== 'https://dashboard.example.com') return;
  
  if (event.data.type === 'requestData') {
    // 处理请求并发送响应
    window.parent.postMessage({
      type: 'reportData',
      data: { /* 报表数据 */ }
    }, event.origin);
  }
});

深入理解：资源类型与跨域限制的关系

为了更清晰地理解不同资源类型的跨域限制，我们可以将它们分为三类：

1. 完全允许跨域加载的资源

这些资源可以从任何源加载，且不需要特殊的CORS头部：

  • 脚本（<script src="...">）
  • 样式表（<link rel="stylesheet" href="...">）
  • 图片（<img src="...">）
  • 媒体文件（<video>, <audio>）
  • 字体（通过@font-face）
  • 嵌入内容（<iframe>, <embed>, <object>）- 虽然可以加载，但JavaScript访问其内容受限

这就是为什么CDN可以轻松分发这些资源的原因。

2. 需要CORS支持的资源请求

这些请求默认受到同源策略限制，需要服务器配置CORS头部：

  • XMLHttpRequest和Fetch API请求
  • Web Workers
  • 使用drawImage绘制跨域图片到Canvas
  • 从跨域CSS获取规则（使用CSSOM）
  • WebGL纹理

3. 永远不允许跨域的操作

无论如何配置CORS，这些操作都被严格限制在同源范围内：

  • 读取跨域iframe的DOM
  • 读取跨域窗口的localStorage或sessionStorage
  • 访问跨域窗口的parent、opener引用

面试应对技巧：如何完美回答这个问题

当面试官问"浏览器有同源策略，但为何CDN请求资源时不会有跨域限制"时，你可以按照以下框架回答：

1. 明确区分同源策略的不同限制范围

示范回答："同源策略并不是一刀切地限制所有跨域资源访问。它主要限制的是JavaScript通过AJAX获取跨域资源、访问跨域DOM以及读取跨域存储。而对于<script>、<link>、<img>等标签加载的静态资源，浏览器从设计之初就允许它们跨域加载，这也是Web能够整合不同来源资源的基础。"

2. 解释CDN资源为何可以跨域加载

示范回答："CDN主要分发的是JavaScript库、CSS框架、图片等静态资源，这些恰好属于浏览器允许跨域加载的资源类型。这些资源被设计为'只读'和'被动执行'，JavaScript无法直接读取它们的原始内容（如无法读取跨域脚本的源代码），因此不会造成安全风险。这就是为什么我们可以毫无障碍地使用CDN资源。"

3. 区分资源加载与数据交互

示范回答："需要注意的是，虽然我们可以通过CDN加载jQuery等库，但如果使用这些库发起AJAX请求到不同源的API，仍然会受到同源策略限制。这时就需要服务器配置CORS头部或使用其他跨域解决方案。所以，资源加载和数据交互是两个不同的概念，面对的跨域限制也不同。"

4. 举例说明实际应用场景

示范回答："在实际项目中，我们通常会将静态资源（JS、CSS、图片）放在CDN上，而将API部署在应用服务器上。前者不需要特殊处理就可以跨域加载，后者则需要配置CORS。例如，我曾经开发过一个SPA应用，前端部署在CDN上，API部署在AWS上，我们通过在API服务器配置适当的'Access-Control-Allow-Origin'头部来解决跨域数据请求问题。"

5. 提及安全考量

示范回答："虽然浏览器允许跨域加载这些资源，但从安全角度考虑，我们仍然需要注意几点：一是使用可信的CDN源；二是对重要资源使用SRI（子资源完整性）校验，防止CDN被劫持后植入恶意代码；三是考虑添加CSP（内容安全策略）头部，限制资源的加载源。"

总结：理解跨域加载的本质

浏览器的同源策略和CDN跨域资源加载之间并不矛盾。同源策略是一种安全机制，它有选择地限制某些跨域交互，而允许另一些跨域交互。CDN资源之所以能够跨域加载，是因为它们主要是静态资源，这些资源的加载从Web诞生之初就被允许跨域。

作为前端开发者，理解这些细微差别对于构建安全、高效的Web应用至关重要。在面试中，不要简单地背诵答案，而是要展示你对Web底层机制的理解，以及如何在实际项目中应用这些知识解决问题。

记住，浏览器的安全机制是经过精心设计的平衡——既要保护用户安全，又要保持Web的开放性和互操作性。理解这种平衡，才能真正掌握前端开发的精髓。

转载注明出处。

需要前端刷题的同学可以用这个宝藏工具：fe.ecool.fun

avatar
文章
阅读
粉丝