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词汇表，您可以尝试以下方式：

width="100%" height="500" frameborder="0"

allowfullscreen sandbox>

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