iframe 的优点和缺点

概述

<iframe>（Inline Frame，内联框架）是 HTML 中用于在当前页面中嵌入另一个完整网页的元素。它就像在你的网页中开了一扇"窗户"，透过这扇窗户可以看到另一个独立的网页内容。

基本语法

<!-- 最基本的 iframe 用法 -->
<iframe src="https://example.com" width="800" height="600"></iframe>

<!-- 带有常用属性的 iframe -->
<iframe
  src="https://example.com"
  width="100%"
  height="500"
  title="嵌入内容描述"
  frameborder="0"
  allowfullscreen
  loading="lazy"
  sandbox="allow-scripts allow-same-origin"
></iframe>

常用属性一览

属性	说明	示例
`src`	嵌入页面的 URL	`src="https://example.com"`
`width` / `height`	宽高	`width="800" height="600"`
`title`	可访问性描述（必须设置）	`title="地图嵌入"`
`name`	框架名称，可用于 `target`	`name="myFrame"`
`sandbox`	安全沙箱限制	`sandbox="allow-scripts"`
`allow`	权限策略	`allow="camera; microphone"`
`loading`	懒加载	`loading="lazy"`
`referrerpolicy`	Referer 策略	`referrerpolicy="no-referrer"`
`srcdoc`	直接嵌入 HTML 内容	`srcdoc="<p>Hello</p>"`

iframe 的优点

1. 内容隔离——天然的沙箱环境

iframe 中的页面拥有独立的 DOM 树、CSS 样式和 JavaScript 作用域，与主页面互不干扰。这是 iframe 最大的优势。

<!-- 主页面定义了全局样式 -->
<style>
  h1 { color: red; font-size: 40px; }
  p { font-family: "Comic Sans MS"; }
</style>

<h1>主页面标题（红色，40px）</h1>
<p>主页面的段落</p>

<!-- iframe 内的页面完全不受上面样式的影响 -->
<iframe srcdoc="
  <h1>iframe 内的标题（默认样式）</h1>
  <p>iframe 内的段落</p>
"></iframe>

实际应用

这种隔离特性在微前端架构中非常有用。不同团队开发的子应用可以各自使用不同的技术栈（React、Vue、Angular），通过 iframe 嵌入到主应用中，彼此的样式和脚本互不冲突。

2. 轻松嵌入第三方内容

iframe 可以方便地将外部服务的内容嵌入到自己的网页中，无需关心对方的技术实现。

<!-- 嵌入 YouTube 视频 -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

<!-- 嵌入 Google 地图 -->
<iframe
  src="https://www.google.com/maps/embed?pb=!1m18..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
></iframe>

<!-- 嵌入在线代码编辑器 -->
<iframe
  src="https://codesandbox.io/embed/new"
  style="width:100%; height:500px; border:0; border-radius:4px; overflow:hidden;"
  title="CodeSandbox"
  allow="accelerometer; camera; encrypted-media; geolocation; gyroscope; microphone"
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>

常见嵌入场景

视频播放器（YouTube、Bilibili）
在线地图（Google Maps、高德地图）
社交媒体帖子（Twitter、微博）
在线代码编辑器（CodeSandbox、CodePen）
支付页面（支付宝、微信支付）
广告内容

3. 并行加载，不阻塞主页面

iframe 的加载是异步的，不会阻塞主页面的渲染和交互。配合 loading="lazy" 属性，还可以实现懒加载。

<!-- 使用 lazy loading，iframe 在接近可视区域时才加载 -->
<iframe src="https://heavy-content.com" loading="lazy"></iframe>

// 也可以通过 JavaScript 动态加载 iframe
// 主页面渲染完成后再加载 iframe
window.addEventListener('load', () => {
  const iframe = document.createElement('iframe');
  iframe.src = 'https://heavy-content.com';
  iframe.width = '100%';
  iframe.height = '500';
  document.getElementById('iframe-container').appendChild(iframe);
});

4. 安全的 sandbox 机制

通过 sandbox 属性，可以对 iframe 中的内容施加严格的安全限制，防止恶意行为。

<!-- 完全沙箱化：禁止所有脚本、表单、弹窗等 -->
<iframe src="untrusted-page.html" sandbox></iframe>

