如何使用jQuery创建叠加内嵌框架？

在HTML页面中，标签广泛用于嵌入另一个文档。很多广告引擎依靠使用这个标签来显示在网站中嵌入的营销部件。<br /> 与其他HTML标签和功能类似，<iframe>同样可被用于承载攻击。只要想实现持久化，内嵌框架总是首选方案，为什么这么说呢？南昌网络公司小编认为有以下两个原因：<br /> 第一，你可以完全控制内嵌框架的DOM内容，也就是说CSS内容也可以控制；<br /> 第二，内嵌框架主要用于在当前页面嵌入其他文档的事实，为持久化通信渠道提供了直截了当的方法。<br /> 不过由于可以控制内嵌框架中的DOM，包括HTML、CSS和JavaScript，所以你也可以利用内嵌框架把当前页面加载到一个叠加层里，从而在后台保持通信渠道畅通。所谓叠加层，指的是一个页面组件，比如一个内嵌框架可以在页面上看到，但代码及其他元素在后台并不可见，而是持续执行自己的逻辑。此外，HTML5的History API也很方便，特别适合在地址栏中遮蔽真正的URL。<br /> 设想一个Web应用在用户认证前存在反射型XSS漏洞。你已经勾连目标，但XSS并不持久。为了防止丢失到目标浏览器的连接，你可以创建一个叠加层内嵌框架。这个内嵌框架没有边框，宽度和高度都是100%，源属性指向该Web应用的登录页面。<br /> 在内嵌框架渲染后的极短时间内，被勾连浏览器会显示登录页面的内容，但地址栏中的URI仍然是以前的。而目标在这个页面上执行的任何操作都会在叠加层内嵌框架中发生，相当于把目标有效地捕获到了一个新框架内。与此同时，在后台，通信渠道仍然运行，你还可以继续发送命令，与目标浏览器交互。<br /> 目标不可能发现攻击，唯一可能引起注意的事件，就是渲染内嵌框架时发生的页面重载，以及浏览器地址栏中包含了与目标期望不一样的URI。<br /> 下面南昌网络公司小编为大家介绍展示一下使用jQuery创建一个叠加内嵌框架的过程。<br /> createIframe: function(type, params, styles, onload) {<br /> var css = {};<br /> if (type == 'hidden') {<br /> css = $j.extend(true, {<br /> 'border':'none', 'width':'1px', 'height':'1px',<br /> 'display':'none', 'visibility':'hidden'},<br /> styles);<br /> }<br /> if (type == 'fullscreen') {<br /> css = $j.extend(true, {<br /> 'border':'none', 'background-color':'white', 'width':'100%',<br /> 'height':'100%',<br /> 'position':'absolute', 'top':'0px', 'left':'0px'},<br /> styles);<br /> $j('body').css({'padding':'0px', 'margin':'0px'});<br /> }<br /> var iframe = $j('<iframe />').attr(params).css(<br /> css).load(onload).prependTo('body');<br /> return iframe;<br /> }<br /> 从上面可以看出：这个函数可以创建叠加层（if type == 'fullscreen'），也可以创建隐藏的内嵌框架。<br /> 从代码看，创建这两种内嵌框架的区别就是CSS选择符不同。如果是隐藏的内嵌框架，就使用最小的框架大小（1像素），而且没有边框，再使用visibility和display属性使其不可见。如果是层叠式嵌入框架，则元素尺寸最大化，删除窗口上部和左侧多余的空间。<br /> 为了通过层叠式内嵌框架嵌入文档，需要通过自定义的CSS选择器删除其边框，并正确将新元素定位，包括控制它在浏览器窗口的大小。正确的大小是外边距和内边距均为0，高度和宽度均为100%。如果利用这些属性再加上绝对元素定位，就可以得到与当前浏览器窗口边框完美匹配的内嵌框架。<br /> 前面的例子使用jQuery扩展了已有的CSS样式。创建层叠式内嵌框架时，可以像下面的代码这样调用createIframe函数。在这个例子中，加载了同源页面login.jsp，没有传入任何CSS规则或回调。<br /> createIframe('fullscreen',{'src':'/login.jsp'}, {}, null);<br /> 如果初始勾连的页面不一样，比如是/page.jsp，那么用户可能发现叠加了内嵌框架后的结果有问题。页面的内容来自/login.jsp，而浏览器地址栏中显示的却是/page.jsp。为了解决这个问题，可以利用HTML5 History API13：<br /> history.pushState({be:"EF"}, "page x", "/login.jsp");<br /> 执行前面的代码会让浏览器把地址栏中显示的内容改成http://<勾连的域>/login.jsp。<br /> 很明显，为了安全起见，必须向pushState传入一个同源的URL，否则就可能触发安全警报。使用pushState操纵浏览器地址栏最有意思的是，浏览器并不会加载指定的资源，比如这里的/login.jsp，而且这个资源都不一定需要真实存在。<br /> 最后，南昌网站建设公司-百恒网络想告诉大家的是：利用内嵌框架实现对目标浏览器的持续控制，只是可供使用的多种技术之一。这种技术的优点是得到浏览器广泛支持，而在当前内容上叠加相同内容更具隐蔽性，不容易被发现。不过这种技术也有局限性。如果你想嵌入的内容中包含扩张内嵌框架的代码，或者限制性X-Frame-Options首部，那就要使用其他技术了，如果想深入了解这些技术的朋友，欢迎继续关注百恒网络官网动态。同时，百恒网络专业为您提供网站建设、微信开发、手机APP开发等服务，如有需要，随时欢迎和我们联系，我们将专业为您服务！ </p> </div> </div> <div class="article-pager" style="margin-top:10px;"> <ul> <li class="article-top"><a href="https://m.jxbh.cn/article/2044.html"><span class="icon icon-menu-left"></span> 上一篇</a></li> <li class="article-back"><a href="https://m.jxbh.cn/knowledge/index.html"><span class="icon icon-list"></span> 返回列表</a></li> <li class="article-next"><a href="https://m.jxbh.cn/article/2042.html">下一篇 <span class="icon icon-menu-right"></span></a></li> </ul> </div> <div class="bh-share"><span>展开分享</span></div> <div class="article-share animated"> <a href="http://widget.renren.com/dialog/share?resourceUrl=https://m.jxbh.cn/article/2043.html&utm_medium=renren&title=如何使用jQuery创建叠加内嵌框架？&pic=https://www.jxbh.cn/uploads/images//default/default.png&srcUrl=https://m.jxbh.cn/article/2043.html" target="_blank" title="分享到人人网"> <div class="share-icon s-rr"><img src="/public/home/images/icon/renren.png" title="分享到人人网" alt="分享到人人网"></div> </a> <a href="https://www.douban.com/share/service?name=如何使用jQuery创建叠加内嵌框架？&href=https://m.jxbh.cn/article/2043.html?utm_source=js-share&utm_medium=douban&image=https://www.jxbh.cn/uploads/images//default/default.png&updated=&bm=&url=https://m.jxbh.cn/article/2043.html?utm_source=js-share&utm_medium=douban&title=如何使用jQuery创建叠加内嵌框架？&image=https://www.jxbh.cn/uploads/images//default/default.png&comment=在HTML页面中，&lt;iframe&gt;标签广泛用于嵌入另一个文档。很多广告引擎依靠使用这个标签来显示在网站中嵌入的营销部件。" target="_blank" title="分享到豆瓣网"> <div class="share-icon s-dou"><img src="/public/home/images/icon/dou.png" title="分享到豆瓣网" alt="分享到豆瓣网"></div> </a> <a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://m.jxbh.cn/article/2043.html&title=&desc=在HTML页面中，&lt;iframe&gt;标签广泛用于嵌入另一个文档。很多广告引擎依靠使用这个标签来显示在网站中嵌入的营销部件。&summary=在HTML页面中，&lt;iframe&gt;标签广泛用于嵌入另一个文档。很多广告引擎依靠使用这个标签来显示在网站中嵌入的营销部件。https://m.jxbh.cn/article/2043.html&site=UiiiUiii&pics=https://www.jxbh.cn/uploads/images//default/default.png" target="_blank" title="分享到QQ空间"> <div class="share-icon s-qq"><img src="/public/home/images/icon/qqzone.png" title="分享到QQ空间" alt="分享到QQ空间"></div> </a> <a href="javascript:void(0)" title="分享到腾讯微博"> <div class="share-icon s-tx"><img src="/public/home/images/icon/qqweibo.png" title="分享到腾讯微博" alt="分享到腾讯微博"></div> </a> <a href="http://service.weibo.com/share/share.php?appkey=&uurl=https://m.jxbh.cn/article/2043.html&title=在HTML页面中，&lt;iframe&gt;标签广泛用于嵌入另一个文档。很多广告引擎依靠使用这个标签来显示在网站中嵌入的营销部件。@南昌百恒网络原文学习戳→&content=utf-8&pic=https://www.jxbh.cn/uploads/images//default/default.png" target="_blank" title="分享到新浪微博"> <div class="share-icon s-wb"><img src="/public/home/images/icon/weibo.png" title="分享到新浪微博" alt="分享到新浪微博"></div> </a> <a href="http://connect.qq.com/widget/shareqq/index.html?url=https://m.jxbh.cn/article/2043.html&title=如何使用jQuery创建叠加内嵌框架？https://m.jxbh.cn/article/2043.html&summary=在HTML页面中，&lt;iframe&gt;标签广泛用于嵌入另一个文档。很多广告引擎依靠使用这个标签来显示在网站中嵌入的营销部件。&site=baidu&pics=https://www.jxbh.cn/uploads/images//default/default.pngic}" target="_blank" title="分享到微信"> <div class="share-icon s-wx"><img src="/public/home/images/icon/qq.png" title="分享到QQ好友" alt="分享到QQ好友"></div> </a> </div> <script type="text/javascript" src="/public/home/js/previewImage.min.js"></script> <script type="text/javascript"> $(".bh-share").click(function(e) { var $this = $(this); if ($(".article-share").is(":hidden")) { $this.find("span").text('关闭分享'); $(".article-share").show().animate({"bottom":"65px"},400,function(e){ $(".article-share").addClass("bounce"); }); } else { $this.find("span").text('展开分享'); $(".article-share").animate({"bottom":"-65px"},400,function(e){ $(".article-share").hide(); }); } }); $(".article-content img").addClass("img-thumbnail"); $(document).ready(function(e) { $('.article-content img').click(function(e) { var urls = []; $('.article-content img').each(function(index, element) { urls[index] = $('.article-content img').eq(index).attr('src'); }); var img = $(this).attr('src'); var imglist = {urls:urls,current:img}; previewImage.start(imglist); }); $(".article-content a").click(function(e) { window.location.href = $(this).attr("href"); }); }); </script> <div class="bh-fmenu"> <a href="/home/index/service.html"><div class="bh-fdiv"> <div class="bh-fimg"><img src="/public/home/images/mobile/website.png" width="20"></div> <div class="bh-ffont">服务</div> </div></a> <a href="https://m.jxbh.cn/case/index.html"><div class="bh-fdiv"> <div class="bh-fimg"><img src="/public/home/images/mobile/case.png" width="18"></div> <div class="bh-ffont">案例</div> </div></a> <a href="https://m.jxbh.cn/index.html"><div class="bh-fmore"> <div class="bh-mymore"></div> <div class="bh-myfont"></div> </div></a> <a href="https://m.jxbh.cn/info/index.html"><div class="bh-fdiv"> <div class="bh-fimg"><img src="/public/home/images/mobile/new.png" width="20"></div> <div class="bh-ffont">动态</div> </div></a> <a href="https://m.jxbh.cn/contact/index.html"><div class="bh-fdiv"> <div class="bh-fimg"><img src="/public/home/images/mobile/contact.png" width="16"></div> <div class="bh-ffont">联系</div> </div></a> </div>  <a href='tel:4006809298'><div class="tel-icon"><span class="icon icon-comment"></span><div class="tel-num">咨询</div></div></a> <script type="text/javascript"> $(".bh-fmenu").animate({"bottom":"0"},500,function(){}); $.post('https://m.jxbh.cn/online/index.html', {'online':1},function(data){},'json'); $(".bh-fixtop").click(function(e) { $("html,body,php").animate({scrollTop: 0}, 400); }); console.log('Welcome to http://www.jxbh.cn'); </script> </body> </html>