Web - 第十二章 | HTML 從對像到iframe - 其他嵌入技術

目前已經了解到如何在網頁上，插入圖片、影片、音樂⋯等等，接下來我們要在網頁上面在嵌入其他的內容元素、其他網站內容⋯之類的。

嵌入的簡史

很久以前，很流行在網路上使用框架建立網站—網站的一小部分存儲於單獨的HTML頁面中。這些被嵌入在一個稱為框架集的主文件中，它允許你指定每個框架能夠填充在屏幕上的區域，而不像調整表格的列和行的大小。這些做法在90年代中期至90年代後期被認為是比較酷的，有證據表明，將網頁分解成較小的塊，這樣有利於下載速度—值得注意的是當時網路連接速度十分緩慢。然而，這些技術有很多問題，隨著網路速度越來越快，這些技術帶來的問題遠超過它們帶來的積極因素，所以你再也看不到它們被使用了。

一小段時間之後（20世紀90年代末，21世紀初），插件技術變得非常受歡迎，例如Java Applet和Flash —這些技術允許網路開發者將豐富的內容嵌入到網頁中，例如視頻和動畫等，這些內容不能通過HTML單獨實現。嵌入這些技術是通過諸如和較少使用的元素來實現的，當時它們非常有用。由於許多問題，包括可訪問性、安全性、文件大小等，它們已經過時了; 如今，大多數移動設備不再支持這些插件，桌面端也逐漸不再支持。<object><embed>

最後，元素出現了（連同其他嵌入內容的方式，如，等），它提供了一種將整個web頁嵌入到另一個網頁的方法，看起來就像那個web頁是另一個網頁的一個或其他元素一樣。現在經常被使用。<iframe><canvas><video><img><iframe>

嵌入類型的使用

大家都非常熟悉Youtube，但很多人不了解它所提供的一些分享功能。讓我們來看看Youtube如何讓我們通過在頁面中嵌入喜歡的視頻。<iframe>

• 首先，去Youtube找一個喜歡的視頻。
• 在視頻下方，你會看到一個共享按鈕-點擊查看共享選項。
• 選擇“ 嵌入”選項卡，你將得到一些<iframe>代碼-複製一下。
• 貼在線上程式碼編輯器，看看輸出結果。

1

<iframe width="560" height="315" src="https://www.youtube.com/embed/lp-EO5I60KA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

你還可以試試在示例中嵌入Google地圖：

• 去Google地圖找一個喜歡的地圖。
• 點擊UI左上角的“漢堡菜單”（三條水平線）。
• 選擇共享或嵌入地圖選項。
• 選擇嵌入地圖選項，這將給你一些<iframe>代碼-複製一下。
• 貼在線上程式碼編輯器，看看輸出結果。

1

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d14459.843052316102!2d121.57037534999999!3d25.0354056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1szh-TW!2stw!4v1558488734676!5m2!1szh-TW!2stw" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Iframe詳解

Iframe適合將第三方內容納入你的網站，你可能無法直接控制，也不希望實現自己的版本-例如來自在線視頻提供商的視頻，Disqus等評論系統，在線地圖提供商，廣告橫幅等。你通過本課程使用的實時可編輯示例就是使用實現的。<iframe><iframe>

我們會在後面提到，關於<iframe>有一些嚴重的安全隱患需要考慮，但這並不意味著你不應該在你的網站上使用它們—它只需要一些知識和仔細地思考。讓我們更詳細地探索這些代碼。

1
2
3
4
5
6
7

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
    不支持iframe的瀏覽器的後備連結
  </a> </p>
</iframe>

<iframe>基本要素：

• allowfullscreen
  如果設置，<iframe>則可以通過全屏API設置為全屏模式（稍微超出本文的範圍）。

• frameborder
  如果設置為1，則會告訴瀏覽器在此框架和其他框架之間繪製邊框，這是默認行為。0刪除邊框。不推薦這樣設置，因為在CSS中可以更好地實現相同的效果。border: none;。

• src
  該屬性與/ 一樣包含指向要嵌入文件的URL路徑。<video><img>。

• width 和 height
  這些屬性指定你想要的iframe的寬度和高度。

• 備選內容
  與等其他類似元素相同，你可以在標籤之間包含備選內容，如果瀏覽器不支持，將會顯示備選內容，這種情況下，我們已經添加了一個到該頁面的連結。現在你幾乎不可能遇到任何不支持的瀏覽器。<video><iframe></iframe><iframe><iframe>。

• sandbox
  該屬性需要在已經支持其他<iframe>功能（例如IE 10及更高版本）但稍微更現代的瀏覽器上才能工作，該屬性可以提高安全性設置。

注：為了提高速度，在主內容完成加載後，使用JavaScript設置iframe的src屬性是個好主意。這使你的頁面可以更快地被使用，並減少你的官方頁面加載時間（重要的SEO指標）。

