出处：掘金

原作者：尽欢 i

什么是 iframe？

iframe（inline frame）翻译过来叫内联框架，是一种在 HTML 页面中嵌入另一个 HTML 页面的方法。通过 iframe，可以在当前网页中显示另一个完全独立的网页，它们是彼此分离的。换句话说，iframe 允许在当前页面中创建一个子窗口，而该窗口可以加载另一个网站或内容。

iframe 的常见用途：

• 嵌入视频：如 YouTube、Vimeo 等视频平台提供的嵌入代码；
• 加载广告：广告常常通过 iframe 嵌入，以确保广告内容与主页面隔离；
• 嵌入外部内容：将一个完全独立的页面嵌入到当前页面中，比如加载第三方应用、表单等；
• 内嵌文档：将 PDF、HTML、网站等文件展示在网页中；
• 跨域内容嵌入：通过 iframe 可以显示来自不同域名的内容，但需要考虑一些安全限制

无论是集成第三方服务、实现微前端架构，还是构建安全的沙盒环境，iframe 都以其独特的隔离机制和跨域能力成为开发者的首选方案。虽然 iframe 能快速解决跨页面内容嵌套问题，但也成为性能瓶颈或安全漏洞的源头。

iframe 常见属性

1. 核心属性

2. 安全与权限控制

3. 样式与布局

4. 跨域与通信

5. 现代浏览器支持的属性

iframe 常见事件

1. 加载状态事件

load - iframe 内容加载完成

iframe.addEventListener('load', () => {
  console.log('iframe 内容已加载完成');
});

用途：

• 检测嵌入页面是否加载成功
• 在内容就绪后执行操作（如调整高度）

error - iframe 加载失败

iframe.addEventListener('error', () => {
  console.error('iframe 加载失败');
});

用途：

• 处理第三方页面加载失败的情况
• 显示备用内容（降级方案）

2. iframe 视口大小事件（仅同源）

仅限同源 iframe，跨域需通过 postMessage 间接实现

resize - iframe 视口大小变化

iframe.contentWindow.addEventListener('resize', () => {
  console.log('iframe 内部窗口大小变化');
});

这段代码监听的是 iframe 内部窗口（即子页面的 window 对象）的视口（viewport）宽度尺寸变化，而不是 iframe 元素本身的边框尺寸或子页面内容的实际高度变化。

用途：

• 响应式布局调整
• 动态计算 iframe 内容高度

3. 跨域通信事件

message - 跨域数据接收

// 父页面发送消息
iframe.contentWindow.postMessage('Hello', 'https://child-domain.com');

// 子页面接收
window.addEventListener('message', (event) => {
  if (event.origin === 'https://parent-domain.com') {
    console.log('收到消息:', event.data);
  }
});

关键参数：

• event.data：传递的数据
• event.origin：消息来源（必须验证！）
• event.source：发送消息的窗口引用

4. 安全相关事件

securitypolicyviolation - CSP 违规

document.addEventListener('securitypolicyviolation', (e) => {
  console.warn('CSP 违规:', e.blockedURI);
});

用途：

• 监控 iframe 内的资源加载是否违反 CSP 规则

5. 用户交互事件（仅同源）

仅限同源 iframe，跨域需通过 postMessage 间接实现

mouseover / click - 穿透事件监听

// 父页面捕获 iframe 内的鼠标事件（需同源）
iframe.contentDocument.addEventListener('click', (e) => {
  console.log('点击了 iframe 内部元素');
});

6. 生命周期事件（微前端场景）

beforeunload - 子页面即将卸载

// 子页面中
window.addEventListener('beforeunload', () => {
  window.parent.postMessage('子页面即将关闭', '*');
});

unload - 子页面已卸载

iframe.addEventListener('unload', () => {
  console.log('iframe 内容已卸载');
});

sandbox 属性详解

sandbox：限制 iframe 内内容的权限，比如禁止脚本执行、表单提交等。常见值包括：

• allow-scripts：允许脚本运行；
• allow-forms：允许表单提交；
• allow-same-origin：允许 iframe 内的内容被认为与父页面同源（这非常危险，需谨慎使用）。

1. 同源 iframe（无 sandbox 属性）

如果 <iframe> 的 src 与父页面同源（协议、域名、端口相同）：

• 完全访问权限
  • iframe 内的 JavaScript 可以操作父页面的 DOM（如 parent.document）。
  • 父页面的 JavaScript 也可以操作 iframe 的 DOM（如 iframe.contentDocument）。
• 无额外限制
  • 可以执行脚本、提交表单、弹窗、加载插件等。
  • 可以访问 localStorage、Cookie 等存储。
• 典型用途
  • 微前端架构（同源子应用）。
  • 模块化页面拆分。

<!-- 父页面：https://example.com/parent.html -->
<iframe src="https://example.com/child.html"></iframe>

<!-- child.html 可以完全访问 parent.html 的 DOM -->
<script>
  window.parent.document.body.style.backgroundColor = "red";
</script>

2. 跨域 iframe（无 sandbox 属性）

如果 <iframe> 的 src 与父页面不同源：

• 受同源策略限制
  • iframe 内的 JavaScript 无法访问父页面的 DOM（parent.document 会报错）。
  • 父页面的 JavaScript 无法访问 iframe 的 DOM（iframe.contentDocument 会报错）。
• 但仍可能带来风险
  • iframe 可以自由执行脚本、弹窗、提交表单（可通过csp限制）。
  • 可能被用于点击劫持（Clickjacking）攻击。

