标签：嵌入 框架 前端 元素 技术 iframe 属性 页面
上一篇中我们学习把图片、音频、视频等多媒体嵌入到页面当中，除了这些，我们还能往页面嵌入其他东西吗？比如说直接嵌入一个页面，嵌入百度的搜索框等。这一小节我们就来学习一下其他嵌入的元素。
嵌入简史
首先简单了解一下嵌入的发展史。刚开始流行使用框架创建网站部分，然后将各个框架放到一个框架集的主文档中，该方法也存在一些问题，经过一段时间发展，嵌入技术变成很受欢迎，于是视频、动画等内容就通过嵌入技术来实现。最后<iframe>元素出现，它能够将整个web页都嵌入到另一个网页。<iframe>元素也沿用至今。
Iframe元素
正如上面提到的，经过技术更迭，iframe现在依旧被用于嵌入其他页面。这个元素在日常开发的应用也很常见，比如把自己公司的项目嵌入到甲方公司的系统当中，这个时候用iframe嵌入是个不错的方法。这里我们可以自己尝试一下在页面嵌入搜狗的地址。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<iframe src="https://www.sogou.com" width="500" height="500"> </iframe>
</body>
</html>接下来看下iframe基本属性
- allowfullscreeb：如果设置，页面可设置为全屏模式。
- frameborder：绘制嵌入边框，有两个属性值，为1表示在此框架与其他框架之间绘制边框，为0表示不绘制边框，默认值为1。
- src：url路径，跟image,a用途一样。
- width、height：宽高属性，这个属性老朋友了，前面提到过很多回。
- 备选内容，在多媒体一章中提到过备选内容，当该元素不被浏览器支持时，会显示备注内容。
- sandbox：可以提高安全设置。该属性兼容性要求高一点，需要在IE10及其以上版本才能生效。
安全隐患
iframe用起来虽然很方便，但自身还是有安全问题的，当然也不用因为安全问题特别害怕而不去使用iframe。这个安全隐患主要基于黑客的操作，黑客会攻击iframe来达到自己的一些目的，比如单击劫持（将隐藏的iframe嵌入到文档中，用来获取用户密码及敏感信息）。我们也可以通过操作提高iframe的安全性。
- 只在必要时插入。就像我们上面提到的搜狗，一般情况下我们不会往我们项目中插入这样子的搜索框，而是通过插入自己写一个简单的搜索框。
- 使用https。在我们插入url网址中，最好是用https开始的网址。
- 使用sandbox属性。我们可以通过设置sandbox属性，该属性用于添加权限，达到保护的目的。需要注意上面提到的该属性有兼容性要求。
- 配置CSP指令。CSP代表内容安全策略，它提供一组HTTP标头（由web服务器发送时与元数据一起发送的元数据），可以提高文档的安全性。
标签：嵌入,框架,前端,元素,技术,iframe,属性,页面 来源： https://blog.csdn.net/popping_Sun/article/details/123043134
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。