嵌入内容是让用户留在您网站上并分享其他网页或网站上的内容的最佳方式。可以小到以 Twitter 的样式和格式显示的嵌入式 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 frame (<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 元素
在整个网络历史记录中，已提议使用许多 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>），以改进安全性和样式。我们将继续分享围栏帧提案的进展。