安全隱患

以上我們提到了安全問題-現在我們來詳細介紹一下這一點。我們並不期望你第一次就能完全理解所有內容;我們只想讓你意識到這一問題，在你更有經驗並開始考慮在你的實驗和工作中使用<iframe>時為你提供參考。此外，沒有必要害怕和不使用<iframe>—你只需要謹慎一點。繼續看下去吧…

瀏覽器製造商和Web開發人員了解到網路上的壞人（通常被稱為黑客，或更準確地說是破解者），如果他們試圖惡意修改你的網頁或欺騙人們進行不想做的事情時常把iframe作為共同的攻擊目標（官方術語：攻擊向量），例如顯示用戶名和密碼等敏感訊息。因此，規範工程師和瀏覽器開發人員已經開發了各種安全機制，使<iframe>更加安全，這有些最佳方案值得我們考慮-我們將在下面介紹其中的一些。

單擊劫持是一種常見的iframe攻擊，黑客將隱藏的iframe嵌入到你的文件中（或將你的文件嵌入到他們自己的惡意網站），並使用它來捕獲用戶的交互。這是誤導用戶或竊取敏感資料的常見方式。

一個快速的例子—嘗試在瀏覽器中加載上面的例子。你將不會看到任何內容，但如果你點擊瀏覽器開發者工具中的控制台，你會看到一條消息，告訴你為什麼沒有顯示內容。在Firefox中，你會被告知：“X-Frame-Options拒絕加載https://developer.mozilla.org/en-US/docs/Glossary”。 這是因為構建MDN的開發人員已經在網站頁面的伺服器上設置了一個不允許被嵌入到<iframe>的設置（請參閱配置CSP指令）這是有必要的—整個MDN頁面被嵌入在其他頁面中沒有多大意義，除非你想要將其嵌入到你的網站上並將其聲稱為自己的內容，或嘗試通過單擊劫持來竊取資料，這都是非常糟糕的事情。此外，如果每個人都這樣做，所有額外的帶寬將花費Mozilla很多資金。

只有在必要時嵌入

有時嵌入第三方內容（例如YouTube視頻和地圖）是有意義的，但如果你只在完全需要時嵌入第三方內容，你可以省去很多麻煩。網路安全的一個很好的經驗法則是“你怎麼謹慎都不為過，如果你決定要做這件事，多檢查一遍；如果是別人做的，在被證明是安全的之前，都假設這是危險的。”

除了安全問題，你還應該意識到知識產權問題。無論在線內容還是離線內容，絕大部分內容都是有版權的，甚至是一些你沒想到有版權的內容（例如，Wikimedia Commons上的大多數圖片）。不要在網頁上展示一些不屬於你的內容，除非你是所有者或所有者給了你明確的、書面的許可。對於侵犯版權的懲罰是嚴厲的。再說一次，你再小心也不為過。

如果內容獲得許可，你必須遵守許可條款。例如，MDN上的內容是在CC-BY-SA下許可的，這意味著，如果你要引用我們的內容，就必須用適當的方式註明來源，即使你對內容做了實質性的修改。

使用HTTPS

HTTPS是HTTP的加密版本。你應該盡可能使用HTTPS為你的網站提供服務：

• HTTPS減少了遠程內容在傳輸過程中被篡改的機會，
• HTTPS防止嵌入式內容訪問你的父文件中的內容，反之亦然。

使用HTTPS需要一個安全證書，這可能是昂貴的（儘管 Let’s Encrypt讓這件事變得更容易），如果你沒有，可以使用HTTP來為你的父文件提供服務。但是，由於HTTPS的第二個好處，無論成本如何，你絕對不能使用HTTP嵌入第三方內容（在最好的情況下，你的用戶的Web瀏覽器會給他們一個可怕的警告）。所有有聲望的公司，例如Google Maps或Youtube，當你嵌入內容時，<iframe>將通過HTTPS提供-查看<iframe> src屬性內的URL。

注：Github頁面允許默認情況下通過HTTPS提供內容，因此對託管內容很有用。如果你正在使用不同的託管，並且不確定，請向你的託管服務商詢問。

始終使用sandbox屬性

你想給攻擊者盡可能少的機會在你的網站上做壞事，那麼你應該只給嵌入式內容工作所需的權限。當然，這也適用於你自己的內容。一個允許包含在其里的代碼以適當的方式執行或者用於測試，但不能對其他代碼庫（意外或惡意）造成任何損害的容器稱為沙盒。

未沙盒化(Unsandboxed)內容可以做得太多（執行JavaScript，提交表單，彈出窗口等）默認情況下，你應該使用沒有參數的sandbox屬性來強制執行所有可用的限制，如我們前面的示例所示。

