CSS代码实现用户跟踪及反跟踪方法

去年，有一位开发者创建了一个网站，用于跟踪和记录用户数据，包括点击，鼠标移动，浏览器类型和操作系统。通过Web应用进行用户跟踪大家已经司空见惯，但是这个网站使用的方法却有点"低端"，低端的让大都为之内心一颤，因为他的方法没有用到动态语言，甚至也没有用到JavaScript，只是纯HTML和一行CSS。这打破长期以来大家认为了CSS改只能静态样式显示的的思维。虫虫今天就来给大家解析的他的方法，并附上如何防止此类跟踪的方法。

跟踪原理

这个方法利用了CSS的两个特性：将内容注入HTML元素的能力（操纵DOM），以及在用户执行操作后更改样式的能力（渲染页面）。该网站的工作原理是使用content属性在执行操作时设置URL。 URL调用一个PHP脚本，该脚本记录有关操作的详细信息，这些操作将作为URL参数传递。使用:: before和:: after CSS选择器设置此URL可确保仅在执行操作时调用URL，而不是在首次加载页面时调用URL。

例如，以下CSS在每次单击#link元素时调用URL：

跟踪脚本包含记录事件时间和执行操作的代码。它还可用于提取用户的IP地址，用户代理和其他识别信息。

以下是这样一个脚本的PHP示例：

浏览器探测

用户可以设置浏览器的User-agent来欺骗服务器，但是该追踪方法中使用@supports at-rule测试特定于浏览器的CSS属性来规避它。例如，以下操作通过检测-webkit-appearance可用，以及-ms-ime-align不可用，来检测是否为Chrome浏览器：

操作系统探测

为了正确检测用户操作系统，在这个跟踪中动用了字体检测。例如，通过检测浏览器是否支持Calibri字体系列，就可以判断浏览器是不是在Windows中运行：

方法也有个示例的页面证明可以识别除了上述提到一些信，还有其他的数据，包括浏览器窗口的大小和方向，用户是否点击了链接，以及用户将鼠标悬停在元素上的时间。

下面是虫虫操作后跟踪到的信息的展示页面：

反追踪方法

在浏览器中很难防止这种攻击。可以借助一个跨站注入漏洞来完美实现信息窃取，还非常难于发现。如果想要完全避免这种攻击，除非禁用CSS，但是这样一来网站也就挂掉了。虽然无法完全杜绝攻击，但是我们可以使用内容安全策略（CSP）增加其利用的难度。

CSP是一组规则，用于确定浏览器可以执行和不执行的操作。 CSP通常用于防止跨浏览器加载不受信任的脚本导致的跨站点脚本（XSS）和其他攻击。虽然通常与JavaScript文件一起使用，但CSP也可以应用于CSS样式表。

我们假设由第三方提供商托管的样式表的网站，攻击者危及样式表并将用户跟踪添加到页面上的链接如下：

当用户单击该链接时，他们的浏览器会其他网站上的跟踪脚本。由于该行为是通过浏览器完成的，因此网站所有者完全不知道该漏洞。内容安全策略通过设置允许的样式以及来源网站，就可以避免调用非法来源的链接。

禁用内联样式

禁用内联样式是CSP提供的最大安全优势之一。内联样式是直接在HTML文档中声明（或通过JavaScript设置）的样式，而不是从样式表中加载的样式。内联样式，尤其是动态生成的样式或用户创建的样式，非常难以调试和保护。所以CSP通常会阻止所有内联样式，并将那些经过特别批准的内容列入白名单。

以下规则阻止所有内联样式以及外部托管的样式表：

使用哈希和随机数验证样式

如果阻止内联样式不能禁止，我们仍然可以使用哈希和随机数确保CSS的完整性。

在样式表或内联样式上执行散列函数时，除非样式更改，否则它应该始终返回相同的结果。这对于将某些内联样式和样式表列入白名单非常有用，同时可以验证样式是否未被修改或篡改。

Nonces则使用哈希类似的功能。但是加入了随机数，为每个请求生成一个新的随机数，使攻击者更难以猜测其值。这避免了哈希的关键缺点:多个输入可能生成相同的哈希。

对外部样式表进行验证

样式表通常托管在第三方服务器上，例如CDN中，这会导致一个新的攻击入口。如果CDN遭到入侵，怎么能阻止攻击篡改托管的CSS呢？

答案是SRI，可以使用资源完整性（SRI）解决此问题。

SRI使用哈希来验证脚本和样式表的内容。计算每个文件的哈希并将其附加到HTML元素的完整性属性。当浏览器下载脚本或样式表时，它会计算其哈希值并将其与存储在属性中的值进行比较。如果匹配，才会加载脚本或样式。

虽然通过CSS跟踪用户的能力并不是什么新鲜事，但它确实需要我们对网络上的隐私和安全性进行不同的思考。CSS是现代网络的基本语言之一，禁用网站的CSS户导致大部分网站无法使用。 Content-Security-Policy是防止XSS攻击和CSS泄露的最佳方法。关注虫虫，浏览更多技术原创文章。