From object to iframe — other embedding technologies

嵌入的簡史

很久以前，在網(wǎng)絡(luò)上，很受歡迎的是使用框架來創(chuàng)建網(wǎng)站 - 網(wǎng)站的小部分存儲在各個(gè)HTML頁面中。 這些內(nèi)嵌在稱為框架集的主文檔中，這允許您指定屏幕上每個(gè)框架填充的區(qū)域，而不是像調(diào)整表格的列和行一樣。 這些被認(rèn)為是90年代中后期的冷靜程度，有證據(jù)表明，將網(wǎng)頁拆分成更小的塊，這樣更適合下載速度 - 尤其是當(dāng)網(wǎng)絡(luò)連接速度很慢時(shí)。 然而，他們有很多問題，遠(yuǎn)遠(yuǎn)超過任何陽性，因?yàn)榫W(wǎng)絡(luò)速度更快，所以你不會看到他們被使用了。

Java Applets\">稍后(90年代后期，21世紀(jì)初)，插件技術(shù)變得非常受歡迎，例如 Java Applets and Flash — these allowed web developers to embed rich content into webpages such as video and animations\">a>和 Flash - 這些允許網(wǎng)絡(luò)開發(fā)者將豐富的內(nèi)容嵌入到網(wǎng)頁(如視頻和動(dòng)畫)中，這只是不能通過單獨(dú)的HTML。嵌入這些技術(shù)是通過<object>, and the lesser-used?外部資源，其可以被視為圖像，嵌套瀏覽上下文或要由插件處理的資源。"> < object> ， a title ="HTML嵌入元素表示外部應(yīng)用程序或交互式內(nèi)容的集成點(diǎn)(換句話說， <embed>, and they were very useful at the time.\">，插件)。"> < embed> ，它們在當(dāng)時(shí)非常有用。由于許多問題，包括可訪問性，安全性，文件大小等等，它們已經(jīng)脫離了時(shí)尚;這些天大多數(shù)移動(dòng)設(shè)備不再支持這樣的插件，桌面支持正在出路。

Java Applets\">稍后(90年代后期，21世紀(jì)初)，插件技術(shù)變得非常受歡迎，例如 Java Applets and Flash — these allowed web developers to embed rich content into webpages such as video and animations\">a>和 Flash - 這些允許網(wǎng)絡(luò)開發(fā)者將豐富的內(nèi)容嵌入到網(wǎng)頁(如視頻和動(dòng)畫)中，這只是不能通過單獨(dú)的HTML。嵌入這些技術(shù)是通過<object>, and the lesser-used?外部資源，其可以被視為圖像，嵌套瀏覽上下文或要由插件處理的資源。"> < object> ， a title ="HTML嵌入元素表示外部應(yīng)用程序或交互式內(nèi)容的集成點(diǎn)(換句話說， <embed>, and they were very useful at the time.\">，插件)。"> < embed> ，它們在當(dāng)時(shí)非常有用。由于許多問題，包括可訪問性，安全性，文件大小等等，它們已經(jīng)脫離了時(shí)尚;這些天大多數(shù)移動(dòng)設(shè)備不再支持這樣的插件，桌面支持正在出路。

有了歷史課程，讓我們繼續(xù)，看看如何使用其中的一些。

主動(dòng)學(xué)習(xí):經(jīng)典嵌入使用

在本文中，我們將直接跳轉(zhuǎn)到一個(gè)積極的學(xué)習(xí)部分，立即給你一個(gè)真正的想法，嵌入技術(shù)是有用的。Youtube, but many people don\'t know about some of the sharing facilities it has available\">在線世界非常熟悉 Youtube ，但很多人不知道一些共享設(shè)施。讓我們看看YouTube如何允許我們使用HTML內(nèi)聯(lián)框架元素(iframe)表示嵌套的瀏覽上下文，有效地將另一個(gè)HTML頁面嵌入到當(dāng)前頁面中。在HTML 4.01中，文檔可以包含頭部和正文或頭部和框架集，但不能同時(shí)包含正文和然而，可以在正常文檔主體內(nèi)使用iframe，每個(gè)瀏覽上下文具有其自己的會話歷史和活動(dòng)文檔，包含嵌入內(nèi)容的瀏覽上下文稱為父瀏覽上下文，頂層瀏覽上下文<iframe>.\">沒有父級)通常是瀏覽器窗口。"> < iframe> 。

