我们可以网络关于用户的一些基本信息,例如 屏幕分辨率(当浏览器最大化时)以及用户利用的什么浏览器(引擎)

此外,我们可以监测用户是否点击某个链接或鼠标悬停在某个元素上,用来 追踪用户悬停的链接,乃至可以 追踪用户如何移动鼠标(在页面利用不可见的字段),然而,利用目前我的方法只能追踪用户的第一次点击或悬停,我相信,修正我的方法终极可以实现追踪用户的每次点击

末了,我们还可以监测用户是否安装了某个分外的字体,基于这个信息,我们可以追踪用户利用的 操作系统,由于不同操作系统利用的字体也稍有不同,例如 Windows 的 Calibri

phpurl加时间戳应用 CSS 追踪用户 JavaScript

这又是如何实现的

普通的做法

用 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');

}

}

字体监测

对付 字体监测,须要定义一个新的字体,如果一个字体存在,文本会考试测验利用该字体进行样式设置,然而,当用户在系统上找不到该字体时,定义的字体会作为备用,在这种情形下,浏览器会考试测验去加载定义的字体并在做事器上调用追踪脚本

悬停监测

对付 悬停监测(基于 jeyroik 的想法),我们需定义一个关键帧,每次利用这个关键帧都要去要求一个 URL

然后,我们利用定义的关键帧创建动画,我们可以定义动画持续的韶光,这也是我们丈量的最大韶光

我们可以通过补充关键帧的设置,来优化分辨率的监测

输入监测

监测用户选中了某个复选框,我们可以利用 CSS 供应的 :selected 选择器

为了监测字符串,我们结合了 HTMLpattern 属性,它可以帮助我们办理一些基本的输入验证,再结合 :valid 选择器,浏览器当输入匹配成功时会去要求我们的追踪站点

Demo

点击 这里 你可以查看该仓库的一个 demo。
index.html 实践了的上述的方法,访问 results.php 可以查当作果

如果属性后面没有任何 content 或有 php 警告 涌现,这就意味着这个属性的值为 false 或用户还没访问页面或链接(这个,确实很烦,但你可以知道这些方法的事理)

此外,分辨率监测还不是特殊的准确,由于目前只能监测最常用的屏幕宽度。
末了还想说的是,监测用户实际屏幕的宽度并没有想象中的那么大略,由于 CSS 监测的高度为浏览器窗口的高度,而常日由于系统面板 / 任务栏的缘故原由,使得浏览器窗口要小于显示器

有什么办法可以防止利用上面的方法进行追踪

目前我知道的唯一办法便是 完备禁用 CSS(你可以利用像 uMatrix 的插件来实现),但它的代价也是十分巨大的,没有 CSS,网页就没有之前那么赏心悦目了,乃至导致无法正常利用,以是,禁用 CSS 算不上一个真正的选择,除非,你实在担心你的隐私(例如,当你在利用 Tor 浏览器,大概你该当禁用 CSS)

一个更好的办理方案是,在网页加载时,浏览器不会去加载须要的外部资源,这样,就不可能监测到用户的个人行为,这种对内容加载的修正可以通过浏览器来实现,也可以通过插件来实现(类似 NoScript 或 uMatrix)

上述方法也存在一个明显的问题,那便是 对性能会造成一定的影响,由于浏览器会在初始化页面时加载大量的内容(有些内容是页面根本不须要的)

架构师视频资料分享链接:

data:text/html;charset=UTF-8;base64,

5p625p6E5biI5a2m5Lmg5Lqk5rWB576k5Y+35pivNTc1NzUxODU0Cg==

复制粘贴在网站即可!