嵌入式内容是让用户留在您的网站上,同时分享来自其他网页或网站的内容的最佳方式。这种内容可以像嵌入式推文一样小,按照 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 提供。