在HTML頁(yè)面中，標(biāo)簽廣泛用于嵌入另一個(gè)文檔。很多廣告引擎依靠使用這個(gè)標(biāo)簽來(lái)顯示在網(wǎng)站中嵌入的營(yíng)銷部件。<br /> ? ? ? ?與其他HTML標(biāo)簽和功能類似，<iframe>同樣可被用于承載攻擊。只要想實(shí)現(xiàn)持久化，內(nèi)嵌框架總是首選方案，為什么這么說(shuō)呢？南昌網(wǎng)絡(luò)公司小編認(rèn)為有以下兩個(gè)原因：<br /> ? ? ? ?第一，你可以完全控制內(nèi)嵌框架的DOM內(nèi)容，也就是說(shuō)CSS內(nèi)容也可以控制；<br /> ? ? ? ?第二，內(nèi)嵌框架主要用于在當(dāng)前頁(yè)面嵌入其他文檔的事實(shí)，為持久化通信渠道提供了直截了當(dāng)?shù)姆椒ā?br /> ? ? ? ?不過(guò)由于可以控制內(nèi)嵌框架中的DOM，包括HTML、CSS和JavaScript，所以你也可以利用內(nèi)嵌框架把當(dāng)前頁(yè)面加載到一個(gè)疊加層里，從而在后臺(tái)保持通信渠道暢通。所謂疊加層，指的是一個(gè)頁(yè)面組件，比如一個(gè)內(nèi)嵌框架可以在頁(yè)面上看到，但代碼及其他元素在后臺(tái)并不可見(jiàn)，而是持續(xù)執(zhí)行自己的邏輯。此外，HTML5的History API也很方便，特別適合在地址欄中遮蔽真正的URL。<br /> ? ? ? ?設(shè)想一個(gè)Web應(yīng)用在用戶認(rèn)證前存在反射型XSS漏洞。你已經(jīng)勾連目標(biāo)，但XSS并不持久。為了防止丟失到目標(biāo)瀏覽器的連接，你可以創(chuàng)建一個(gè)疊加層內(nèi)嵌框架。這個(gè)內(nèi)嵌框架沒(méi)有邊框，寬度和高度都是100%，源屬性指向該Web應(yīng)用的登錄頁(yè)面。<br /> ? ? ? ?在內(nèi)嵌框架渲染后的極短時(shí)間內(nèi)，被勾連瀏覽器會(huì)顯示登錄頁(yè)面的內(nèi)容，但地址欄中的URI仍然是以前的。而目標(biāo)在這個(gè)頁(yè)面上執(zhí)行的任何操作都會(huì)在疊加層內(nèi)嵌框架中發(fā)生，相當(dāng)于把目標(biāo)有效地捕獲到了一個(gè)新框架內(nèi)。與此同時(shí)，在后臺(tái)，通信渠道仍然運(yùn)行，你還可以繼續(xù)發(fā)送命令，與目標(biāo)瀏覽器交互。<br /> ? ? ? ?目標(biāo)不可能發(fā)現(xiàn)攻擊，唯一可能引起注意的事件，就是渲染內(nèi)嵌框架時(shí)發(fā)生的頁(yè)面重載，以及瀏覽器地址欄中包含了與目標(biāo)期望不一樣的URI。<br /> ? ? ? ?下面南昌網(wǎng)絡(luò)公司小編為大家介紹展示一下使用jQuery創(chuàng)建一個(gè)疊加內(nèi)嵌框架的過(guò)程。<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 /> ? ? ? ?從上面可以看出：這個(gè)函數(shù)可以創(chuàng)建疊加層（if type == 'fullscreen'），也可以創(chuàng)建隱藏的內(nèi)嵌框架。<br /> ? ? ? ?從代碼看，創(chuàng)建這兩種內(nèi)嵌框架的區(qū)別就是CSS選擇符不同。如果是隱藏的內(nèi)嵌框架，就使用最小的框架大?。?像素），而且沒(méi)有邊框，再使用visibility和display屬性使其不可見(jiàn)。如果是層疊式嵌入框架，則元素尺寸最大化，刪除窗口上部和左側(cè)多余的空間。<br /> ? ? ? ?為了通過(guò)層疊式內(nèi)嵌框架嵌入文檔，需要通過(guò)自定義的CSS選擇器刪除其邊框，并正確將新元素定位，包括控制它在瀏覽器窗口的大小。正確的大小是外邊距和內(nèi)邊距均為0，高度和寬度均為100%。如果利用這些屬性再加上絕對(duì)元素定位，就可以得到與當(dāng)前瀏覽器窗口邊框完美匹配的內(nèi)嵌框架。<br /> ? ? ? ?前面的例子使用jQuery擴(kuò)展了已有的CSS樣式。創(chuàng)建層疊式內(nèi)嵌框架時(shí)，可以像下面的代碼這樣調(diào)用createIframe函數(shù)。在這個(gè)例子中，加載了同源頁(yè)面login.jsp，沒(méi)有傳入任何CSS規(guī)則或回調(diào)。<br /> ? ? ? ?createIframe('fullscreen',{'src':'/login.jsp'}, {}, null);<br /> ? ? ? ?如果初始勾連的頁(yè)面不一樣，比如是/page.jsp，那么用戶可能發(fā)現(xiàn)疊加了內(nèi)嵌框架后的結(jié)果有問(wèn)題。頁(yè)面的內(nèi)容來(lái)自/login.jsp，而瀏覽器地址欄中顯示的卻是/page.jsp。為了解決這個(gè)問(wèn)題，可以利用HTML5 History API13：<br /> ? ? ? ?history.pushState({be:"EF"}, "page x", "/login.jsp");<br /> ? ? ? ?執(zhí)行前面的代碼會(huì)讓瀏覽器把地址欄中顯示的內(nèi)容改成http://<勾連的域>/login.jsp。<br /> ? ? ? ?很明顯，為了安全起見(jiàn)，必須向pushState傳入一個(gè)同源的URL，否則就可能觸發(fā)安全警報(bào)。使用pushState操縱瀏覽器地址欄最有意思的是，瀏覽器并不會(huì)加載指定的資源，比如這里的/login.jsp，而且這個(gè)資源都不一定需要真實(shí)存在。<br /> ? ? ? ?最后，南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)想告訴大家的是：利用內(nèi)嵌框架實(shí)現(xiàn)對(duì)目標(biāo)瀏覽器的持續(xù)控制，只是可供使用的多種技術(shù)之一。這種技術(shù)的優(yōu)點(diǎn)是得到瀏覽器廣泛支持，而在當(dāng)前內(nèi)容上疊加相同內(nèi)容更具隱蔽性，不容易被發(fā)現(xiàn)。不過(guò)這種技術(shù)也有局限性。如果你想嵌入的內(nèi)容中包含擴(kuò)張內(nèi)嵌框架的代碼，或者限制性X-Frame-Options首部，那就要使用其他技術(shù)了，如果想深入了解這些技術(shù)的朋友，歡迎繼續(xù)關(guān)注百恒網(wǎng)絡(luò)官網(wǎng)動(dòng)態(tài)。同時(shí)，百恒網(wǎng)絡(luò)專業(yè)為您提供網(wǎng)站建設(shè)、微信開(kāi)發(fā)、手機(jī)APP開(kāi)發(fā)等服務(wù)，如有需要，隨時(shí)歡迎和我們聯(lián)系，我們將專業(yè)為您服務(wù)！ </p> </div> </div> <div id="czhixnj" class="article-pager"> <ul> <li id="krhsntj" class="article-top"><a href="http://www.myforexfactory.net/article/2044.html"><span id="htiypa3" class="icon icon-menu-left"></span> 上一篇</a></li> <li id="rj3jx7g" class="article-back"><a href="http://www.myforexfactory.net/knowledge/index.html"><span id="2hmw3yz" class="icon icon-list"></span> 返回列表</a></li> <li id="8tjejja" class="article-next"><a href="http://www.myforexfactory.net/article/2042.html">下一篇 <span id="7wrmcsd" class="icon icon-menu-right"></span></a></li> </ul> </div>  <div id="xkpppuu" class="i-showpicture"> <div id="wytzp72" class="i-showpic-arrowleft"></div> <div id="kx2u8ok" class="i-showpic-picbox"> <div id="3pezqm8" class="i-showpic-div"></div> </div> <div id="jgwcdnc" class="i-showpic-arrowright"></div> <div id="ahcsmmb" 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 id="dffqgqb" 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); } } }); //關(guān)閉大圖顯示器 $(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 id="urmwwbc" class="bh-footer"> <div id="szoykxd" class="footer-main"> <div id="pwlwk33" class="bh-smenu"> <a href="http://www.myforexfactory.net/index.html">首頁(yè)</a> <a href="http://www.myforexfactory.net/website/index.html">網(wǎng)站建設(shè)</a> <a href="http://www.myforexfactory.net/apps/index.html">APP開(kāi)發(fā)</a> <a href="http://www.myforexfactory.net/promotion/index.html">全網(wǎng)營(yíng)銷</a> <a href="http://www.myforexfactory.net/software/index.html">軟件開(kāi)發(fā)</a> <a href="http://www.myforexfactory.net/case/index.html">經(jīng)典案例</a> <a href="http://www.myforexfactory.net/knowledge/index.html">網(wǎng)站知識(shí)</a> <a href="http://www.myforexfactory.net/about/index.html">關(guān)于我們</a> <a href="http://www.myforexfactory.net/contact/index.html">聯(lián)系我們</a> <a target="_blank" rel="nofollow">域名注冊(cè)</a> <a target="_blank" rel="nofollow">云服務(wù)器</a> <a target="_blank" rel="nofollow">虛擬主機(jī)</a> </div> <div id="3zvfa23" class="bh-copyright"> Copyright @ 2006-2025 http://www.myforexfactory.net Inc. All Rights resreved. <a target="_blank" rel="nofollow"><img src="/public/home/images/icon/copyicon.png" style="position:relative; top:0px;" alt="贛公網(wǎng)安備案" title="贛公網(wǎng)安備案"> 贛公網(wǎng)安備36010902000406號(hào)</a> <a target="_blank" rel="nofollow">[贛ICP備17008688號(hào)-5]</a> <a href="/sitemap.xml" target="_blank" class="sitemap">網(wǎng)站地圖</a> <span id="2nso7cs" class="hide"><script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "#/h.js%3F290578c838837356a5dcbcbb971d7399' type='text/javascript'%3E%3C/script%3E")); </script></span>   <a href="http://#baidu.com/web/welcome/ico?s=290578c838837356a5dcbcbb971d7399" rel="nofollow" target="_blank"> <span id="cfjjz8e" class="icon icon-stats"></span> 百度統(tǒng)計(jì)</a>   <a rel="nofollow" target="_blank"><img src="/public/home/images/icon/css.png" style="position: relative; top: 0px;" height="21" alt="南昌百恒網(wǎng)絡(luò)公司通過(guò)W3C檢驗(yàn)標(biāo)準(zhǔn)!" title="南昌百恒網(wǎng)絡(luò)公司通過(guò)W3C標(biāo)準(zhǔn)驗(yàn)證!" /></a> </div> <div id="prrrcsc" class="bh-copyright">我們專注于<a href="http://www.myforexfactory.net/website/index.html" target="_blank">南昌網(wǎng)站建設(shè)</a>，<a href="http://www.myforexfactory.net/apps/index.html">南昌APP開(kāi)發(fā)</a>，<a href="http://www.myforexfactory.net/xcx/index.html" target="_blank">南昌小程序開(kāi)發(fā)</a>，等一站式互聯(lián)網(wǎng)開(kāi)發(fā)服務(wù)；<a href="http://www.myforexfactory.net">南昌做網(wǎng)站</a>，<a href="http://www.myforexfactory.net" target="_blank">南昌網(wǎng)絡(luò)公司</a>就找<a href="http://www.myforexfactory.net/about/index.html" target="_blank">百恒網(wǎng)絡(luò)</a> </div> <div id="an8a7oz" class="bh-shareicon"> <a href="" target="_blank"><div id="3l274zp" class="bh-sina" title="新浪微博"></div></a> <div id="olqbwl8" class="bh-phone"> <div id="ow2jzpp" class="bh-a-b"></div> <div id="ctozpxi" class="bh-phonehide">400-680-9298,0791-88117053</div> </div> <div id="nzpul3h" class="bh-weixin" title="掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)"> <div id="8ifl8kg" class="bh-hideweixin"><img src="http://www.myforexfactory.net/uploads/images/20211210/61b2c8180ee48.png" width="130" alt="掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)"></div> </div> <div id="ltitnin" class="bh-xiaochengxu" title="掃一掃打開(kāi)百恒網(wǎng)絡(luò)小程序"> <div id="anhshs8" class="bh-hidexiaochengxu"><img src="/public/home/images/weixin/bh-code.jpg" width="130" alt="掃一掃打開(kāi)百恒網(wǎng)絡(luò)小程序"></div> </div> </div> </div> </div> <div id="lsxyd3j" class="bh-fixright"> <a href="javascript:void(0);"><div id="sf2x3lq" class="bh-fixqq" title="點(diǎn)擊QQ交談"></div></a> <div id="ublbcsi" class="bh-fixtel"> <div id="ivkavgb" class="bh-fixhide"></div> <div id="vcwq3tu" class="bh-fixhidetel">400-680-9298,0791-88117053</div> </div> <a target="_blank"><div id="k8sv83e" class="bh-baiduqiao" title="點(diǎn)擊在線咨詢"></div></a> <div id="vhctbkv" class="bh-fixweixin"> <div id="ax7brsm" class="bh-fixweixinhide"> <img src="http://www.myforexfactory.net/uploads/images/20211210/61b2c8180ee48.png" width="135" alt="掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)"> </div> </div> <div id="mopa3pf" class="bh-fixxiaochengxu"> <div id="38ydt8c" class="bh-fixxiaochengxunhide"> <img src="/public/home/images/weixin/bh-code.jpg" width="135" alt="掃一掃打開(kāi)百恒網(wǎng)絡(luò)小程序"> </div> </div> <div id="wjj8e83" class="bh-fixtop"></div> </div> <div id="hpe7tyo" class="bh-qiao"> <h2><span><font class="icon icon-comment"></font> 歡迎您的光顧，我們將竭誠(chéng)為您服務(wù)</span><b>×</b></h2> <div id="x8ukg8n" class="qiao-main"> <iframe name="qiao" id="qiaoview" scrolling="no" frameborder="0" width="100%" height="100%" src="/home/cases/bhloading.html">

如何使用jQuery創(chuàng)建疊加內(nèi)嵌框架？

如何使用jQuery創(chuàng)建疊加內(nèi)嵌框架？