<!-- 按需开放权限 -->
<iframe
  src="payment-page.html"
  sandbox="allow-scripts allow-forms allow-same-origin"
></iframe>

sandbox 可控制的权限：

sandbox 值	作用
（空值，不写任何值）	应用所有限制
`allow-scripts`	允许执行脚本
`allow-forms`	允许提交表单
`allow-same-origin`	允许被视为同源
`allow-popups`	允许弹窗（`window.open`）
`allow-modals`	允许模态对话框（`alert`、`confirm`）
`allow-top-navigation`	允许修改顶层窗口的 URL
`allow-downloads`	允许下载文件

注意

同时设置 allow-scripts 和 allow-same-origin 时要特别小心——iframe 中的脚本可以移除 sandbox 属性，从而绕过所有限制。只在信任的内容上同时使用这两个值。

5. 独立的浏览上下文

iframe 拥有自己独立的 window、document、history 对象。这意味着 iframe 内的页面导航、历史记录、cookie 等都是独立管理的。

// 主页面
console.log(window.location.href); // 主页面 URL

// iframe 内部
console.log(window.location.href);     // iframe 页面 URL
console.log(window.parent.location);   // 可以访问父页面（同源时）
console.log(window.top.location);      // 可以访问顶层页面（同源时）

6. 便于实现页面局部刷新

iframe 可以在不刷新主页面的情况下，单独刷新嵌入的内容区域。

<nav>
  <a href="page1.html" target="content">页面1</a>
  <a href="page2.html" target="content">页面2</a>
  <a href="page3.html" target="content">页面3</a>
</nav>

<!-- 只有这个区域会切换内容，导航栏保持不变 -->
<iframe name="content" src="page1.html" width="100%" height="600"></iframe>

历史背景

在 Ajax 技术普及之前（2005 年以前），iframe 是实现"页面局部刷新"的主要手段。虽然现在这种用法已经被 SPA（单页应用）和 Ajax 取代，但在某些遗留系统中仍然可以见到。

iframe 的缺点

1. 严重影响 SEO

搜索引擎爬虫通常不会索引 iframe 内部的内容，或者将其视为独立页面而不是主页面的一部分。这意味着 iframe 中的内容对主页面的 SEO 贡献为零。

<!-- ❌ SEO 不友好：核心内容放在 iframe 中 -->
<h1>我的博客</h1>
<iframe src="article-content.html"></iframe>
<!-- 搜索引擎看不到文章内容 -->

<!-- ✅ SEO 友好：核心内容直接写在页面中 -->
<h1>我的博客</h1>
<article>
  <p>这里是文章内容，搜索引擎可以正常索引...</p>
</article>

2. 性能开销大

每个 iframe 都会创建一个完整的浏览上下文，包括独立的 DOM 树、渲染引擎、JavaScript 引擎等，内存和 CPU 消耗都很高。

<!-- ❌ 性能噩梦：页面中嵌入了多个 iframe -->
<iframe src="header.html"></iframe>
<iframe src="sidebar.html"></iframe>
<iframe src="content.html"></iframe>
<iframe src="footer.html"></iframe>
<iframe src="ad1.html"></iframe>
<iframe src="ad2.html"></iframe>
<!-- 6 个 iframe = 6 个独立的浏览上下文，性能极差 -->

性能影响

每个 iframe 大约增加 1-2 MB 的内存占用
空白 iframe 的创建时间约 50-100ms
如果 iframe 加载了复杂页面，阻塞时间可能达到数秒
移动设备上性能问题更加突出

3. 跨域通信困难

当 iframe 嵌入的是不同域名的页面时，由于浏览器的同源策略限制，主页面和 iframe 之间无法直接访问对方的 DOM 和 JavaScript 对象。

// 主页面（https://parent.com）
const iframe = document.getElementById('myIframe');

// ❌ 跨域时直接访问会报错
try {
  const iframeDoc = iframe.contentDocument; // 报错！
  const iframeWin = iframe.contentWindow.someFunction(); // 报错！
} catch (e) {
  console.error('跨域访问被拒绝:', e.message);
  // Blocked a frame with origin "https://parent.com"
  // from accessing a cross-origin frame.
}

跨域通信只能依赖 postMessage API，使用起来相对繁琐：