1. First, go to Youtube and find a video you like.
2. Below the video you'll find a Share button — select this to display the sharing options.
3. Select the Embed option and you'll be given some <iframe> code — copy this.
4. Insert it into the Input box below, and see what the result is in the Output.

對于獎(jiǎng)勵(lì)積分，您還可以嘗試在示例中嵌入 Google地圖:

1. Go to Google Maps and find a map you like.
2. Click on the "Hamburger Menu" (three horizontal lines) in the top left of the UI.
3. Select the Share or embed map option.
4. Select the Embed map option, which will give you some <iframe> code — copy this.
5. Insert it into the Input box below, and see what the result is in the Output.

如果發(fā)生錯(cuò)誤，您可以隨時(shí)使用重置按鈕重置。 如果您遇到問題，請按顯示解決方案按鈕查看答案。

<h2>Input</h2>
<textarea id="code" class="input">
</textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
? <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

.output {
  height: 14em;
}

button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" rel="external nofollow"  frameborder="0" allowfullscreen>\n</iframe>';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

iframes詳細(xì)

所以，這是容易和樂趣嗎？ 頁面到當(dāng)前頁面在HTML 4.01中，文檔可能包含一個(gè)頭部和一個(gè)主體或一個(gè)頭部和一個(gè)框架集，但不能同時(shí)包含一個(gè)主體和一個(gè)框架集，但是一個(gè)iframe可以在一個(gè)正常的文檔主體中使用，<\">上下文具有其自己的會話歷史和活動(dòng)文檔，包含嵌入內(nèi)容的瀏覽上下文被稱為父瀏覽上下文。頂層瀏覽上下文(其沒有父)通常是瀏覽器窗口"> elements are designed to allow you to embed other web documents into the current document.\">iframe> 元素旨在允許您將其他Web文檔嵌入到當(dāng)前文檔中。這非常適合將第三方內(nèi)容整合到您的網(wǎng)站中，而您可能無法直接控制，也不想實(shí)施自己的版本(例如來自在線視頻提供商的視頻)，注釋系統(tǒng)(例如Disqus, maps from online map providers, advertising banners, etc. The live editable examples you\'ve been using through this course are implemented using &lt\">://disqus.com/"class ="external"> Disqus ，來自在線地圖提供商的地圖，廣告橫幅等。您通過本課程使用的現(xiàn)場可編輯示例是使用&lt s.\">; iframe> 。

有一些嚴(yán)重的安全問題需要考慮使用< iframe> ，我們將在下面討論，但這并不意味著 不應(yīng)該在你的網(wǎng)站中使用它 - 它只需要一些知識和仔細(xì)的思考。 讓我們更詳細(xì)地探討代碼。 假設(shè)您想在其中一個(gè)網(wǎng)頁上加入MDN詞匯表，您可以嘗試這樣做:

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary" rel="external nofollow" 
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a  rel="external nofollow" target="_blank" >
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

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

allowfullscreen

If set, the <iframe> is able to be placed in fullscreen mode using the Full Screen API (somewhat beyond scope for this article.)

frameborder

If set to 1, this tells the browser to draw a border between this frame and other frames, which is the default behaviour. 0 removes the border. Using this isn't really recommended any more, as the same effect can be better achieved using border: none; in your CSS.

src

This attribute, as with <video>/<img>, contains a path pointing to the URL of the document to be embedded.

width and height

These attributes specify the width and height you want the iframe to be.

Fallback content

In the same way as other similar elements like <video>, you can include fallback content between the opening and closing <iframe></iframe> tags that will appear if the browser doesn't support the <iframe>. In this case we have included a link to the page instead. It is unlikely that you'll come across any browser that doesn't support <iframe>s these days.

