文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

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

发布于 2024-01-20 15:41:04 字数 4807 浏览 0 评论 0 收藏 0

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

5.2.1　透明层+iframe

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

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

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

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

Chrome、Firefox、Safari、Opera这四款浏览器使用的CSS透明属性如下。

opacity: 0.5，数值从0到1，数值越小，透明度越高。

控件位置之间的层次关系使用z-index，而且任何浏览器都支持：

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

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

<iframe id="victim" src="http://www.victim.com"scrolling="no">

通过页面透明层+iframe实现了对用户的视觉欺骗，即用户看到的操作对象与实际操作对象是不一致的，从而为界面操作劫持攻击提供了技术手段。

5.2.2　点击劫持技术的实现

有了页面透明层技术和iframe嵌套方法，我们就可以实现点击劫持攻击了。下面给出一个点击劫持的简单示例，clickjacking.html代码如下：

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

<input id="click" value="Click me" type="button"/>
<iframe id="hidden" src="inner.html" scrolling="no"></iframe>

在上述示例中：

· clickjakcing.html是一个用户可见的伪装页面，在其页面中设置iframe所在层为透明层，并在iframe中嵌套了inner.html页面。

· 在clickjacking.html页面中设计“Click me”按钮的位置与inner.html页面中“Login”按钮的位置重合。

· 当用户以为在点击clickjacking.html页面上的“Click me”按钮时，实际上是点击了in-ner.html页面上的“Login”按钮。

5.2.3　拖放劫持技术的实现

1. dataTransfer对象

在拖放劫持攻击中，还需要一种数据传递的方法才能真正达到攻击效果。为了能协助通过拖放操作传递数据，在IE 5.0以后引入了dataTransfer对象，它作为event对象的一个属性出现，用于从被拖动的对象传递字符串到放置对象。dataTransfer现在是HTML5草案的一部分。

dataTransfer对象定义了两个主要方法：get-Data和setData，语句如下：

event.dataTransfer.setData("text","sometext");
event.dataTransfer.setData("URL","http://www.test.com");
var url = event.dataTransfer.getData("URL");
var text = event.dataTransfer.getData("text");

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

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

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

2. 拖放函数

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

表5-1　拖放函数

5.2.4　触屏劫持技术的实现

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

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

1. 桌面浏览器

IPhone Safari浏览器有一个特殊的功能，即可以把网页添加到IOS操作系统的桌面当做一个程序图标来显示。添加后，主屏幕上会出现一个由网页缩略图生成的APP图标。当用户点击这个图标后，就会打开网页，这个功能与快捷键方式类似，如图5-1所示。在桌面浏览器程序中可以设置桌面图标、启动画面，还可以设置页面全屏和更改状态栏样式。

图5-1　Safari UI

添加桌面图标的语句为：

<link rel="apple-touch-icon" href="icon.png"/>

添加启动画面的语句为：

<link rel="apple-touch-startup-image" href="startup.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位置）。

2. 可视区域viewport

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

例如，下面的代码：

<meta name="viewport" content="width=320;initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>

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

width - // viewport 的宽度（范围从200 到10000，默认为980 像素）
initial-scale - // 初始的缩放比例（范围从0 到10）
maximum-scale - // 允许用户缩放到的最大比例
user-scalable - // 用户是否可以手动缩 (no,yes)

3. 隐藏URL地址栏

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

<body onload="setTimeout(function(){window.scrollTo(0, 1) }, 100);">
</body>

4. 触屏函数

对传统的Web设计而言，IPhone IOS的Safari浏览器中有自己独特的触屏API函数，我们可以使用这些函数模拟鼠标键盘的动作。表5-2是IPhone中的触屏（touch）函数。

表5-2　触屏函数

函数说明

· touchstart手指放在屏幕上时触发

· Touchend手指离开屏幕时触发

· touchmove手指在屏幕上移动时触发

· touchcancel系统可以取消touch事件

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

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

5.2.1 透明层+iframe

5.2.2 点击劫持技术的实现

5.2.3 拖放劫持技术的实现

5.2.4 触屏劫持技术的实现

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。