iframe 元素：src 与 sandbox

<iframe> 元素会在当前页面中嵌入另一个 HTML 文档。每个内嵌框架都有自己的浏览上下文、DOM 和 JavaScript 作用域。未经明确许可，内嵌框架中的内容无法访问父页面的 DOM。

将源地址属性设置为要嵌入的网址：<iframe src="https://example.com" width="800" height="600">。内嵌框架会创建新的浏览上下文。出于无障碍要求，必须设置标题属性：title="Embedded map"。

sandbox 会限制内嵌框架中的内容：默认禁用脚本、表单、弹出窗口和插件。添加特定权限可以恢复相应功能：sandbox="allow-scripts allow-same-origin"。

脚本权限：启用 JavaScript。相同源权限：允许将内嵌框架视为同源内容（访问 localStorage 时需要）。表单权限：启用表单提交。弹出窗口权限：允许使用 window.open()。请只授予必要的最小权限。

跨源内嵌框架无法访问父页面的 DOM——parent.document 会抛出安全错误。跨源框架之间通过 postMessage 通信：iframe.contentWindow.postMessage(data, origin)。

从父页面向内嵌框架发送消息：iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com")。在内嵌框架中监听消息：window.addEventListener("message", handler)。处理消息前务必验证 event.origin。

在内嵌框架上设置 loading="lazy"，可以延迟加载，直到内嵌框架接近视口为止，从而减少页面初始加载时间。这适用于首屏下方的地图、视频嵌入内容和暂时不可见的社交媒体组件。

每个内嵌框架都会加载单独的 HTML 文档、CSS、JavaScript 和资源，这会产生显著的资源开销。对于可以作为代码片段嵌入的内容，请避免使用内嵌框架。请对首屏以下的内嵌框架进行延迟加载。请考虑使用外观占位模式（显示占位内容，在点击时加载）。

请控制内嵌框架的滚动行为：scrolling="no" 会禁用滚动条（已弃用；请在内嵌框架上使用 CSS 溢出隐藏）。现代做法是将内嵌框架的高度设置为与内容高度一致，从而不再需要内部滚动条。

allow 属性会向内嵌框架授予权限策略功能：allow="camera; microphone; fullscreen"。即使父级源未使用这些功能，这也能让内嵌框架请求摄像头访问权限、麦克风访问权限和全屏 API。

YouTube 和 Google 地图会提供内嵌框架嵌入代码，其中包含用于全屏和自动播放的 allow 属性。请始终添加 title="视频标题" 以提升屏幕阅读器的可访问性。第三方嵌入代码通常不会添加 sandbox 属性——请查阅其文档了解安全方面的指导。

在没有设置任何值时，sandbox 属性默认会对内嵌框架执行什么操作？

内嵌框架会在隔离的浏览上下文中嵌入外部文档。sandbox 属性会限制内嵌框架的功能，请仅授予最低限度的必要权限。postMessage 支持安全的跨源通信。延迟加载会推迟首屏以下内嵌框架的资源开销。allow 属性会向受信任的第三方嵌入内容授予权限策略功能。