sandbox

This attribute, which works in slightly more modern browsers than the rest of the <iframe> features (e.g. IE 10 and above) requests heightened security settings; we'll say more about this in the next section.

安全問題

上面我們提到安全問題 - 讓我們現(xiàn)在更詳細(xì)地介紹一下。 我們不期望你第一次完全理解所有這些內(nèi)容; 我們只是想讓你知道這個(gè)問題，并提供一個(gè)參考，當(dāng)你得到更多的經(jīng)驗(yàn)，并開始考慮使用< iframe> 在你的實(shí)驗(yàn)和工作回來。 此外，沒有必要害怕，不使用< iframe> - 你只需要小心。 閱讀...

瀏覽器制造商和Web開發(fā)人員已經(jīng)了解到iframe是網(wǎng)絡(luò)上的壞人(通常稱為黑客或更多)的常見目標(biāo)(官方術(shù)語:攻擊向量 準(zhǔn)確地，餅干)攻擊，如果他們試圖惡意修改您的網(wǎng)頁，或誘騙人們做他們不想做的事情，如揭露敏感信息，如用戶名和密碼。 因此，規(guī)格工程師和瀏覽器開發(fā)人員已經(jīng)開發(fā)了各種安全機(jī)制，使< iframe> 更安全，還有一些最佳做法需要考慮 - 我們將在下面介紹其中的一些。

Clickjacking 是一種常見的iframe攻擊，黑客會將不可見的iframe嵌入您的 文檔(或?qū)⒛奈臋n嵌入到自己的惡意網(wǎng)站)，并使用它捕獲用戶的交互。 這是誤導(dǎo)用戶或竊取敏感數(shù)據(jù)的常見方式。

Only embed when necessary

有時(shí)，嵌入第三方內(nèi)容(例如YouTube視頻和地圖)是有意義的，但如果您只在完全必要的情況下嵌入第三方內(nèi)容，則可以節(jié)省自己很多頭痛。 對于網(wǎng)絡(luò)安全來說，一個(gè)好的經(jīng)驗(yàn)法則是:"你永遠(yuǎn)不能太謹(jǐn)慎，如果你這樣做了，再仔細(xì)檢查一下，如果別人做，假設(shè)它是危險(xiǎn)的，除非另有證明。"

Use HTTPS

通常使用SSL或TLS加密客戶端和服務(wù)器之間的所有通信，這種安全連接允許客戶端安全地與服務(wù)器交換敏感數(shù)據(jù)，例如用于銀行活動(dòng)或在線購物。"> HTTPS 是加密版本 of HTTP是文本的(所有通信都是以純文本形式進(jìn)行的)和無狀態(tài)的(沒有通信知道以前的通信)。 您應(yīng)該盡可能使用HTTPS為您的網(wǎng)站提供服務(wù):

1. HTTPS reduces the chance that remote content has been tampered with in transit,
2. HTTPS prevents embedded content from accessing content in your parent document, and vice versa.

使用HTTPS需要安全證書，這可能很昂貴(雖然讓我們加密使事情更容易) - 如果你不能得到 一個(gè)，您可以使用HTTP提供您的父文檔。 然而，由于上述HTTPS的第二個(gè)好處，無論成本多少，您絕不能使用HTTP嵌入第三方內(nèi)容。 (在最佳情況下，您的用戶的Web瀏覽器會給他們一個(gè)可怕的警告。)所有信譽(yù)良好的公司，通過< iframe> HTTPS - 例如，當(dāng)您嵌入Google地圖或Youtube中的內(nèi)容時(shí)，請查看< iframe> src 屬性中的網(wǎng)址。

Always use the sandbox attribute

你希望攻擊者在你的網(wǎng)站上給予攻擊者的力量不大，因此你應(yīng)該給嵌入的內(nèi)容只有執(zhí)行其工作所需的權(quán)限。 當(dāng)然，這也適用于您自己的內(nèi)容。 一個(gè)代碼容器，它可以被正確地使用或者用于測試，但不會對代碼庫的其他部分(意外或惡意)造成任何損害，被稱為 org / wiki / Sandbox_(computer_security)"class ="external"> sandbox 。

