嵌入內容是讓使用者留在網站上的最佳方式，同時還能分享其他網頁或網站的內容。例如內嵌推文，這類推文會以 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>
Sandbox 可能會停用對嵌入內容而言相當重要的 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 不同，Fenced Frame 會限制與嵌入環境的通訊，允許框架存取跨網站資料，但不與嵌入環境共用。同樣地，父項頁面的第一方資料也無法與設有安全防護的影格共用。
<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 元素
在網路發展歷程中，曾有許多提議的 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>。我們會持續分享設有圍欄的影格提案的進展。