MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

Learn web development

从对象到iframe - 其他嵌入技术

到目前为止,您应该掌握了将图像,视频和音频嵌入到网页上的诀窍了。此刻,让我们进行深入学习,来看一些能让您在网页中嵌入各种内容类型的元素: <iframe><embed><object> 元素。<iframe>于嵌入其他网页,另外两个元素则允许您嵌入PDF,SVG,甚至Flash - 一种正在被淘汰的技术,但您仍然会时不时的看到它。

先决条件: 基本的计算机素养,安装的基本软件使用文件的基本知识,熟悉HTML基础知识(参考HTML 入门)以及本模块中以前的文章。
目的: 要了解如何使用嵌入物品进入网页<object>,  <embed>以及<iframe>,像Flash电影和其他网页。

嵌入的简史

很久以前,在网络上使用框架创建网站 - 有一小部分存储于个人HTML页面的网站是受欢迎的这些嵌入在一个称为框架集的主文档中,允许您指定每个框架填充的屏幕上的区域,而不是像表格的列和行的大小。这些被认为是90年代中期至90年代的凉爽的高度,有证据表明,将网页分解成较小的块,这样更适合下载速度 - 尤其是网络连接如此缓慢。然而,他们有很多问题,远远超过网络速度更快的任何积极因素,所以你看不到它们被使用了。

过了一段时间后(20世纪90年代末,21世纪初),插件技术变得非常受欢迎,例如Java AppletFlash - 这些允许网络开发者将丰富的内容嵌入到视频和动画等网页中,这些网页只能通过HTML单独使用。嵌入这些技术是通过诸如<object>和较少使用<embed>元素来实现的,当时它们非常有用。由于许多问题,包括可访问性,安全性,文件大小等,它们已经脱离了时尚; 现如今,大多数移动设备不再支持这样的插件,桌面支持正在推出。

最后,<iframe>元素出现(连同其他嵌入内容的方式,如<canvas><video>等),这提供了一种将整个Web文件嵌入到另一个页面中的方式,就好像它是一个现在经常使用的<img>或其他类似的元素。

有了历史课程,我们继续往下看以了解如何使用它们。

自主学习:嵌入类型的使用

在这篇文章中,我们将直接进入自主学习部分,立即让你体会到嵌入技术的实用性。网络世界非常熟悉Youtube,但是很多人不了解它所提供的一些共享设施。让我们来看看Youtube如何让我们通过<iframe>在页面中嵌入任何我们喜欢视频

  1. 首先,转到Youtube并找到您喜欢的视频。
  2. 在视频下方,您会看到一个共享按钮 - 选择此选项可显示共享选项。
  3. 选择“ 嵌入”选项卡,您将得到一些<iframe>代码 - 将其复制。
  4. 将其插入下面输入框,看看输出结果是什么

对于奖励积分,您还可以在示例中尝试嵌入Google地图

  1. 转到Google地图并找到您喜欢的地图。
  2. 点击UI左上角的“汉堡菜单”(三个水平线)。
  3. 选择共享或嵌入地图选项。
  4. 选择嵌入地图选项,这将给你一些<iframe>代码 - 复制这个。
  5. 将其插入下面输入框,看看输出结果是什么

如果你犯了某些错误,你可以点击Reset按钮以重置编辑器。如果你确实被卡住了, 按下solution按钮以借鉴答案。

Iframe详解

是不是很简单又有趣呢?<iframe>元素旨在允许您将其他Web文档嵌入到当前文档中。这很适合将第三方内容纳入您的网站,您可能无法直接控制,也不希望实现自己的版本 - 例如来自在线视频提供商的视频,Disqus等评论系统,在线地图提供商,广告横幅等。您通过本课程使用的实时可编辑示例使用<iframe> 实现

有一些严重的 安全隐患需要考虑<iframe>s,们将在下面讨论,但这并不意味着你不应该在你的网站上使用它们 - 它只需要一些知识和仔细的思考。让我们更详细地探索这些代码。假设您想在其中一个网页上加入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的宽度和高度。
Fallback content (备用内容)
<video>等其他类似元素相同,您可以在打开和关闭<iframe></iframe>标签之间包含回退内容,如果浏览器不支持,将会显示<iframe>在这种情况下,我们已经添加了一个链接到页面。您几乎不可能遇到任何不支持<iframe>浏览器
sandbox
该属性比其他<iframe>功能(例如IE 10及更高版本)稍微更现代的浏览器工作,要求提高安全性设置; 我们将在下一节中再说一遍。

