使用 CSS 追踪用户
原文地址:Crooked Style Sheets
作者:jbtronics
除了使用 JS 追踪用户,现在有人提出了还可以使用 CSS 进行网页追踪和分析,译者认为,这种方式更为 优雅,更为 简洁,且 不好屏蔽,值得尝试一波,了解更多,可查看 仓库地址 和 demo
我们可以用它来做什么
我们可以收集关于用户的一些基本信息,例如 屏幕分辨率(当浏览器最大化时)以及用户使用的什么浏览器(引擎)
此外,我们可以监测用户是否点击某个链接或鼠标悬停在某个元素上,用来 追踪用户悬停的链接,甚至可以 追踪用户如何移动鼠标(在页面使用不可见的字段),然而,使用目前我的方法只能追踪用户的第一次点击或悬停,我相信,修改我的方法最终可以实现追踪用户的每次点击
最后,我们还可以监测用户是否安装了某个特殊的字体,基于这个信息,我们可以追踪用户使用的 操作系统,因为不同操作系统使用的字体也稍有不同,例如 Windows 的 Calibri
这又是如何实现的
普通的做法
用 CSS 你可以使用 url("foo.bar") 属性引用外部资源添加图像,有趣的是,这个资源只在需要的时候被加载(例如,当链接被点击时)
所以,我们可以用 CSS 创建一个选择器,当用户点击某个链接时调用某个特定的 UPL
#link2:active::after {
content: url('track.php?action=link2_clicked');
}
服务端,php 脚本会在调用 URL 时保存时间戳
浏览器监测
浏览器监 测是基于 @supports Media-Query 的,我们可以监测浏览器的一些特殊的属性
,例如 -webkit-appearance
```
@supports (-webkit-appearance: none) {
#chrome_detect::after {
content: url('track.php?action=browser_chrome');
}
}
```
字体监测
对于 字体监测,需要定义一个新的字体,如果一个字体存在,文本会尝试使用该字体进行样式设置,然而,当用户在系统上找不到该字体时,定义的字体会作为备用,在这种情况下,浏览器会尝试去加载定义的字体并在服务器上调用追踪脚本
```
/** Font detection **/
@font-face {
font-family: Font1;
src: url('track.php?action=font1');
}
font_detection1 {
font-family: Calibri, Font1;
}
<h3>悬停监测</h3>
对于 悬停监测(基于 jeyroik 的想法),我们需定义一个关键帧,每次使用这个关键帧都要去请求一个 URL
@keyframes pulsate {
0% {
background-image: url('track.php?duration=00');
}
20% {
background-image: url('track.php?duration=20');
}
40% {
background-image: url('track.php?duration=40');
}
60% {
background-image: url('track.php?duration=60');
}
80% {
background-image: url('track.php?duration=80');
}
100% {
background-image: url('track.php?duration=100');
}
}
然后,我们使用定义的关键帧创建动画,我们可以定义动画持续的时间,这也是我们测量的最大时间
duration:hover::after {
-moz-animation: pulsate 5s infinite;
-webkit-animation: pulsate 5s infinite;
/animation: pulsate 5s infinite;/
animation-name: pulsate;
animation-duration: 10s;
content: url('track.php?duration=-1');
}
我们可以通过补充关键帧的设置,来优化分辨率的监测
<h3>输入监测</h3>
监测用户选中了某个复选框,我们可以使用 CSS 提供的 :selected 选择器
checkbox:checked {
content: url('track.php?action=checkbox');
}
为了监测字符串,我们结合了 HTML pattern 属性,它可以帮助我们解决一些基本的输入验证,再结合 :valid 选择器,浏览器当输入匹配成功时会去请求我们的追踪站点
#text_input:valid {
background: green;
background-image: url('track.php?action=text_input');
}
```
Demo
点击 这里 你可以查看该仓库的一个 demo。index.html 实践了的上述的方法,访问 results.php 可以查看结果
如果属性后面没有任何 content 或有 php 警告 出现,这就意味着这个属性的值为 false 或用户还没访问页面或链接(这个,确实很烦,但你可以知道这些方法的原理)
此外,分辨率监测还不是特别的准确,因为目前只能监测最常用的屏幕宽度。最后还想说的是,监测用户实际屏幕的宽度并没有想象中的那么简单,因为 CSS 监测的高度为浏览器窗口的高度,而通常由于系统面板 / 任务栏的原因,使得浏览器窗口要小于显示器
有什么办法可以防止使用上面的方法进行追踪
目前我知道的唯一办法就是 完全禁用 CSS(你可以使用像 uMatrix 的插件来实现),但它的代价也是十分巨大的,没有 CSS,网页就没有之前那么赏心悦目了,甚至导致无法正常使用,所以,禁用 CSS 算不上一个真正的选择,除非,你实在担心你的隐私(例如,当你在使用 Tor 浏览器,也许你应该禁用 CSS)
一个更好的解决方案是,在网页加载时,浏览器不会去加载需要的外部资源,这样,就不可能监测到用户的个人行为,这种对内容加载的修改可以通过浏览器来实现,也可以通过插件来实现(类似 NoScript 或 uMatrix)
上述方法也存在一个明显的问题,那就是 对性能会造成一定的影响,因为浏览器会在初始化页面时加载大量的内容(有些内容是页面根本不需要的)
原文地址:https://segmentfault.com/a/1190000012901505
使用 CSS 追踪用户的更多相关文章
- WTF Forms – 使用 CSS 实现用户体验更好的表单
WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...
- 使用 CSS 接收用户的点击事情并对相关节点进行操作
问题背景:使用纯 CSS 方案,实现导航栏tab切换 实现 Tab 切换的难点在于如何使用 CSS 接收到用户的点击事情并对相关的节点进行操作.即是: 如何接收点击事件 如何操作相关DOM 下面看看如 ...
- Vue前端数据采集 埋点 追踪用户系列行为
什么是埋点? 综合 vue埋点 埋点分析,是网站分析的一种常用的数据采集方法.数据埋点分为初级.中级.高级三种方式.数据埋点是一种良好的私有化部署数据采集方式. 埋点技术如何采集数据,有何优缺 ...
- 研究发现:TLS1.3中的 TLS 对话恢复机制可以追踪用户
由于隐私浏览器技术的日渐成熟,网站越来越无法通过 Cookie 和网页浏览器特征来追踪用户,但道高一尺魔高一丈,现在这些网站会用 TLS 1.3 中的 TLS 对话恢复机制追踪用户. 你以为禁用浏览器 ...
- 使用HTML5 -Canvas追踪用户,Chrome隐身模式阵亡
中国的一些精准营销公司又要偷着乐了= =从之前追踪Cookie到后面追踪FlashCookie,某些商家总在永无止境的追踪用户行为甚至是隐私,将其转化为所谓的“商业价值”.我们被迫面临“世风日下.道德 ...
- Cookie已经过时,细看Facebook, Google, Apple如何追踪用户
http://www.infoq.com/cn/news/2014/10/cookie-facebook-google-apple 链接地址 Cookie,有时也用其复数形式Cookies,指某些网站 ...
- 6款漂亮HTML CSS样式用户留言表单
如今我们的网站.页面更加需要注重细节,不论是字体的样式.还是图片的分辨率清晰度都会影响到用户的访问体验和PV,以及用户以后是否会回访我们的网站/博客.如果有时间的时候,老左也会浏览和阅读相关的前端网站 ...
- iOS7 断了统计和追踪用户的后路
评论里大家都认可用identifierForVendor 然后用keychain和iCloud各保存一份. 看来这是接近最终结果的办法了. 官方文档又说了下面的话, 又有点费解. 我们只要把最后一组s ...
- css禁止用户选中文本(转)
body{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE1 ...
随机推荐
- JavaScript 复杂判断的优雅写法
JavaScript 复杂判断的优雅写法 <div> <input type="button" name="btn" value=" ...
- Python MongoDB 教程
基于菜鸟教程实际操作后总结而来 Python MongoDB MongoDB 是目前最流行的 NoSQL 数据库之一,使用的数据类型 BSON(类似 JSON). MongoDB 数据库安装与介绍可以 ...
- PAT 1097. Deduplication on a Linked List (链表)
Given a singly linked list L with integer keys, you are supposed to remove the nodes with duplicated ...
- mac上常用的命令
平时会经常遇到的问题做一个总结
- vim学习1-入门指令
使用vim命令进入vim界面 vim后面加上你要打开的已存在的文件名或者不存在(则作为新建文件)的文件名. 打开Xfce终端,输入以下命令 $ vim practice_1.txt 直接使用vim也可 ...
- BUPT2017 springtraining(16) #3 ——搜索与动态规划
题目在这里啊 A.最长上升子序列,范围很小所以写了简单的O(n^2)算法 #include <iostream> #define rep(i, j, k) for(int i = j;i ...
- Maven学习总结(27)——Maven自定义打包插件maven-assembly-plugin详解
Assembly插件会生成 "assemblies", 此特性等同于的Maven 1 distribution plug-in..该插件不仅支持创建二进制归档文件,也支持创建源码归 ...
- Pycharm 的基本操作
下载:https://www.jetbrains.com/pycharm/ 安装:随意安装在那个目录都可以 注册:可以采用 激活码 或者激活服务器,并对应在选项下面填入激活码或者激活服务器URL即可. ...
- mysql参数设置与查看
查看默认的参数设置(包含读取到的参数文件中的设置) mysqld --verbose --help 查看默认的参数设置(不包含参数文件中的设置) mysqld --no-defaults --ve ...
- vjudge B - Design T-Shirt
B - Design T-Shirt 思路:水题,模拟即可. #include<cstdio> #include<cstring> #include<iostream&g ...