隐私防不胜防—让你一手JavaScript又何妨,仅用 CSS实现网页追踪

大家好,我是最帅气的小编

一日不见,如隔四秋

上一篇推文还是在去年发的

这么久不见我都快不会尬聊了

你们确定不来后台互动一波么

如何实现

基本原理

在 CSS中, 我们可以使用url(“foo.bar”)从外部资源添加图像,这个资源只在需要的时候被加载(例如,当链接被点击时)。

所以,我们可以用 CSS 创建一个选择器,当用户点击某个链接时调用某个特定的 URL。

在服务器端,PHP脚本在调用URL时保存时间戳。

浏览器监测

浏览器监测基于 @supports Media-Query ,我们可以监测浏览器的一些特殊的属性 ,例如 -webkit-appearance。

字体监测

对于字体监测,需要定义一个新的字体,如果一个字体存在,文本会尝试使用该字体进行样式设置。然而,当用户在系统上找不到该字体时,定义的字体会作为备用,在这种情况下,浏览器会尝试去加载定义的字体并在服务器上调用追踪脚本。

悬停监测

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

然后,我们使用定义的关键帧创建动画,我们可以定义动画持续的时间,这也是我们测量的最大时间。

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

输入监测

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

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

Demo

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180122A0WSYN00?refer=cp_1026

扫码关注云+社区