嵌入内容是让用户留在您网站上并分享其他网页或网站上的内容的最佳方式。这可以小到嵌入式推文，以 Twitter 的风格和格式显示。它可以是嵌入到您自己的网站上的完全独立的网站，例如嵌入的 Shopify 商店，访问者无需离开您的网站即可进行购买。
现在，在嵌入内容时确保网站的安全性比以往任何时候都更加重要。
开发者可以通过多种方式在网站上嵌入内容。最常见的技术是使用 <iframe>，借助它，您只需使用网址即可将任何内容嵌入到您的网站中。您现在可以添加 sandbox 属性，以提高 iframe 的安全性。
或者，您也可以使用建议的 HTML 元素：
<fencedframe>是一种可保护隐私的方式，可用于嵌入第三方内容。- 建议使用
<portal>以实现更流畅的网页转换。
请继续阅读，了解如何提高嵌入内容的安全性。
使用 iframe 嵌入
iframe 可用于各种用例，例如向联系信息页面添加地图或表单，以及展示广告。
<iframe src="https://example.com/maps"></iframe>
每个 iframe 都有自己的浏览上下文，以及自己的会话记录和文档。嵌入 iframe 的上下文称为父级浏览上下文。
在 iframe 中显示的第三方内容可以通过 postMessage() 与父级网站互动。这样，开发者就可以在浏览上下文之间发送任意值。消息接收器可以使用事件监听器 onmessage 接收这些值。
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
通过 sandbox 属性增强了安全性
如果在 iframe 中部署了恶意内容，可能会执行意外操作（例如 JavaScript 执行或表单提交）。为避免这种情况，sandbox 属性会限制 iframe 中的可执行 API，并停用可能有害的功能。
<iframe src="https://example.com" sandbox></iframe>
沙盒可能会导致对您的嵌入内容至关重要的某些 API 不可用。如需允许停用的 API，您可以向沙盒属性明确添加实参。
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
sandbox 规范有多个可能的值，包括 allow-forms、allow-same-origin、allow-popups 等。
“权限”政策
随着越来越强大的 Web 功能的开发，我们创建了权限政策来管理所有这些功能的权限。权限政策可应用于父级网站和 iframe 内容。您还可以使用 allow 属性将授予父网站的权限授予 iframe。
<iframe src="https://example.com" allow="fullscreen"></iframe>
使用 Fenced Frames 进行嵌入
围栏框架 (<fencedframe>) 是针对嵌入内容提出的 HTML 元素，类似于 iframe。与 iframe 不同，围栏框架会限制与其嵌入上下文的通信，以允许框架访问跨网站数据，而无需与嵌入上下文共享这些数据。同样，父级页面上的第一方数据也无法与围栏框共享。
<fencedframe src="https://3rd.party.example"></fencedframe>
围栏框架是一项 Privacy Sandbox 提案，建议顶级网站应对数据进行分区。许多 Privacy Sandbox 提案旨在在不使用第三方 Cookie 或其他跟踪机制的情况下满足跨网站使用情形。某些 Privacy Sandbox API 可能要求选择要在围栏框中呈现的文档。
例如，系统会为 FLEDGE API 广告竞价的胜出者创建一个围栏框。FLEDGE API 将提供不透明来源，即与位置无关的 URN 架构，可在围栏帧内呈现。借助不透明来源，网站可以在其网站上展示内容，而无需向网站所有者透露广告来源网址。
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
最终，fenced 帧不会取代 iframe。您不必使用这些功能。当需要在同一页面上显示来自不同顶级分区的不同数据时，建议使用封闭式帧，以获得更私密的帧。
通过门户嵌入
Portal (<portal>) 是一种提议的 HTML 元素，具有独立的浏览上下文，可以改进网页转换体验。门户会嵌入 iframe 等内容，但用户无法访问门户的代码。门户仅供查看，用户无法与之互动。
门户具有多页应用的低复杂性，同时又具有单页应用的流畅转换。这些转换可以带有动画效果，快速替换浏览器窗口中的内容。
<portal src="https://example.com/"></portal>
门户规范仍处于早期开发阶段。
用于嵌入的其他 HTML 元素
在 Web 历史长河中，人们提出了许多 HTML 元素，并创建了许多用于嵌入内容的 API。在很长一段时间内，人们通常会创建包含多个 <frame> 和 <frameset> 元素的网站。包含多个 <frameset> 元素的网站会在地址栏中显示父级网页的网址，无论许多单独框架的来源如何。这使得用户难以分享指向网站内内容的链接。这些 API 现已废弃。
曾经有一段时间，插件技术（例如 Java <applet> 元素）被用于涵盖其他用例。后来，此元素被 <object> 元素取代。这两个元素通常用于显示 Flash 插件，但也用于显示其他 HTML 元素（类似于 iframe）。其他元素（例如 <canvas>、<audio>、<video> 和 <svg>）已使 <object> 和 <applet> 元素过时。
虽然 <object> 和 <embed> 尚未被正式废弃，但最好还是避免使用它们，尤其是因为它们存在一些异常行为。<applet> 已于 2017 年从 HTML 规范中移除。
总结
您可以使用现有的 iframe 规范，将内容安全地嵌入到任何网站中。我们还提议了更多 HTML 元素（包括 <fencedframe> 和 <portal>），以改进安全性和样式。我们将继续分享围栏帧提案的进展。