未經(jīng)過消毒處理的內(nèi)容可能做的太多(執(zhí)行JavaScript，提交表單，彈出窗口等)默認(rèn)情況下，您應(yīng)該通過使用沒有參數(shù)的 sandbox 屬性強(qiáng)加所有可用的限制，如我們前面的示例 。

如果絕對需要，您可以逐個(gè)添加權(quán)限(在 sandbox =""屬性值內(nèi)) - 請參閱 zh-CN / docs / Web / HTML / Element / iframe#attr-sandbox"> sandbox 所有可用選項(xiàng)的參考條目。 一個(gè)重要的注意事項(xiàng)是，您應(yīng)該從沙盒中添加 allow-scripts 和 allow-same-origin 屬性 - 在這種情況下，嵌入內(nèi)容可能繞過相同的源安全策略，阻止網(wǎng)站執(zhí)行腳本，并使用JavaScript完全關(guān)閉沙盒。

Configure CSP directives

CSP stands for \">的網(wǎng)站相關(guān)攻擊，如XSS和數(shù)據(jù)注入。"> CSP 代表 , and provides a set of HTTP Headers內(nèi)容安全政策 ，并提供一組HTTP標(biāo)頭 (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document.\">/ a>(當(dāng)您的網(wǎng)頁從網(wǎng)絡(luò)服務(wù)器提供時(shí)，與您的網(wǎng)頁一起發(fā)送的元數(shù)據(jù))，旨在提高HTML文檔的安全性。<iframe>s, you can 在確保< iframe> 的安全性時(shí)，您可以 configure your server to send an appropriate X-Frame-Options? header. This can prevent other websites from embedding your content in their webpages (which would enable\">框架選項(xiàng)">配置您的服務(wù)器以發(fā)送適當(dāng)?shù)?code> X-Frame-Options 標(biāo)題。 這可以防止其他網(wǎng)站將您的內(nèi)容嵌入其網(wǎng)頁clickjacking and a host of other attacks), which is exactly what the MDN developers\">點(diǎn)擊劫持和一系列其他攻擊)，這正是MDN開發(fā)人員已經(jīng)做了，正如我們前面看到的。

< embed> 和< object> 元素

注意:您可以閱讀Frederik Braun的帖子 header /"class ="external">關(guān)于X-Frame-Options安全報(bào)頭，以獲取有關(guān)此主題的更多背景信息。 顯然，在本文中完全解釋的范圍之外。

但是，您不太可能非常使用這些元素 - Applet已經(jīng)使用多年，F(xiàn)lash不再受歡迎，由于多種原因(請參閱針對插件的情況 / a>，下面)，PDF往往比嵌入更好的鏈接，而其他內(nèi)容，如圖像和視頻有更好，更容易的元素來處理這些。 插件和這些嵌入方法真的是一種遺留的技術(shù)，我們主要提到它們，以防在某些情況下遇到它們，例如內(nèi)聯(lián)網(wǎng)或企業(yè)項(xiàng)目。

如果你發(fā)現(xiàn)自己需要嵌入插件內(nèi)容，這是至少需要的那種信息:

以下是使用 或交互式內(nèi)容(換句話說，插件)。"> < embed> 元素嵌入Flash電影(請參閱此 .github.io / learning-area / html / multimedia-and-embedding / other-embedding-technologies / embed-flash.html"class ="external">在Github上生活，以及 ://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html"class ="external">檢查源代碼 / a>):

<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往往更糟，使用嵌入了< embed> 元素的< object> 元素覆蓋所有基 (檢查一個(gè)例子。)Flash甚至成功地用作HTML5視頻的后備內(nèi)容，一段時(shí)間，但是這越來越被視為沒有必要。

現(xiàn)在讓我們看看將PDF嵌入頁面的< object> 示例(參見 and-embedding / other-embedding-technologies / object-pdf.html"class ="external"> live example 和 /gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html"class ="external">源代碼):

