HTML中的嵌入技術

到目前爲止，您應該掌握了將圖像\視頻和音頻嵌入到網頁上的訣竅了。此刻，讓咱們進行深刻學習，來看一些能讓您在網頁中嵌入各類內容類型的元素： <iframe>, <embed> 和<object> 元素。<iframe>用於嵌入其餘網頁，另外兩個元素則容許您嵌入PDF，SVG，甚至Flash（種正在被淘汰的技術，但您仍然會時不時的看到它）。

1.1      嵌入的簡史

好久之前，在網絡上使用框架建立網站 - 有一小部分存儲於我的HTML頁面的網站是受歡迎的。這些嵌入在一個稱爲框架集的主文檔中，容許您指定每一個框架填充的屏幕上的區域，而不是像表格的列和行的大小。這些被認爲是90年代中期至90年代的涼爽的高度，有證據代表，將網頁分解成較小的塊，這樣更適合下載速度 - 尤爲是網絡鏈接如此緩慢。然而，他們有不少問題，遠遠超過網絡速度更快的任何積極因素，因此你看不到它們被使用了。

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

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

1.2      Iframe詳解

是否是很簡單又有趣呢？<iframe>元素旨在容許您將其餘Web文檔嵌入到當前文檔中。這很適合將第三方內容歸入您的網站，您可能沒法直接控制，也不但願實現本身的版本 - 例如來自在線視頻提供商的視頻，Disqus等評論系統，在線地圖提供商，廣告橫幅等。您經過本課程使用的實時可編輯示例使用<iframe> 實現。

關於<iframe>有一些嚴重的安全隱患須要考慮，但這並不意味着你不該該在你的網站上使用它們 - 它只須要一些知識和仔細的思考。讓咱們更詳細地探索這些代碼。假設您想在其中一個網頁上加入MDN詞彙表，您能夠嘗試如下方式：

<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">     Fallback link for browsers that don't support iframes   </a> </p> </iframe>

此示例包括使用如下所需的基本要素<iframe>：

allowfullscreen

若是設置，<iframe>則可使用全屏API放置在全屏模式（稍微超出本文的範圍）。

frameborder

若是設置爲1，則會告訴瀏覽器在此框架和其餘框架之間繪製邊框，這是默認行爲。0刪除邊框。不推薦這樣設置，由於在CSS中能夠更好地實現相同的效果。border: none;

src

該屬性與<video>/<img>同樣包含指向要嵌入的文檔的URL的路徑。

width 和 height

這些屬性指定您想要的iframe的寬度和高度。

備選內容

與<video>等其餘相似元素相同，您能夠在打開和關閉<iframe></iframe>標籤之間包含備選內容，若是瀏覽器不支持，將會顯示<iframe>。在這種狀況下，咱們已經添加了一個連接到頁面。您幾乎不可能遇到任何不支持<iframe>的瀏覽器。

sandbox

該屬性比其餘<iframe>功能（例如IE 10及更高版本）稍微更現代的瀏覽器工做，要求提升安全性設置; 咱們將在下一節中再說一遍。

注意：爲了提升速度，在主內容完成加載後，使用JavaScript設置iframe的src屬性是個好主意。這使您的頁面能夠更快地使用，並減小您的官方頁面加載時間（重要的SEO指標）。

1.3      安全隱患

以上咱們提到了安全問題 - 如今咱們來詳細介紹一下這一點。咱們並不指望您第一次徹底理解全部這些內容; 咱們只想讓您意識到這一問題，併爲您提供參考，讓您更有經驗，並開始考慮<iframe>在您的實驗和工做中使用。此外，沒有必要懼怕和不使用<iframe>- 你只須要謹慎一點。繼續看下去。

瀏覽器製造商和Web開發人員已經學會了如何使用iframe 做爲網絡上的壞人（一般被稱爲黑客，或更準確地說是破解者）的共同目標（官方術語：攻擊向量），若是他們試圖惡意修改您的網頁或欺騙人們進行不想作的事情，例如顯示用戶名和密碼等敏感信息。所以，規範工程師和瀏覽器開發人員已經開發了各類安全機制，使其更加安全，而且還有最佳實踐要考慮 - 咱們將在下面介紹其中的一些。