如果絕對需要，你可以逐個添加權限（sandbox=””屬性值內） -請參閱sandbox所有可用選項的參考條目。其中重要的一點是，你永遠不應該同時添加allow-scripts和allow-same-origin到你的sandbox屬性中-在這種情況下，嵌入式內容可以繞過阻止站點執行腳本的同源安全策略，並使用JavaScript完全關閉沙盒。

注：如果攻擊者可以欺騙人們直接訪問惡意內容（在iframe之外），則沙盒無法提供保護。如果某些內容可能是惡意的（例如，用戶生成的內容），請保證其是從不同的域向你的主站點提供的。

配置CSP指令

CSP代表內容安全策略，它提供一組HTTP標頭（由web伺服器發送時與元資料一起發送的元資料），旨在提高HTML文件的安全性。在<iframe> 安全性方面，你可以將伺服器配置為發送適當的X-Frame-Options 標題。這樣做可以防止其他網站在其網頁中嵌入你的內容（這將導致點擊和一系列其他攻擊），正如我們之前看到的那樣，MDN開發人員已經做了這些工作。

注：你可以閱讀Frederik Braun的帖子在X-Frame-Options安全性頭上來獲取有關此主題的更多背景訊息。

和

<embed>和<object>元素的功能不同於<iframe> ——這些元素是用來嵌入多種類型的外部內容的通用嵌入工具，其中包括像Java小程序和Flash，PDF（可在瀏覽器中顯示為一個PDF插件）這樣的插件技術，甚至像視頻，SVG和圖像的內容！

注意：插件是一種對瀏覽器原生無法讀取的內容提供訪問權限的軟件。

然而，你不太可能使用這些元素- Applet幾年來一直沒有被使用；由於許多原因，Flash不再受歡迎（見下面的插件案例）；PDF更傾向於被連結而不是被嵌入；其他內容，如圖像和視頻都有更優秀、更容易元素來處理。插件和這些嵌入方法真的是一種傳統技術，我們提及它們主要是為了以防你在某些情況下遇到問題，比如內部網或企業項目等。

要嵌入插件內容，那麼你至少需要一些這樣的訊息：

注：<object>需要data屬性，type屬性或兩者。如果你同時使用這兩個，你也可以使用該typemustmatch屬性（僅在Firefox中實現）。typemustmatch保持嵌入文件不運行，除非type屬性提供正確的媒體類型。typemustmatch因此，當你嵌入來自不同來源的內容（可以防止攻擊者通過插件運行任意腳本）時，可以賦予重要的安全優勢。

嵌入Flash影片的範例：

1
2
3
4
5

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

Adobe Flash工俱生成的HTML往往更糟糕，使用嵌入<object>元素的<embed>元素來覆蓋所有的基礎（查看一個例子）。甚至有一段時間，Flash被成功地用作HTML5視頻的備用內容，但是這種情況越來越被認為是不必要的。

將PDF嵌入一個頁面的範例：

1
2
3
4

<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200" typemustmatch>
  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
</object>

PDF是紙與資料之間重要的階梯，但它們在可訪問性上有些問題，並且可能難以在小屏幕上閱讀。它們在一些圈子中仍然受歡迎，我們最好是用連結指向它們，而不是將其嵌入到網頁中，以便它們可以在單獨的頁面上被下載或被閱讀。

針對插件的情況

以前，插件在網路上是不可或缺的。還記得你必須安裝Adobe Flash Player才能在線觀看電影的日子嗎？並且你還會不斷地收到關於更新Flash Player和Java運行環境的煩人警報。Web技術已經變得更加強大，那些日子已經結束了。對於大多數應用程序，現在是停止依賴插件傳播內容，開始利用Web技術的時候了。

擴大你對大家的影響力。每個人都有一個瀏覽器，但插件越來越少，特別是在移動用戶中。由於Web在很大程度上不需要依賴插件而運行，所以人們寧願只是去競爭對手的網站而不是安裝插件。
從Flash和其他插件附帶的額外的可訪問性問題中擺脫。
避免額外的安全隱患。即使經過無數次補丁， Adobe Flash也是非常不安全的。2015年，Facebook的首席安全官Alex Stamos甚至要求Adobe停止Flash。
那你該怎麼辦？如果你需要交互性，HTML和JavaScript可以輕鬆地為你完成工作，而不需要Java小程序或過時的ActiveX / BHO技術。你可以使用HTML5視頻來滿足媒體需求，矢量圖形SVG，以及復雜圖像和動畫畫布。彼得·埃爾斯特（Peter Elst）幾年前已經提到，對於工作Adobe Flash極少是正確的工具，除了專門的遊戲和商業應用。對於ActiveX，即使微軟的Edge瀏覽器也不再支持。

這邊轉載了大量的文章和內容，但是每個部分我都有實際去做過，並了解過。這邊轉載主要是做筆記記錄。

註：以上參考了
MDN web docs 的 From object to iframe — other embedding technologies 文章。