// 主页面发送消息
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage(
  { type: 'UPDATE', data: '新数据' },
  'https://child.com' // 必须指定目标源
);

// 主页面接收消息
window.addEventListener('message', (event) => {
  // 安全校验：必须验证消息来源
  if (event.origin !== 'https://child.com') return;
  console.log('收到 iframe 的消息:', event.data);
});

// iframe 内部接收消息
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://parent.com') return;
  console.log('收到父页面的消息:', event.data);

  // 回复消息
  event.source.postMessage(
    { type: 'RESPONSE', data: '处理完成' },
    event.origin
  );
});

4. 响应式布局困难

iframe 本身是一个固定尺寸的矩形区域，无法根据内部内容自动调整高度，在响应式设计中非常难处理。

<!-- ❌ 问题：iframe 内容高度不确定，固定高度会出现滚动条或大量空白 -->
<iframe src="dynamic-content.html" width="100%" height="500"></iframe>

<!-- 内容只有 200px 高 → 出现 300px 空白 -->
<!-- 内容有 800px 高 → 出现滚动条 -->

解决方案需要额外的代码：

// 方案：iframe 内容页面主动通知父页面调整高度（需要同源或 postMessage）

// iframe 内部
function notifyHeight() {
  const height = document.documentElement.scrollHeight;
  window.parent.postMessage({ type: 'RESIZE', height }, '*');
}
// 内容变化时通知
const observer = new ResizeObserver(notifyHeight);
observer.observe(document.body);

// 主页面
window.addEventListener('message', (event) => {
  if (event.data.type === 'RESIZE') {
    document.getElementById('myIframe').style.height = event.data.height + 'px';
  }
});

5. 安全风险

iframe 如果使用不当，会带来多种安全威胁。

点击劫持（Clickjacking）

攻击者可以将目标网站嵌入到自己网页的透明 iframe 中，诱导用户在不知情的情况下点击目标网站上的按钮。

<!-- 攻击者的页面 -->
<style>
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 完全透明，用户看不到 */
    z-index: 999;
  }
</style>

<h1>恭喜你中奖了！点击领取！</h1>
<button>领取奖品</button>

<!-- 透明 iframe 覆盖在按钮上方 -->
<iframe src="https://bank.com/transfer?to=attacker&amount=10000"></iframe>

防御措施：

// 方法 1：服务端设置 X-Frame-Options 响应头
// X-Frame-Options: DENY          // 禁止被任何页面嵌入
// X-Frame-Options: SAMEORIGIN    // 只允许同源页面嵌入

// 方法 2：使用 CSP（Content Security Policy）
// Content-Security-Policy: frame-ancestors 'none'       // 禁止嵌入
// Content-Security-Policy: frame-ancestors 'self'        // 只允许同源
// Content-Security-Policy: frame-ancestors https://trusted.com  // 指定域名

// 方法 3：JavaScript 防嵌入（不太可靠，可被绕过）
if (window.top !== window.self) {
  window.top.location = window.self.location; // 跳出 iframe
}

钓鱼攻击

iframe 可以嵌入伪造的登录页面，诱导用户输入账号密码。

<!-- ❌ 危险：嵌入不可信的页面 -->
<iframe src="https://evil-site.com/fake-login.html"></iframe>

6. 可访问性（Accessibility）差

iframe 对屏幕阅读器和键盘导航不友好，影响残障用户的使用体验。

<!-- ❌ 可访问性差 -->
<iframe src="content.html"></iframe>

<!-- ✅ 稍好：至少提供 title 描述 -->
<iframe src="content.html" title="用户评论区域"></iframe>

可访问性问题包括：

屏幕阅读器可能无法正确识别 iframe 的内容和边界
键盘焦点在主页面和 iframe 之间切换时体验不佳
iframe 内部的 ARIA 标签不会传递到主页面
多层嵌套 iframe 时，Tab 键导航可能迷失方向

7. 浏览器历史记录混乱

iframe 内部的页面导航会影响浏览器的历史记录，用户点击浏览器的"后退"按钮时，可能只是在 iframe 内部后退，而不是离开当前页面，这会让用户感到困惑。

// 用户的预期行为：
// 点击后退 → 回到上一个页面

