嵌入内容是让用户留在您网站上的最佳方式，同时还可以分享其他网页或网站的内容。这可以是嵌入式推文，它会以 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，您可以向 sandbox 属性明确添加实参。
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
sandbox 规范有许多可能的值，包括 allow-forms、allow-same-origin、allow-popups 等。
“权限”政策
随着网络功能的日益强大，我们创建了权限政策来管理所有这些功能的权限。权限政策可以应用于父网站和 iframe 内容。使用 allow 属性，还可以将授予父网站的权限授予 iframe。
<iframe src="https://example.com" allow="fullscreen"></iframe>
使用 Fenced Frames 嵌入
围栏框架 (<fencedframe>) 是一种用于嵌入内容的拟议 HTML 元素，类似于 iframe。与 iframe 不同，围栏框架会限制与嵌入上下文的通信，以允许框架访问跨网站数据，而不会将其与嵌入上下文共享。同样，父页面上的第一方数据无法与围栏框架共享。
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames 是一项 Privacy Sandbox 技术提案，建议顶级网站对数据进行分区。许多 Privacy Sandbox 提案旨在满足跨网站使用情形，而无需使用第三方 Cookie 或其他跟踪机制。某些 Privacy Sandbox API 可能需要选择文档才能在 Fenced Frame 中呈现。
例如，将为 FLEDGE API 广告竞价的胜出者创建一个受限框架。FLEDGE API 将提供一个不透明的来源，即一个与位置无关的 URN 方案，可在围栏框架内呈现。不透明来源允许网站在其网站上显示内容，而无需向网站所有者透露广告来源网址。
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
最终，围栏框架不会取代 iframe。您无需使用这些功能。 建议使用围栏框架，以便在需要于同一网页上显示来自不同顶级分区的数据时，提供更私密的框架。
通过门户嵌入
传送门 (<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>。我们将继续分享围栏框架提案的进展情况。