什么是 iframe？它有哪些常用属性和安全注意事项？

iframe（Inline Frame）是 HTML 中的一个内联框架元素，它允许在当前网页中嵌入另一个独立的 HTML 文档。iframe 创建了一个独立的浏览器上下文，拥有自己的文档对象模型（DOM）、JavaScript 执行环境和 CSS 样式上下文。

基本语法

html
<iframe src="https://example.com" width="600" height="400"></iframe>

常用属性

• src: 指定要嵌入的页面 URL
• width/height: 设置 iframe 的宽度和高度
• name: 给 iframe 命名，可用于链接的 target 属性
• sandbox: 限制 iframe 内容的安全策略
• allowfullscreen: 允许 iframe 内容全屏显示
• loading: 懒加载设置（lazy/eager）
• referrerpolicy: 控制引用信息的发送策略

安全注意事项

1. 同源策略: iframe 内容必须遵守同源策略，跨域访问受限
2. sandbox 属性: 建议始终使用 sandbox 属性限制 iframe 的权限
3. X-Frame-Options: 父页面可以通过 HTTP 头控制是否允许被嵌入
4. Content Security Policy (CSP): 使用 frame-ancestors 指令控制嵌入权限

iframe 的优缺点

优点:

• 实现页面内容的模块化和隔离
• 便于集成第三方内容（如视频、地图、广告）
• 独立的 CSS 和 JavaScript 环境，避免样式冲突

缺点:

• SEO 友好度较低，搜索引擎难以索引 iframe 内容
• 增加页面加载时间和资源消耗
• 移动端兼容性和用户体验可能受影响
• 跨域通信复杂，需要使用 postMessage API