注意:为了提高速度,src在主内容完成加载后,设置iframe的JavaScript属性是个好主意这使您的页面可以更快地使用,并减少您的官方页面加载时间(重要的SEO指标)。

安全隐患

以上我们提到了安全问题 - 现在我们来详细介绍一下这一点。我们并不期望您第一次完全理解所有这些内容; 我们只想让您意识到这一问题,并为您提供参考,让您更有经验,并开始考虑<iframe>在您的实验和工作中使用此外,没有必要害怕和不使用<iframe>- 你只需要谨慎一点。继续看下去...

浏览器制造商和Web开发人员已经学会了如何使用iframe 作为网络上的坏人(通常被称为黑客,或更准确地说是破解者的共同目标(官方术语:攻击向量),如果他们试图恶意修改您的网页或欺骗人们进行不想做的事情,例如显示用户名和密码等敏感信息。因此,规范工程师和浏览器开发人员已经开发了各种安全机制,使其更加安全,并且还有最佳实践要考虑 - 我们将在下面介绍其中的一些。<iframe>

单击劫持是一种常见的iframe攻击,黑客将隐藏的iframe嵌入到您的文档中(或将您的文档嵌入自己的恶意网站),并使用它来捕获用户的交互。这是误导用户或窃取敏感数据的常见方式。

一个快速的例子,尽管如此 - 尝试加载 在浏览器中显示的例子 - 你可以在Github上找到它参见源代码)。你不会看到页面上显示的内容,如果你点击浏览器开发者工具中的控制台,你会看到一条消息,告诉你为什么。在Firefox中,您会被X-Frame-Options拒绝加载:https://developer.mozilla.org/en-US/docs/Glossary不允许框架化这是因为构建MDN的开发人员已经在服务于网站页面的服务器上设置了一个不允许嵌入<iframe>的设置(请参阅配置CSP指令)这是有必要的 - 整个MDN页面嵌入在其他页面中并不真实,除非您想要将其嵌入到您的网站上并将其声称为自己的内容,或尝试通过以下方式窃取数据:点击劫持,这两个都是非常糟糕的事情。此外,如果每个人都开始这样做,所有额外的带宽将开始花费Mozilla很多资金。

只有在必要时嵌入

有时嵌入第三方内容(例如YouTube视频和地图)是有意义的,但如果您只在完全需要时嵌入第三方内容,您可以节省很多头痛。网络安全的一个很好的经验法则是“你永远不会太谨慎,如果你这样做,再检查一下,如果有人做的话,假设它是危险的,除非另有说明。”

除了安全问题,你还应该意识到知识产权问题。大部分离线和在线内容内容都是有版权的,即使你可能没有想到(例如,大多数图像在维基共享资源)。不要在网页上显示一些不属于你的内容,除非所有者已经给了你明确的书面许可。对于侵犯版权的惩罚是严厉的。再说一次,你再小心也不为过。

使用 HTTPS

HTTPSHTTP的加密版本您应该尽可能使用HTTPS为您的网站提供服务:

  1. HTTPS减少了远程内容在传输过程中被篡改的机会,
  2. HTTPS防止嵌入式内容访问您的父文档中的内容,反之亦然。

使用HTTPS需要一个安全证书,这可能是昂贵的(尽管我们的加密使事情变得更容易) - 如果你不能得到一个,你可以使用HTTP来为你的父文档提供服务。但是,由于HTTPS的第二个好处,无论成本如何,您绝对不能使用HTTP嵌入第三方内容。(在最好的情况下,您的用户的Web浏览器会给他们一个可怕的警告。)所有有声望的公司,例如Google Maps或Youtube,当您嵌入内容时,<iframe>将通过HTTPS提供 - 查看<iframe> src属性内的URL。

注意Github页面允许默认情况下通过HTTPS提供内容,因此对托管内容很有用。如果您正在使用不同的托管,并且不确定,请向您的托管服务商询问。

始终使用sandbox属性

你想给攻击者尽可能少的机会在你的网站上做坏事,那么你应该只给嵌入式内容工作所需的权限。当然,这也适用于你自己的内容。一个代码可以适当使用或用于测试的容器,但不能对其他代码库(意外或恶意)造成任何损害称为沙箱

未安装的内容可以做得太多(执行JavaScript,提交表单,弹出窗口等)默认情况下,您应该使用sandbox没有参数属性来强制执行所有可用的限制,如我们前面的示例所示。

