如何使用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"> <ul> <li class="article-top"><a href="https://www.jxbh.cn/article/2044.html"><span class="icon icon-menu-left"></span> 上一篇</a></li> <li class="article-back"><a href="https://www.jxbh.cn/knowledge/index.html"><span class="icon icon-list"></span> 返回列表</a></li> <li class="article-next"><a href="https://www.jxbh.cn/article/2042.html">下一篇 <span class="icon icon-menu-right"></span></a></li> </ul> </div>  <div class="i-showpicture"> <div class="i-showpic-arrowleft"></div> <div class="i-showpic-picbox"> <div class="i-showpic-div"></div> </div> <div class="i-showpic-arrowright"></div> <div class="i-showpic-close animated"></div> <input type="hidden" value="0" id="pic-index"> </div>  <script type="text/javascript"> $(".article-content img").addClass("img-thumbnail"); $("body").on("click",".article-content img",function(e){ var cksub = 0; var $file = $(this).attr("src"); $(".i-showpic-pic").remove(); $("#pic-index").val(0); var w = $(window).width(); $(".i-showpic-picbox").css({"width":w+"px",'height':$(window).height()+'px'}); cmask(); var picObj = $(".article-content img"); if(picObj.length > 0) { $(".i-showpic-div").css({"width":w*picObj.length+"px",'height':$(window).height()+'px','left':0}); for(var i=0;i<picObj.length;i++) { if ($file == picObj.eq(i).attr('src')) cksub = i; $(".i-showpic-div").append('<div class="i-showpic-pic" style="width:'+w+'px;height:'+$(window).height()+'px;"><img src="'+picObj.eq(i).attr('src')+'" /></div>'); } setTimeout(function(){ for(var j=0;j<picObj.length;j++) { var imgs = picObj.eq(j).attr('src'); var image = new Image(); image.src = imgs; var pic_h = image.height; var pic_w = image.width; var h = parseInt($(window).height()); itop = 0; if( pic_h >= h ) { pic_w = ((h-50)/pic_h)*pic_w; pic_h = h-50; //高度 } itop = parseInt(parseInt(h-pic_h)/2); $(".i-showpic-pic").eq(j).find("img").css({"margin-top":itop+"px","width":pic_w+'px',"height":pic_h+'px','display':'block'}); if (cksub == j) { //选择的图片 $(".i-showpic-div").animate({"left":(0-w*(j))+"px"}); $("#pic-index").val(j); } } },400); } $(".i-showpic-arrowleft,.i-showpic-arrowright").show(); $(".i-showpicture").show(); }); //左右切换 $(".i-showpic-arrowright").click(function(e) { var w = $(window).width(); var i = parseInt($("#pic-index").val())+1; var l = $(".i-showpic-div .i-showpic-pic").length; if(i < l){ $(".i-showpic-div").animate({"left":(0-w*(i))+"px"}); $("#pic-index").val(i); } if (i==l){ $(".i-showpic-div").animate({"left":"0px"}); $("#pic-index").val(0); } }); $(".i-showpic-arrowleft").click(function(e) { var w = $(window).width(); var i = parseInt($("#pic-index").val())-1; if(i >= 0){ $(".i-showpic-div").animate({"left":(0-w*(i))+"px"}); $("#pic-index").val(i); } if ( $("#pic-index").val() == 0) { if($(".i-showpic-pic").length>2) { $(".i-showpic-div").animate({"left":(0-w*($(".i-showpic-pic").length-1))+"px"},500,function(){}); $("#pic-index").val($(".i-showpic-pic").length-1); } else if ($(".i-showpic-pic").length == 2 && (i+1) == 0){ $(".i-showpic-div").animate({"left":(0-w)+"px"},500,function(){}); $("#pic-index").val(1); } } }); //关闭大图显示器 $(document).on('click',function(e){ var target = $(e.target); if( target.closest(".i-showpic-picbox").length == 1 || target.closest(".i-showpic-arrowleft").length == 1 || target.closest(".i-showpic-arrowright").length == 1 || target.closest(".i-showpic").length == 1 || target.closest(".i-zoompic").length == 1 || target.closest(".article-content img").length == 1){ return false; } $(".cscreen").remove("*"); $(".i-showpicture").hide(300); }); $(".i-showpic-close").hover(function(e) { $(this).addClass('rotateIn'); },function(e){ $(this).removeClass('rotateIn'); }); </script> <div class="bh-footer"> <div class="footer-main"> <div class="bh-smenu"> <a href="https://www.jxbh.cn/index.html">首页</a> <a href="https://www.jxbh.cn/website/index.html">网站建设</a> <a href="https://www.jxbh.cn/apps/index.html">APP开发</a> <a href="https://www.jxbh.cn/promotion/index.html">全网营销</a> <a href="https://www.jxbh.cn/software/index.html">软件开发</a> <a href="https://www.jxbh.cn/case/index.html">经典案例</a> <a href="https://www.jxbh.cn/knowledge/index.html">网站知识</a> <a href="https://www.jxbh.cn/about/index.html">关于我们</a> <a href="https://www.jxbh.cn/contact/index.html">联系我们</a> <a href="http://www.jxid.cn/services/domain/" target="_blank" rel="nofollow">域名注册</a> <a href="http://www.jxid.cn/services/cloudhost/" target="_blank" rel="nofollow">云服务器</a> <a href="http://www.jxid.cn/services/webhosting/" target="_blank" rel="nofollow">虚拟主机</a> </div> <div class="bh-copyright"> Copyright @ 2006-2024 https://www.jxbh.cn Inc. All Rights resreved. <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=36010902000406" rel="nofollow"><img src="/public/home/images/icon/copyicon.png" style="position:relative; top:0px;" alt="赣公网安备案" title="赣公网安备案"> 赣公网安备36010902000406号</a> <a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">[赣ICP备17008688号-5]</a> <a href="/sitemap.xml" target="_blank" class="sitemap">网站地图</a> <span class="hide"><script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F290578c838837356a5dcbcbb971d7399' type='text/javascript'%3E%3C/script%3E")); </script></span>   <a href="http://tongji.baidu.com/web/welcome/ico?s=290578c838837356a5dcbcbb971d7399" rel="nofollow" target="_blank"> <span class="icon icon-stats"></span> 百度统计</a>   <a href="http://jigsaw.w3.org/css-validator/validator?lang=zh-cn&profile=css3svg&uri=https%3A%2F%2Fwww.jxbh.cn%2Fpublic%2Fhome%2Fcss%2Fcommon.css&usermedium=all&vextwarning=&warning=1" rel="nofollow" target="_blank"><img src="/public/home/images/icon/css.png" style="position: relative; top: 0px;" height="21" alt="南昌百恒网络公司通过W3C检验标准!" title="南昌百恒网络公司通过W3C标准验证!" /></a> </div> <div class="bh-copyright">我们专注于<a href="https://www.jxbh.cn/website/index.html" target="_blank">南昌网站建设</a>，<a href="https://www.jxbh.cn/apps/index.html">南昌APP开发</a>，<a href="https://www.jxbh.cn/xcx/index.html" target="_blank">南昌小程序开发</a>，等一站式互联网开发服务；<a href="https://www.jxbh.cn">南昌做网站</a>，<a href="https://www.jxbh.cn" target="_blank">南昌网络公司</a>就找<a href="https://www.jxbh.cn/about/index.html" target="_blank">百恒网络</a> </div> <div class="bh-shareicon"> <a href="" target="_blank"><div class="bh-sina" title="新浪微博"></div></a> <div class="bh-phone"> <div class="bh-a-b"></div> <div class="bh-phonehide">400-680-9298,0791-88117053</div> </div> <div class="bh-weixin" title="扫一扫关注百恒网络微信公众号"> <div class="bh-hideweixin"><img src="https://www.jxbh.cn/uploads/images/20211210/61b2c8180ee48.png" width="130" alt="扫一扫关注百恒网络微信公众号"></div> </div> <div class="bh-xiaochengxu" title="扫一扫打开百恒网络小程序"> <div class="bh-hidexiaochengxu"><img src="/public/home/images/weixin/bh-code.jpg" width="130" alt="扫一扫打开百恒网络小程序"></div> </div> </div> </div> </div> <div class="bh-fixright"> <a href="javascript:void(0);"><div class="bh-fixqq" title="点击QQ交谈"></div></a> <div class="bh-fixtel"> <div class="bh-fixhide"></div> <div class="bh-fixhidetel">400-680-9298,0791-88117053</div> </div> <a href="https://im.jxbh.cn/im.html" target="_blank"><div class="bh-baiduqiao" title="点击在线咨询"></div></a> <div class="bh-fixweixin"> <div class="bh-fixweixinhide"> <img src="https://www.jxbh.cn/uploads/images/20211210/61b2c8180ee48.png" width="135" alt="扫一扫关注百恒网络微信公众号"> </div> </div> <div class="bh-fixxiaochengxu"> <div class="bh-fixxiaochengxunhide"> <img src="/public/home/images/weixin/bh-code.jpg" width="135" alt="扫一扫打开百恒网络小程序"> </div> </div> <div class="bh-fixtop"></div> </div> <div class="bh-qiao"> <h2><span><font class="icon icon-comment"></font> 欢迎您的光顾，我们将竭诚为您服务</span><b>×</b></h2> <div class="qiao-main"> <iframe name="qiao" id="qiaoview" scrolling="no" frameborder="0" width="100%" height="100%" src="/home/cases/bhloading.html">