<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是紙質(zhì)和數(shù)字之間必要的墊腳石，但它們構(gòu)成了許多輔助功能挑戰(zhàn)，可能很難 在小屏幕上閱讀。 他們?nèi)匀粌A向于在某些圈子受歡迎，但它是更好地鏈接到他們，所以他們可以下載或閱讀在一個(gè)單獨(dú)的頁面，而不是嵌入在網(wǎng)頁。

對插件的情況

過去，插件在Web上是不可或缺的。 記住你必須安裝Adobe Flash Player才能在線觀看電影的日子？ 然后你總是有關(guān)于更新Flash Player和你的Java運(yùn)行時(shí)環(huán)境煩人的警報(bào)。 網(wǎng)絡(luò)技術(shù)從此變得更加強(qiáng)大，那些日子已經(jīng)結(jié)束了。 對于大多數(shù)應(yīng)用程序，現(xiàn)在是停止提供依賴于插件的內(nèi)容的時(shí)候了，并開始利用Web技術(shù)。

• Broaden your reach to everyone. Everyone has a browser, but plugins are increasingly rare, especially among mobile users. Since the Web is largely usable without plugins, people would rather just go to your competitors' websites than install a plugin.
• Give yourself a break from the extra accessibility headaches that come with Flash and other plugins.
• Stay clear of additional security hazards. Adobe Flash is notoriously insecure, even after countless patches. In 2015, Alex Stamos, chief security officer of Facebook, even requested that Adobe discontinue Flash.

那么你該怎么辦呢？如果您需要交互性，HTML和JavaScript can readily get the job done for you with no need for Java applets or outdated ActiveX/BHO technology.\">客戶端以動(dòng)態(tài)腳本網(wǎng)頁，但通常也在服務(wù)器端。"> JavaScript 可以輕松地為您完成工作，無需Java applet或過時(shí)的ActiveX / BHO技術(shù)。HTML5 video for your media needs, SVG\">您可以使用 HTML5視頻來滿足您的媒體需求，而不是依賴于Adobe Flash， SVG for vector graphics, and Canvas for complex images and animations.\">a>用于矢量圖形，以及 Canvas 用于復(fù)雜的圖像和動(dòng)畫。 Peter Elst was already writing some years ago that Adobe Flash is rarely the right tool for the\"> Peter Elst已在幾年前撰寫，Adobe Flash很少是適用于工作，除了專門的游戲和商業(yè)應(yīng)用程序。對于ActiveX，即使是Microsoft的Edge browser no longer supports it.\">圖形Web瀏覽器與Microsoft Windows捆綁在一起，自2014年開始由Microsoft開發(fā)。最初稱為Spartan，Edge取代了長期以來的Microsoft瀏覽器Internet Explorer。"> Edge 瀏覽器不再支持它。

概要

在Web文檔中嵌入其他內(nèi)容的主題很快就會變得非常復(fù)雜，因此在本文中，我們試圖以一種簡單而熟悉的方式介紹它，它將立即顯得相關(guān)，同時(shí)仍然暗示了一些更高級的功能 涉及技術(shù)。 首先，您不太可能使用嵌入功能，包括第三方內(nèi)容(例如您網(wǎng)頁上的地圖和視頻)。 當(dāng)你變得更有經(jīng)驗(yàn)的時(shí)候，你很可能開始為他們找到更多的用途。

在Web文檔中嵌入其他內(nèi)容的主題很快就會變得非常復(fù)雜，因此在本文中，我們試圖以一種簡單而熟悉的方式介紹它，它將立即顯得相關(guān)，同時(shí)仍然暗示了一些更高級的功能 涉及技術(shù)。 首先，您不太可能使用嵌入功能，包括第三方內(nèi)容(例如您網(wǎng)頁上的地圖和視頻)。 當(dāng)你變得更有經(jīng)驗(yàn)的時(shí)候，你很可能開始為他們找到更多的用途。