// 实际行为（有 iframe 时）：
// 点击后退 → iframe 内部回到上一页，主页面不变
// 再点后退 → iframe 内部继续回退...
// 多次后退 → 终于回到了上一个页面

8. 移动端兼容性问题

在移动设备上，iframe 的表现存在诸多问题：

滚动问题：iOS 上 iframe 内部滚动体验差，需要特殊的 CSS 处理
缩放问题：iframe 内部页面的缩放与主页面不同步
触摸事件：触摸事件在 iframe 边界可能出现异常
键盘弹起：输入框获得焦点时，虚拟键盘可能遮挡 iframe 内容

/* iOS 上修复 iframe 滚动 */
.iframe-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

优缺点总结

替代方案

在现代 Web 开发中，很多之前需要 iframe 的场景已经有了更好的替代方案：

场景	iframe 用法	现代替代方案
嵌入视频	`<iframe src="video.html">`	`<video>` 标签
嵌入音频	`<iframe src="audio.html">`	`<audio>` 标签
局部刷新	iframe + 导航	Ajax / Fetch API / SPA 路由
微前端	iframe 嵌入子应用	Web Components / Module Federation / qiankun
嵌入外部内容	iframe	`<object>` / `<embed>` / Server-side include
富文本编辑器	iframe + designMode	`contentEditable` / 第三方编辑器库
沙箱执行代码	iframe + sandbox	Web Workers / Shadow DOM

微前端场景对比

最佳实践

如果确实需要使用 iframe，请遵循以下最佳实践：

1. 始终设置 title 属性

<!-- ✅ 为屏幕阅读器提供描述 -->
<iframe src="map.html" title="公司地址地图"></iframe>

2. 合理使用 sandbox

<!-- ✅ 只开放必要的权限 -->
<iframe
  src="untrusted.html"
  sandbox="allow-scripts"
></iframe>

3. 使用 loading="lazy" 优化性能

<!-- ✅ 不在首屏的 iframe 使用懒加载 -->
<iframe src="comments.html" loading="lazy"></iframe>

4. 设置安全响应头防止被嵌入

# Nginx 配置
add_header X-Frame-Options "SAMEORIGIN";
add_header Content-Security-Policy "frame-ancestors 'self'";

5. 使用 postMessage 安全通信

// ✅ 始终验证消息来源
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://trusted-domain.com') {
    return; // 忽略不可信来源的消息
  }
  // 处理消息...
});

6. 限制 iframe 的权限策略

<!-- ✅ 使用 allow 属性精确控制权限 -->
<iframe
  src="video-player.html"
  allow="autoplay; fullscreen"
></iframe>

<!-- ✅ 禁止不需要的功能 -->
<iframe
  src="article.html"
  allow="camera 'none'; microphone 'none'; geolocation 'none'"
></iframe>

面试高频问答

Q1：iframe 的优缺点分别是什么？

A：

优点：

内容隔离：iframe 拥有独立的 DOM、CSS、JS 作用域，不会和主页面互相污染，非常适合嵌入第三方内容或微前端隔离。
安全沙箱：通过 sandbox 属性可以限制 iframe 内部的行为，如禁止脚本执行、禁止表单提交等。
异步加载：不会阻塞主页面渲染，支持 loading="lazy" 懒加载。

缺点：

SEO 差：搜索引擎通常不索引 iframe 内部内容。
性能开销大：每个 iframe 创建一个完整的浏览上下文，消耗大量内存和 CPU。
跨域通信复杂：只能通过 postMessage 进行通信，使用繁琐。
响应式困难：无法自动适应内部内容高度。
安全风险：可能被利用进行点击劫持等攻击。
可访问性差：屏幕阅读器和键盘导航支持不好。

Q2：如何防止自己的网站被嵌入到别人的 iframe 中（防止点击劫持）？

A：主要有三种方式：

X-Frame-Options 响应头：设置为 DENY（完全禁止）或 SAMEORIGIN（只允许同源）。
CSP frame-ancestors 指令：Content-Security-Policy: frame-ancestors 'self'，比 X-Frame-Options 更灵活，可以指定多个允许的域名。
JavaScript 检测：通过 if (window.top !== window.self) 判断是否被嵌入，但这种方式不太可靠，因为 sandbox 属性可以阻止 iframe 内的脚本执行。

