HTML入门10
目前,掌握了图像,视频和音频的嵌入,下面来谈iframe和embed、object嵌入网页,
嵌入简史,刚开始流行用嵌入框架然后不同部分显示i不同内容,可以解决下载速度慢时的问题;
慢慢的插件技术流行,java applet和flash的出现,能够将内容嵌入到网页中,视频和动画,这些通过<object>和<embed>元素来实现, 到现在<iframe>元素出现,连同<canvas><video>出现,提供将一个整个web网页嵌入另一个网页的方法。
Iframe详解
允许您将其他web文档嵌入到当前文档中,将第三方网站纳入您的网站,下面直接引入一个实例,
<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 设置后可以通过全屏API设置为全屏模式,
frameborder 设置为1,告诉浏览器在此框架和其他框架之间绘制边框,默认行为;如果是0,删除边框,因为CSS可以更好实现相同效果,border:none;
src 与img标签里一样,
width 和height 指定框架的宽度的高度
同样iframe里的p段落也是i备选内容,如果不支持将显示备选内容;
sandbox 用于安全设置,iframe的src属性应该在页面主内容加载完之后使用javascript设置iframe的src属性会更好,可以让页面快速被使用。
安全问题,黑客选择iframe作为攻击目标,也叫攻击向量。单机劫持是一种常见的iframe攻击,黑客将隐藏的iframe嵌入到您的文档中,并使用其捕获用户的交互,误导用户来窃取敏感数据。对于iframe只在必要时嵌入,也要考虑侵权的问题,适当标注来源。
使用HTTPS 是http的加密版本,https减少了远程内容在传输过程种被篡改的机会;防止嵌入式内容访问您的父文档中的内容。通过HTTPS来嵌入iframe;
始终使用sandbox属性,也叫沙盒属性,即iframe内容只给与部分权限,那么未沙盒化的unsandbox内容可以执行的操作太多。
配置CSP指令
csp代表内容安全策略,提供一组HTTP标头,由web服务器发送时与元素据一起发送的元数据,旨在提高HTML文档的安全性,在服务器端配置为发送适当的X-Frame-Options标题。
<embed><object>元素。
不同于<iframe> 这些个元素是用来嵌入多种类型的外部内容的通用嵌入工具,包括java小程序和flash,PDF,插件技术,SVG内容。 插件是一种对浏览器原生无法读取的内容提供访问权限的去软件。 如果需要插件内容,需要下面的信息:
嵌入内容的网址,src 嵌入内容的媒体类型 type ; 有插件控制的框高度和宽度,width、height
名称和值,作为参数的提供, 独立的HTML内容作为不可用的资源回退。
typemustmatch保持嵌入文件不运行,当嵌入来自不同来源的内容,防止攻击者通过插件运行任意脚本,可以赋予更重要的安全优势。
接下来考虑<embed>元素嵌入Flash影片的示例,
1 2 3 4 5 | < 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"> |
代码非常混乱,这种情况开始减少被认为没必要。再来看一个object嵌入pdf的例子;
1 2 3 4 | < 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是纸与数据之间的阶梯,通过链接指向可以直接在单独的页面被下载或被阅读。
总结,这篇主要还是讲web文档三个插入元素的使用方式,和带来的一些问题。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步