<!-- 父页面：https://example.com -->
<iframe src="https://malicious-site.com"></iframe>

<!-- malicious-site.com 虽然不能访问父页面，但可以诱导用户点击 -->
<style>
  iframe {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

3. 带有 sandbox 属性

如果只写 sandbox 而不指定任何允许的权限，此时 iframe 内的网页将受到以下限制（无论是否同源）：

可以通过 sandbox="allow-xxx" 来按需启用特定功能，例如：

<!-- 允许脚本执行和表单提交 -->
<iframe src="..." sandbox="allow-scripts allow-forms"></iframe>

常用 allow- 选项：

安全最佳实践：

• 最小权限原则：只允许必要的功能
• 避免 allow-same-origin 滥用：危险！iframe 可以操控父页面

iframe 安全性考虑

1. 点击劫持

攻击者可以利用 iframe 将一个网页嵌入到透明的 iframe 中，诱导用户点击，从而劫持用户操作。这种情况下，用户以为在操作当前页面，实际上在点击 iframe 内的内容。

解决方法：在被嵌入的页面中设置 X-Frame-Options 响应头（需服务器配置），阻止页面被嵌入：

# 完全禁止被嵌入
Content-Security-Policy: frame-ancestors 'none';

# 仅允许同源嵌入
Content-Security-Policy: frame-ancestors 'self';

# 允许指定域名嵌入
Content-Security-Policy: frame-ancestors https://trusted-site.com;

优势：支持多域名白名单；现代浏览器优先支持 CSP 而非 X-Frame-Options

2. XSS

[[013.XSS 攻击|XSS 攻击]]

风险场景：

<!-- 动态src导致的DOM型XSS -->
<iframe src=javascript:alert(1)></iframe>

防护 csp 属性：

<iframe csp="script-src 'self'"></iframe>

优先通过后端设置 CSP：更安全、可靠、易维护

3. 跨域通信问题

不同域名下的页面不能直接通过 JavaScript 进行交互。这是为了防止跨站脚本攻击（XSS）。不过可以通过 postMessage 实现安全的跨域通信（见下文），但要注意跨域数据泄露。

iframe 跨域通信

由于浏览器的安全性限制，两个不同源的页面不能直接访问彼此的 DOM、不能通过常规的 JavaScript 互相操控。但可以使用 window.postMessage() 方法，在不同源的 iframe 和父页面之间安全地传递消息。

1. postMessage

父页面向 iframe 发送消息：

在父页面中，可以使用 iframe.contentWindow.postMessage 来向 iframe 发送消息

<iframe id="myFrame" src="<https://www.another-site.com>"></iframe>

<script>
  const iframe = document.getElementById('myFrame');
  iframe.contentWindow.postMessage('Hello from parent', '*');
</script>

postMessage 函数接受 2 个参数：第一个是传递的数据，第二个是传递给哪些源（域名）

这里的 '*' 表示消息可以发送到任何来源的 iframe。为防止跨域数据泄露起见，最好指定一个确切的目标源。

2. onMessage

iframe 接收消息并回应：

在 iframe 页面中，使用 window.addEventListener('message', callback) 来监听消息：

<script>
  window.addEventListener('message', function(event) {
    console.log('event object:', event);
    // 确认消息来源的安全性
    if (event.origin === 'https://www.example.com') {
      // 执行一些操作
      console.log(event.data)
      // 回复消息
      event.source.postMessage('Hello from iframe', event.origin);
    }
  });
</script>

3. 完整的安全通信流程

父页面 → 子 iframe

/* 父页面代码 */
const iframe = document.querySelector('iframe');

// 发送时限制目标origin
iframe.contentWindow.postMessage(
  { type: 'UPDATE', payload: { color: 'red' } },
  'https://child-domain.com' // 确保只发送到指定域名
);

/* 子iframe代码 */
window.addEventListener('message', (event) => {
  // 验证消息来源
  if (event.origin !== 'https://parent-domain.com') return;
  
  // 安全处理消息
  if (event.data.type === 'UPDATE') {
    applyStyles(event.data.payload);
  }
});

子 iframe → 父页面

/* 子iframe代码 */
window.parent.postMessage(
  { type: 'READY' },
  'https://parent-domain.com' // 确保只发送到父页面
);

/* 父页面代码 */
window.addEventListener('message', (event) => {
  // 验证消息来源（需允许多个子域名时）
  const allowedOrigins = [
    'https://child-domain.com',
    'https://app.child-domain.com'
  ];
  
  if (!allowedOrigins.includes(event.origin)) return;
  
  if (event.data.type === 'READY') {
    initApp();
  }
});

为什么需要双重验证？

4. 安全增强技巧

消息签名（防篡改）

// 发送方签名
const payload = { data: '敏感操作' };
const signature = crypto.sign('SHA256', payload, privateKey);

parent.postMessage(
  { payload, signature },
  'https://parent-domain.com'
);

// 接收方验证签名
if (!crypto.verify(event.data.payload, event.data.signature, publicKey)) {
  throw new Error('消息被篡改！');
}

防重放攻击

// 发送方添加时间戳和 nonce
const message = {
  data: '支付请求',
  timestamp: Date.now(),
  nonce: crypto.randomUUID()
};

// 接收方检查时效性
if (Date.now() - event.data.timestamp > 5000) {
  throw new Error('消息已过期');
}