單擊劫持是一種常見的iframe攻擊，黑客將隱藏的iframe嵌入到您的文檔中（或將您的文檔嵌入本身的惡意網站），並使用它來捕獲用戶的交互。這是誤導用戶或竊取敏感數據的常見方式。

一個快速的例子，儘管如此 - 嘗試加載在瀏覽器中上面的例子 - 你能夠在Github上找到它（參見源代碼）。你不會看到頁面上顯示的內容，若是你點擊瀏覽器開發者工具中的控制檯，你會看到一條消息，告訴你爲何。在Firefox中，您會被X-Frame-Options拒絕加載：https://developer.mozilla.org/en-US/docs/Glossary不容許框架化。這是由於構建MDN的開發人員已經在服務於網站頁面的服務器上設置了一個不容許嵌入<iframe>的設置（請參閱配置CSP指令）這是有必要的 - 整個MDN頁面嵌入在其餘頁面中並不真實，除非您想要將其嵌入到您的網站上並將其聲稱爲本身的內容，或嘗試經過如下方式竊取數據：點擊劫持，這兩個都是很是糟糕的事情。此外，若是每一個人都開始這樣作，全部額外的帶寬將開始花費Mozilla不少資金。

1.4      只有在必要時嵌入

有時嵌入第三方內容（例如優酷視頻和地圖）是有意義的，但若是您只在徹底須要時嵌入第三方內容，您能夠省去不少麻煩。網絡安全的一個很好的經驗法則是「你怎麼謹慎都不爲過，若是你決定要作這件事，多檢查一遍；若是是別人作的，在被證實是安全的以前，都假設這是危險的。」

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

若是內容得到許可，你必須遵照許可條款。例如，MDN上的內容是在CC-BY-SA下許可的，這意味着，若是你要引用咱們的內容，就必須用適當的方式註明來源，即便你對內容作了實質性的修改。

1.5      使用 HTTPS

HTTPS是HTTP的加密版本。您應該儘量使用HTTPS爲您的網站提供服務：

HTTPS減小了遠程內容在傳輸過程當中被篡改的機會，

HTTPS防止嵌入式內容訪問您的父文檔中的內容，反之亦然。

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

1.6      始終使用sandbox屬性

你想給攻擊者儘量少的機會在你的網站上作壞事，那麼你應該只給嵌入式內容工做所需的權限。固然，這也適用於你本身的內容。一個代碼能夠適當使用或用於測試的容器，但不能對其餘代碼庫（意外或惡意）形成任何損害稱爲沙箱。

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

若是絕對須要，您能夠逐個添加權限（sandbox=""屬性值內） - 請參閱sandbox全部可用選項的參考條目。其中重要的一點是，你永遠不該該同時添加allow-scripts和allow-same-origin到你的sandbox屬性中-在這種狀況下，嵌入的內容能夠繞過，從執行腳本中止網站同源安全策略，並使用JavaScript來關閉徹底沙箱。

注意：若是攻擊者能夠直接（外部iframe）愚弄人們訪問惡意內容，Sandboxing不提供任何保護。若是某些內容有多是惡意的（例如，用戶生成的內容），請將其從不一樣的域服務到您的主要網站。

1.7      配置CSP指令

CSP表明內容安全策略，它提供一組HTTP標頭（由web服務器發送時與元數據一塊兒發送的元數據），旨在提升HTML文檔的安全性。在<iframe>安全性方面，您能夠將服務器配置爲發送適當的X-Frame-Options  標題。這樣作能夠防止其餘網站在其網頁中嵌入您的內容（這將致使點擊和一系列其餘攻擊），正如咱們以前看到的那樣，MDN開發人員已經作了這些工做。

注意：您能夠閱讀Frederik Braun的帖子在X-Frame-Options安全性頭上來獲取有關此主題的更多背景信息。顯然，在這篇文章中已經解釋得很清楚了。