如要讓使用者留在網站上，同時分享其他網頁或網站的內容，嵌入內容是最佳做法。這可以縮小到以 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 不同的是，圍欄頁框會限制與 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。您不必使用。 如果同一個頁面必須顯示不同頂層分區的資料，則建議使用 Fenced Frame，以使用更私密的框架。
透過入口網站嵌入
入口網站 (<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>) 以改善安全性和樣式。隨著新功能的進展，我們會繼續分享圍欄影格 (Fenced Frames) 的進度。
主頁橫幅由 Jackson So 提供。