HTML <iframe> 标签

Begindev 编辑部 March 25, 2026

<iframe> 元素，也称为内联框架，是 HTML 中一个强大的工具，它允许开发者将另一个 HTML 文档嵌入到当前文档中。这在许多场景下都非常有用，例如嵌入第三方内容、显示广告、或者在不刷新主页面的情况下加载独立内容。

本章将探讨 <iframe> 的使用方法、重要属性以及需要注意的安全考量。

1. `<iframe>` 的基本用法

<iframe> 元素是一个行内框架，它创建了一个独立的浏览上下文，可以加载任何有效的 URL 内容。最简单的用法就是指定 src 属性，指向要嵌入的网页地址。

<iframe src="https://www.example.com" width="600" height="400">
  您的浏览器不支持 iframe。
</iframe>

在这个例子中，width 和 height 属性定义了框架的尺寸。<iframe> 标签之间的内容会在不支持 iframe 的浏览器中显示，这是一种优雅降级机制。

2. 关键属性详解

<iframe> 元素拥有多个属性，用于控制其行为、外观和安全性。

2.1 `src` 属性

src 属性是必须的，它指定了要嵌入文档的 URL。这可以是相对路径（指向您自己网站上的页面）或绝对路径（指向其他网站上的页面）。

2.2 `width` 和 `height` 属性

这两个属性用于设置 <iframe> 的宽度和高度，可以以像素值或百分比形式指定。

<iframe src="page.html" width="100%" height="300px"></iframe>

2.3 `title` 属性

title 属性为 <iframe> 提供了一个描述性标题。这对于可访问性至关重要，屏幕阅读器会读取此标题以帮助用户理解框架的内容。

<iframe src="map.html" title="互动地图显示公司位置"></iframe>

2.4 `name` 属性

name 属性用于为 <iframe> 分配一个名称。这个名称可以在 JavaScript 中用于引用框架，或者作为表单提交的目标 (target)。

<iframe src="form_results.html" name="resultsFrame"></iframe>
<form action="submit_data.html" target="resultsFrame">
  <!-- 表单内容 -->
  <input type="submit" value="提交">
</form>

2.5 `sandbox` 属性

sandbox 属性是 <iframe> 最重要的安全属性之一。它启用了一系列对框架内容的限制，从而降低了潜在的安全风险。默认情况下，sandbox 属性为空，表示所有限制都将被启用。

通过指定不同的值，可以解除特定的限制：

allow-forms: 允许提交表单。
allow-modals: 允许打开模态窗口（如 alert()、confirm()、prompt()）。
allow-orientation-lock: 允许锁定屏幕方向。
allow-pointer-lock: 允许使用 Pointer Lock API。
allow-popups: 允许弹窗（如 window.open()）。
allow-popups-to-escape-sandbox: 允许沙箱框架中的弹窗不受沙箱限制。
allow-presentation: 允许使用 Presentation API。
allow-same-origin: 允许框架内容被视为来自与父页面相同的源，这对于允许框架脚本访问父页面的 DOM 和数据非常重要。如果没有此属性，框架将被视为来自一个唯一的源，从而实现同源策略的隔离。
allow-scripts: 允许运行 JavaScript。
allow-storage-access-by-user-activation: 允许通过用户激活请求存储访问。
allow-top-navigation: 允许框架导航顶级浏览上下文（即父页面）。
allow-top-navigation-by-user-activation: 允许通过用户激活导航顶级浏览上下文。

使用 sandbox 时，如果不指定任何值，则所有限制都将生效，内容将被视为来自一个唯一的源，不允许执行脚本、提交表单、打开弹窗等。

<!-- 启用沙箱，但允许脚本和同源访问 -->
<iframe src="safe_content.html" sandbox="allow-scripts allow-same-origin"></iframe>

<!-- 完全沙箱，所有功能都受限 -->
<iframe src="untrusted_content.html" sandbox=""></iframe>

2.6 `allow` 属性

allow 属性是 Content Security Policy (CSP) 的一部分，用于控制 <iframe> 中允许使用的特定功能或 API。它通过 Feature Policy 机制工作，允许父文档显式地授权子框架使用某些功能。

一些常见的 allow 值包括：

accelerometer: 允许访问加速计。
autoplay: 允许媒体自动播放。
camera: 允许访问摄像头。
geolocation: 允许访问地理位置信息。
microphone: 允许访问麦克风。
payment: 允许使用 Payment Request API。
fullscreen: 允许进入全屏模式。

多个功能可以使用分号 ; 分隔。

<iframe src="video_player.html" allow="autoplay; fullscreen"></iframe>

2.7 `loading` 属性

loading 属性提供了加载 <iframe> 的性能优化提示。

eager: 立即加载 <iframe> (默认行为)。
lazy: 推迟加载 <iframe>，直到它接近视口。这有助于提高页面初始加载性能。

<iframe src="lazy_load_map.html" loading="lazy"></iframe>

2.8 `referrerpolicy`

