嵌入式内容是让用户留在您的网站上，同时分享来自其他网页或网站的内容的最佳方式。这种内容可以像嵌入式推文一样小，按照 Twitter 的样式和格式显示。它可以大到嵌入到您自己的网站中，是一个完全独立的网站，例如嵌入式 Shopify 商店，访问者无需离开您的网站即可进行购买。
在我们嵌入内容时，确保网站的安全比以往任何时候都更加重要。
开发者可通过多种方式在网站上嵌入内容。最常见的方法是使用 <iframe>，它可以让您只通过一个网址将任何内容嵌入到您的网站中。您已经可以添加 sandbox 属性来提高 iframe 的安全性。
或者，您也可以使用建议的 HTML 元素：
<fencedframe>是一种可保护隐私的嵌入第三方内容的方式。- 建议使用
<portal>，以实现更顺畅的页面转换效果。
请继续阅读下文，了解如何提高嵌入内容的安全性。
使用 iframe 嵌入
iframe 可用于各种用例，例如向联系信息页面添加地图或表单，以及展示广告。
<iframe src="https://example.com/maps"></iframe>
每个 iframe 都有自己的浏览上下文，以及自己的会话记录和文档。嵌入 iframe 的上下文称为父级浏览上下文。parent
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 等。
权限政策
随着网络功能越来越强大的功能不断开发，我们也制定了权限政策来管理所有这些功能的权限。权限政策可应用于父级网站和 iframe 内容。也可使用 allow 属性将授予父级网站的权限授予 iframe。
<iframe src="https://example.com" allow="fullscreen"></iframe>
使用围栏框架嵌入
围栏框架 (<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>
归根结底，围栏框架不会取代 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>）以改进安全性和样式。随着围栏框架提案的进展，我们将继续分享其进度。
主打图片由 Jackson So 提供。