十年专注于品牌网站建设 十年专注于品牌网站建设,低调、高逼格、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

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

百恒网络 2017-07-11 197

在HTML页面中,<iframe>标签广泛用于嵌入另一个文档。很多广告引擎依靠使用这个标签来显示在网站中嵌入的营销部件。
       与其他HTML标签和功能类似,<iframe>同样可被用于承载攻击。只要想实现持久化,内嵌框架总是首选方案,为什么这么说呢?南昌网络公司小编认为有以下两个原因:
       第一,你可以完全控制内嵌框架的DOM内容,也就是说CSS内容也可以控制;
       第二,内嵌框架主要用于在当前页面嵌入其他文档的事实,为持久化通信渠道提供了直截了当的方法。
       不过由于可以控制内嵌框架中的DOM,包括HTML、CSS和JavaScript,所以你也可以利用内嵌框架把当前页面加载到一个叠加层里,从而在后台保持通信渠道畅通。所谓叠加层,指的是一个页面组件,比如一个内嵌框架可以在页面上看到,但代码及其他元素在后台并不可见,而是持续执行自己的逻辑。此外,HTML5的History API也很方便,特别适合在地址栏中遮蔽真正的URL。
       设想一个Web应用在用户认证前存在反射型XSS漏洞。你已经勾连目标,但XSS并不持久。为了防止丢失到目标浏览器的连接,你可以创建一个叠加层内嵌框架。这个内嵌框架没有边框,宽度和高度都是100%,源属性指向该Web应用的登录页面。
       在内嵌框架渲染后的极短时间内,被勾连浏览器会显示登录页面的内容,但地址栏中的URI仍然是以前的。而目标在这个页面上执行的任何操作都会在叠加层内嵌框架中发生,相当于把目标有效地捕获到了一个新框架内。与此同时,在后台,通信渠道仍然运行,你还可以继续发送命令,与目标浏览器交互。
       目标不可能发现攻击,唯一可能引起注意的事件,就是渲染内嵌框架时发生的页面重载,以及浏览器地址栏中包含了与目标期望不一样的URI。
       下面南昌网络公司小编为大家介绍展示一下使用jQuery创建一个叠加内嵌框架的过程。
       createIframe: function(type, params, styles, onload) {
       var css = {};
       if (type == 'hidden') {
       css = $j.extend(true, {
       'border':'none', 'width':'1px', 'height':'1px',
       'display':'none', 'visibility':'hidden'},
       styles);
       }
       if (type == 'fullscreen') {
       css = $j.extend(true, {
       'border':'none', 'background-color':'white', 'width':'100%',
       'height':'100%',
       'position':'absolute', 'top':'0px', 'left':'0px'},
       styles);
       $j('body').css({'padding':'0px', 'margin':'0px'});
       }
       var iframe = $j('<iframe />').attr(params).css(
       css).load(onload).prependTo('body');
       return iframe;
       }
       从上面可以看出:这个函数可以创建叠加层(if type == 'fullscreen'),也可以创建隐藏的内嵌框架。
       从代码看,创建这两种内嵌框架的区别就是CSS选择符不同。如果是隐藏的内嵌框架,就使用最小的框架大小(1像素),而且没有边框,再使用visibility和display属性使其不可见。如果是层叠式嵌入框架,则元素尺寸最大化,删除窗口上部和左侧多余的空间。
       为了通过层叠式内嵌框架嵌入文档,需要通过自定义的CSS选择器删除其边框,并正确将新元素定位,包括控制它在浏览器窗口的大小。正确的大小是外边距和内边距均为0,高度和宽度均为100%。如果利用这些属性再加上绝对元素定位,就可以得到与当前浏览器窗口边框完美匹配的内嵌框架。
       前面的例子使用jQuery扩展了已有的CSS样式。创建层叠式内嵌框架时,可以像下面的代码这样调用createIframe函数。在这个例子中,加载了同源页面login.jsp,没有传入任何CSS规则或回调。
       createIframe('fullscreen',{'src':'/login.jsp'}, {}, null);
       如果初始勾连的页面不一样,比如是/page.jsp,那么用户可能发现叠加了内嵌框架后的结果有问题。页面的内容来自/login.jsp,而浏览器地址栏中显示的却是/page.jsp。为了解决这个问题,可以利用HTML5 History API13:
       history.pushState({be:"EF"}, "page x", "/login.jsp");
       执行前面的代码会让浏览器把地址栏中显示的内容改成http://<勾连的域>/login.jsp。
       很明显,为了安全起见,必须向pushState传入一个同源的URL,否则就可能触发安全警报。使用pushState操纵浏览器地址栏最有意思的是,浏览器并不会加载指定的资源,比如这里的/login.jsp,而且这个资源都不一定需要真实存在。
       最后,南昌网站建设公司-百恒网络想告诉大家的是:利用内嵌框架实现对目标浏览器的持续控制,只是可供使用的多种技术之一。这种技术的优点是得到浏览器广泛支持,而在当前内容上叠加相同内容更具隐蔽性,不容易被发现。不过这种技术也有局限性。如果你想嵌入的内容中包含扩张内嵌框架的代码, 或者限制性X-Frame-Options首部,那就要使用其他技术了,如果想深入了解这些技术的朋友,欢迎继续关注百恒网络官网动态。同时,百恒网络专业为您提供网站建设、微信开发、手机APP开发等服务,如有需要,随时欢迎和我们联系,我们将专业为您服务!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×