推荐优先使用 CSP frame-ancestors，它是最现代、最灵活的方案。

Q3：iframe 跨域时如何进行父子页面通信？

A：跨域时只能使用 window.postMessage() API。

发送方： 调用目标窗口的 postMessage(data, targetOrigin) 方法，必须指定目标源（targetOrigin），避免使用 '*'。

接收方： 监听 message 事件，并且必须验证 event.origin 确保消息来自可信的源，防止恶意页面伪造消息。

// 父 → 子
iframe.contentWindow.postMessage(data, 'https://child.com');
// 子 → 父
window.parent.postMessage(data, 'https://parent.com');

Q4：为什么说 iframe 性能开销大？具体表现在哪里？

A：每个 iframe 都会创建一个完全独立的浏览上下文，具体包括：

独立的文档解析器：解析 HTML/CSS 需要额外的 CPU 时间。
独立的 JavaScript 引擎实例：占用额外的内存和 CPU。
独立的渲染管线：布局（Layout）和绘制（Paint）独立进行。
独立的网络请求：额外的 HTTP 连接，增加加载时间。
内存占用：即使是空白 iframe，也会占用约 1-2MB 内存。

因此在一个页面中嵌入过多 iframe 会导致页面卡顿、加载缓慢、内存占用过高。

Q5：微前端中使用 iframe 方案有什么优势和劣势？

A：

优势：

完全隔离：JS、CSS、DOM 完全独立，不存在样式污染和全局变量冲突。
技术栈无关：子应用可以使用任何框架（React、Vue、Angular 等）。
实现简单：只需要一个 iframe 标签即可嵌入，改造成本低。

劣势：

用户体验差：页面中的弹窗（Modal）无法覆盖到 iframe 外部，需要通知父页面弹窗。
URL 不同步：iframe 内部导航不会反映在浏览器地址栏上，刷新页面会丢失子应用状态。
性能问题：每个子应用都是完整的页面，资源不能共享和复用。
通信成本高：父子应用通信只能通过 postMessage，状态同步复杂。

因此，现代微前端更倾向于使用 qiankun、Module Federation 等方案，只在需要极强隔离性的场景下才考虑 iframe。

Q6：iframe 的 sandbox 属性如何使用？

A：sandbox 是 iframe 的安全沙箱属性。当设置了空的 sandbox 属性时，会启用所有限制：禁止脚本执行、禁止表单提交、禁止弹窗、禁止同源访问等。可以通过添加特定的值来逐一放开权限，如 sandbox="allow-scripts allow-forms" 表示允许脚本和表单，但仍然限制其他行为。

核心原则是最小权限原则——默认全部禁止，只开放确实需要的能力。需要特别注意的是，同时开放 allow-scripts 和 allow-same-origin 存在安全风险，因为 iframe 内的脚本可能移除自身的 sandbox 属性。

概述​

基本语法​

常用属性一览​

iframe 的优点​

1. 内容隔离——天然的沙箱环境​

2. 轻松嵌入第三方内容​

3. 并行加载，不阻塞主页面​

4. 安全的 sandbox 机制​

5. 独立的浏览上下文​

6. 便于实现页面局部刷新​

iframe 的缺点​

1. 严重影响 SEO​

2. 性能开销大​

3. 跨域通信困难​

4. 响应式布局困难​

5. 安全风险​

点击劫持（Clickjacking）​

钓鱼攻击​

6. 可访问性（Accessibility）差​

7. 浏览器历史记录混乱​

8. 移动端兼容性问题​

优缺点总结​

替代方案​

微前端场景对比​

最佳实践​

1. 始终设置 title 属性​

2. 合理使用 sandbox​

3. 使用 loading="lazy" 优化性能​

4. 设置安全响应头防止被嵌入​

5. 使用 postMessage 安全通信​

6. 限制 iframe 的权限策略​

面试高频问答​

Q1：iframe 的优缺点分别是什么？​

Q2：如何防止自己的网站被嵌入到别人的 iframe 中（防止点击劫持）？​

Q3：iframe 跨域时如何进行父子页面通信？​

Q4：为什么说 iframe 性能开销大？具体表现在哪里？​

Q5：微前端中使用 iframe 方案有什么优势和劣势？​

Q6：iframe 的 sandbox 属性如何使用？​

概述