css禁止点击事件的方法(css鼠标禁用样式)

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

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

css禁止点击事件的方法(css鼠标禁用样式)

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

跟踪原理

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

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

css禁止点击事件的方法(css鼠标禁用样式)

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

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

css禁止点击事件的方法(css鼠标禁用样式)

浏览器探测

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

css禁止点击事件的方法(css鼠标禁用样式)

操作系统探测

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

css禁止点击事件的方法(css鼠标禁用样式)

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

css禁止点击事件的方法(css鼠标禁用样式)

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

css禁止点击事件的方法(css鼠标禁用样式)

反追踪方法

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

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

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

css禁止点击事件的方法(css鼠标禁用样式)

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

禁用内联样式

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

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

Content-Security-Policy \"style-src \'self\';\"

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

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

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

css禁止点击事件的方法(css鼠标禁用样式)

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

css禁止点击事件的方法(css鼠标禁用样式)

对外部样式表进行验证

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

答案是SRI,可以使用资源完整性(SRI)解决此问题。

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

css禁止点击事件的方法(css鼠标禁用样式)

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

本文来自投稿,不代表来拓客立场,如若转载,请注明出处:https://www.laituoke.com/ltk/6372.html