嵌入內容是讓使用者留在網站上，同時分享其他網頁或網站內容的最佳方式。這可以是嵌入式推文，顯示方式與 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 可能需要選取文件在受限框架內顯示。
舉例來說，系統會為 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>)，以改善安全性和樣式。我們會持續分享圍欄廣告框提案的進度。