如果绝对需要,您可以逐个添加权限(sandbox=""属性值内) - 请参阅sandbox所有可用选项参考条目。其中重要的一点是,你应该永远不会同时添加allow-scriptsallow-same-origin,你的sandbox属性-在这种情况下,嵌入的内容可以绕过,从执行脚本停止网站同源安全策略,并使用JavaScript来关闭完全沙箱。

注意:如果攻击者可以直接(外部iframe愚弄人们访问恶意内容,Sandboxing不提供任何保护如果某些内容有可能是恶意的(例如,用户生成的内容),请将其从不同的域服务到您的主要网站。

配置CSP指令

CSP代表内容安全策略,并提供一组HTTP标头(由web服务器发送时与元数据一起发送的元数据),旨在提高HTML文档的安全性。在安全性方面<iframe>,您可以将服务器配置为发送适当的X-Frame-Options  标题。这可以防止其他网站在其网页中嵌入您的内容(这将导致点击和一系列其他攻击),这正如我们之前看到的那样,MDN开发人员已经做了这些工作。

注意:您可以阅读Frederik Braun的帖子在X-Frame-Options安全性头上获取有关此主题的更多背景信息。显然,在这篇文章中已经解释得很清楚了。

<embed>和<object>元素

<embed><object>要素服务于不同的功能<iframe>-这些元素是通用的嵌入工具嵌入多种类型的外部内容,其中包括像Java小程序和Flash,PDF(可在浏览器中显示为一个PDF插件)插件技术,甚至内容像视频,SVG和图像!

注意:一个插件是提供访问浏览器无法读取的内容的软件。

然而,您不太可能使用这些元素 - Applet几年来一直没有被使用,由于许多原因,Flash不再受欢迎,(见下面的插件案例),PDF通常会更好链接到嵌入式,其他内容,如图像和视频都有好多了,更容易处理的元素。插件和这些嵌入方法真的是一种传统技术,我们主要提到它们,以防您在某些情况下遇到内部网或企业项目时遇到这些问题。

如果您发现自己需要嵌入插件内容,那么您至少需要一些这样的信息:

  <embed> <object>
嵌入内容的网址 src data
嵌入内容的准确媒体类型 type type
由插件控制的框的高度和宽度(以CSS像素为单位)
height
width
height
width
名称和值,将插件作为参数提供 具有这些名称和值的ad hoc属性 单标签<param>元素,包含在内<object>
独立的HTML内容作为不可用资源的回退 不支持(<noembed>已过时) 包含在元素<object>之后<param>

注意<object>需要data属性,type属性或两者。如果您同时使用这两个,您也可以使用该typemustmatch属性(仅在Firefox中实现,在本文中)。typemustmatch保持嵌入文件不运行,除非type属性提供正确的媒体类型。typemustmatch因此,当您嵌入来自不同来源的内容(可以防止攻击者通过插件运行任意脚本)时,可以赋予重要的安全优势

下面是一个使用该<embed>元素嵌入Flash影片的示例(请参阅此处的Github,并检查源代码):

<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视频的备用内容,但是这种情况越来越被认为是不必要的。

现在来看一个<object>将PDF嵌入一个页面的例子(参见实例源代码):

<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是纸张和数字之间的必要垫脚石,但它们提供了许多accessibility challenges并且可能难以在小屏幕上阅读。他们仍然倾向于在一些圈子中受欢迎,但是我们应该更好地链接他们,以便他们可以在单独的页面上下载或阅读,而不是将其嵌入到网页中。

针对插件的情况

以前,插件在网络上是不可或缺的。还记得你必须安装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浏览器也不再支持。

概要

在Web文档中嵌入其他内容的主题可能会变得非常复杂,因此在本文中,我们尝试以一种简单而熟悉的方式来介绍它,它们有直接的关系,同时仍然暗示了一些涉及更高级功能的技术。首先,您不可能在包含第三方内容(如地图和视频)的网页上使用嵌入式广告。当你变得更有经验的时候,你可能会开始为他们找到更多的用途。

除了我们在这里讨论的那些外,还有许多涉及嵌入外部内容的技术。我们看到了一些在前面的文章中,如<video><audio><img>,但也有其他人发现,如  <canvas>对JavaScript生成的2D和3D图形,并嵌入矢量图形<svg>我们将在模块的下一篇文章中学习SVG

文档标签和贡献者

 此页面的贡献者: Eric.Wu
 最后编辑者: Eric.Wu,