文章插图
文章插图
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来欺骗服务器,[email protected] at-rule测试特定于浏览器的CSS属性来规避它 。例如,以下操作通过检测-webkit-appearance可用,以及-ms-ime-align不可用,来检测是否为Chrome浏览器:
操作系统探测
为了正确检测用户操作系统,在这个跟踪中动用了字体检测 。例如,通过检测浏览器是否支持Calibri字体系列,就可以判断浏览器是不是在Windows中运行:
方法也有个示例的页面证明可以识别除了上述提到一些信,还有其他的数据,包括浏览器窗口的大小和方向,用户是否点击了链接,以及用户将鼠标悬停在元素上的时间 。
下面是虫虫操作后跟踪到的信息的展示页面:
反追踪方法
在浏览器中很难防止这种攻击 。可以借助一个跨站注入漏洞来完美实现信息窃取,还非常难于发现 。如果想要完全避免这种攻击,除非禁用CSS,但是这样一来网站也就挂掉了 。虽然无法完全杜绝攻击,但是我们可以使用内容安全策略(CSP)增加其利用的难度 。
CSP是一组规则,用于确定浏览器可以执行和不执行的操作 。CSP通常用于防止跨浏览器加载不受信任的脚本导致的跨站点脚本(XSS)和其他攻击 。虽然通常与JavaScript文件一起使用,但CSP也可以应用于CSS样式表 。
我们假设由第三方提供商托管的样式表的网站,攻击者危及样式表并将用户跟踪添加到页面上的链接如下:
当用户单击该链接时,他们的浏览器会其他网站上的跟踪脚本 。由于该行为是通过浏览器完成的,因此网站所有者完全不知道该漏洞 。内容安全策略通过设置允许的样式以及来源网站,就可以避免调用非法来源的链接 。
禁用内联样式
禁用内联样式是CSP提供的最大安全优势之一 。内联样式是直接在HTML文档中声明(或通过JavaScript设置)的样式,而不是从样式表中加载的样式 。内联样式,尤其是动态生成的样式或用户创建的样式,非常难以调试和保护 。所以CSP通常会阻止所有内联样式,并将那些经过特别批准的内容列入白名单 。
以下规则阻止所有内联样式以及外部托管的样式表:
Content-Security-Policy "style-src 'self';"使用哈希和随机数验证样式
如果阻止内联样式不能禁止,我们仍然可以使用哈希和随机数确保CSS的完整性 。
在样式表或内联样式上执行散列函数时,除非样式更改,否则它应该始终返回相同的结果 。这对于将某些内联样式和样式表列入白名单非常有用,同时可以验证样式是否未被修改或篡改 。
Nonces则使用哈希类似的功能 。但是加入了随机数,为每个请求生成一个新的随机数,使攻击者更难以猜测其值 。这避免了哈希的关键缺点:多个输入可能生成相同的哈希 。
对外部样式表进行验证
样式表通常托管在第三方服务器上,例如CDN中,这会导致一个新的攻击入口 。如果CDN遭到入侵,怎么能阻止攻击篡改托管的CSS呢?
答案是SRI,可以使用资源完整性(SRI)解决此问题 。
SRI使用哈希来验证脚本和样式表的内容 。计算每个文件的哈希并将其附加到HTML元素的完整性属性 。当浏览器下载脚本或样式表时,它会计算其哈希值并将其与存储在属性中的值进行比较 。如果匹配,才会加载脚本或样式 。
【div禁止点击事件 css隐藏元素的方法中可以触发点击事件】虽然通过CSS跟踪用户的能力并不是什么新鲜事,但它确实需要我们对网络上的隐私和安全性进行不同的思考 。CSS是现代网络的基本语言之一,禁用网站的CSS户导致大部分网站无法使用 。Content-Security-Policy是防止XSS攻击和CSS泄露的最佳方法 。关注虫虫,浏览更多技术原创文章 。
- 如何获取div中的内容 jquery获取div内容
- 日本福岛食品解禁了吗 为什么禁止从日本福岛进口
- 电脑桌面点击右键没有新建文件夹 电脑右键怎么没有新建文件夹
- JavaScript获取div高度 css获取div高度
- 两个div并排显示 两个div怎么并列
- css超出部分滚动条 div内容超出后自动显示滚动条
- windows7怎么禁止更新 win7停止更新设置
- 怎么获取div的值 js获取html的值
- div 文字换行 css div自动换行
- div中的div居中对齐 div中div垂直居中对齐