referrerpolicy 属性控制在发送 <iframe> 请求时，Referer HTTP 头中包含的信息。这对于保护用户隐私和防止信息泄露很重要。

常见的值包括：

no-referrer: 不发送 Referer 头。
no-referrer-when-downgrade: 对于从 HTTPS 到 HTTP 的请求，不发送 Referer 头。
origin: 只发送源地址（协议、主机、端口）。
origin-when-cross-origin: 跨源请求发送源地址，同源请求发送完整 URL。
same-origin: 只对同源请求发送 Referer 头。
strict-origin: 对于从 HTTPS 到 HTTPS 的请求，只发送源地址；对于降级请求，不发送。
strict-origin-when-cross-origin: 同源请求发送完整 URL，跨源 HTTPS 到 HTTPS 请求发送源地址，降级请求不发送。
unsafe-url: 始终发送完整 URL（不推荐，除非绝对必要）。

<iframe src="external_content.html" referrerpolicy="no-referrer"></iframe>

3. `<iframe>` 的安全性考量

由于 <iframe> 可以加载任意外部内容，因此安全性是使用它时最重要的考虑因素之一。恶意内容可能会尝试进行跨站脚本攻击 (XSS)、点击劫持或其他形式的攻击。

3.1 同源策略 (Same-Origin Policy)

浏览器实施同源策略，这限制了一个源的文档或脚本如何与另一个源的资源进行交互。这意味着，来自不同域的 <iframe> 无法直接访问或操作父页面的 DOM，反之亦然。这为 <iframe> 提供了基本的安全隔离。

3.2 `sandbox` 属性

如前所述，sandbox 属性是限制 <iframe> 内容能力的首选机制。始终考虑对嵌入的第三方内容使用 sandbox 属性，并仅解除您明确需要的功能。

3.3 `allow` 属性 (Feature Policy)

allow 属性提供了更细粒度的控制，限制了 <iframe> 能够访问的设备功能和 API。

3.4 Content Security Policy (CSP)

父页面可以定义 Content Security Policy，以限制 <iframe> 的 src 属性可以加载的域，从而防止意外加载恶意内容。

<meta http-equiv="Content-Security-Policy" content="frame-src 'self' example.com bing.com;">

这个 CSP 规则将只允许 <iframe>从当前域 ('self')、example.com 和 bing.com 加载内容。

3.5 X-Frame-Options

X-Frame-Options HTTP 响应头可以用来防止您的网站被其他网站嵌入到 <iframe> 中，从而避免点击劫持攻击。

DENY: 无论如何都不能在框架中显示页面。
SAMEORIGIN: 页面只能在同源的框架中显示。
ALLOW-FROM uri: 页面可以在指定 URI 的框架中显示（已过时，推荐使用 CSP 的 frame-ancestors）。

注意： 现代实践中，frame-ancestors CSP 指令是 X-Frame-Options 的推荐替代方案，提供更灵活和强大的控制。

Content-Security-Policy: frame-ancestors 'self' example.com;

这表示只有来自当前源或 example.com 的页面才能将当前页面嵌入到 <iframe> 中。

4. `<iframe>` 的常见用途

嵌入第三方视频播放器: 如 YouTube、Vimeo 视频。
嵌入地图: 如 Google Maps。
显示广告: 隔离广告内容，防止其干扰主页面。
加载异步内容: 在不刷新主页面的情况下加载独立的应用或内容，例如聊天小部件或评论系统。
跨域通信: 通过 postMessage() API 实现父页面和 <iframe> 之间的安全通信。
在线编辑器: 嵌入富文本编辑器或代码编辑器。

5. 响应式 `<iframe>`

默认情况下，<iframe> 的 width 和 height 属性是固定的。为了使其在不同设备上具有响应性，通常需要结合 CSS。

一种常见的技术是使用填充 (padding) 和 position: absolute 来维持宽高比。

<style>
.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 比例 (高 / 宽 * 100%) */
  height: 0;
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

<div class="iframe-container">
  <iframe src="https://www.youtube.com/embed/your_video_id" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

通过设置 padding-bottom 为 56.25%（对应于 16:9 的视频比例），容器的高度会根据其宽度自动调整，而 <iframe> 则绝对定位在容器内部并占满。

6. 总结

<iframe> 是一个功能强大且灵活的 HTML 元素，用于将外部内容嵌入到网页中。然而，它的强大功能也伴随着重要的安全考量。通过理解并正确使用 sandbox、allow 属性以及 Content Security Policy，开发者可以有效地利用 <iframe> 的优势，同时最大限度地降低潜在的安全风险。在使用 <iframe> 时，始终优先考虑用户体验和安全性。

1. <iframe> 的基本用法

2. 关键属性详解

2.1 src 属性

2.2 width 和 height 属性

2.3 title 属性

2.4 name 属性

2.5 sandbox 属性

2.6 allow 属性

2.7 loading 属性

2.8 referrerpolicy

3. <iframe> 的安全性考量