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安全性头上来获取有关此主题的更多背景信息。显然，在这篇文章中已经解释得很清楚了。