只使用 CSS 进行用户追踪原文地址：User-TrackingWithCSSOn

原文地址： User-Tracking With CSS Only

JavaScript-in-plain-english/tracking-with-css-ec98e3d81046

原文作者： Louis Petrik

@louispetrik

译文出自：掘金翻译计划
本文永久链接：
译者：黄梵高:
校对者： zenblo:

文章插图
在浏览器里进行用户追踪会引发关于隐私和数据保护一次又一次的讨论。类似 Google 分析之类的工具几乎可以抓到所有需要的内容，包括来源，语言，设备，停留时间等等。
但是，想获取一些感兴趣的信息，你可能不需要任何外部追踪器，甚至不需要 JavaScript 。本文将向你展示，即便用户禁用了 JavaScript ，依然可以跟踪用户的行为。
追踪器通常如何工作通常，这类追踪器分析工具要使用到 JavaScript 。因此，大多数等信息可以十分轻松的读取，并且可以立刻发送到服务端。
这就是为什么出现越来越多的方式来阻止浏览器中跟踪器的原因。。某些勇敢的浏览器或者某些 chrome 扩展程序会阻止跟踪器的加载，例如 google 分析。其中一个诀窍是，例如 Google 分析总是从外部集成的，一段来自 Google CDN 的 JavaScript 代码。嵌入的 URL 总是相同的，因此可以轻松的将它阻止掉。
因此追踪器总是会用 JavaScript 做些什么。甚至如果你通过阻止 URL 限制了追踪器，网站拥有者可能会通过将 JavaScript 代码嵌入页面的方式继续使用。最强有力的保护措施就是禁用 JavaScript ，虽然这可能会付出非常大的代价。
最后，我们仍然可以不使用 JavaScript 追踪一些内容，而是使用一些 CSS 技巧。当然 CSS 并不是为追踪使用的，让我们开始实践吧。
找到设备类型信息媒体查询应该是每一个 web 开发者都知道的。有了这个，我们可以让 CSS 代码只在某些确定的屏幕条件下执行。所以我们可以为智能手机或平板电脑等，编写自己的查询条件。
我们所有 CSS 追踪器背后的魔法就是它们的属性，比如我们可以将一段 URL 作为属性值。有一个比较好的例子是 background-image 的属性，它允许我们为一个元素设置一张背景图片。这张图片从一段 URL 获取，并且在执行过程中，它是优先请求的，因此会向这个 URL 地址： background-image: url('/dog.png'); 发送一个 GET 请求。
但是最后，没人强制我们必须确保这段 URL 链接确实能访问到图片。服务器甚至不需要对请求进行应答，但我们仍然可以响应 GET 请求，向数据库输入数据。

const express = require("express");const app = express();app.get("/", (req, res) => {res.sendFile(__dirname + "/index.html");});app.get("/mobile", (req, res) => {console.log("is mobile")res.end())}app.listen(8080)

至于后端，我使用 Express.js 作为服务器。它提供了一个简单的 HTML 网站；如果访问设备是智能手机，则会调用 mobile 路由。并且我们的后端是唯一使用 JavaScript 的地方。
@media only screen and (max-width: 768px) {body {background-image: url("http://localhost:8080/mobile");}}在我们的 index.html 文件中，我们有了上面的 CSS 代码。只有在用户设备与媒体查询匹配的时候，才请求背景图片。
如果现在一部智能手机访问这个页面，媒体查询会执行，并发送请求背景图片的请求，同时服务端会输出它是智能手机。这些操作是完全没有使用 JavaScript 。
并且由于我们不会发送一张图片作为回应，这个网站内容将不会有任何改变。
找到操作系统信息现在变得更加疯狂，我们能大致找到用户操作系统通过它支持的字体。在 CSS 中，我们可以使用多种后备方案，换句话说，可以指定多种字体。如果第一个在系统上不起作用，浏览器将会尝试第二个。
font-family: BlinkMacSystemFont, "Arial"; 当我在我们的网站嵌入这句代码时，我的 MacBook 使用第一种苹果标准字体，这字体只可以在 Mac OS 上使用。当在我的 Windows PC 上， Arial 正常使用。
当使用字体时，我们可以定义自定义字体以及从什么地方加载它。 Google 字体的工作方式相同，如果我们要从某处使用自定义的字体，必须先从服务器加载它。并且我们可以多次使用字体。

@font-face {font-family: Font2;src: url("http://localhost:8080/notmac"); }body {font-family: BlinkMacSystemFont, Font2, "Arial";}

这里我们为了全部的 body 部分设置了字体。从逻辑上讲，你只能使用一种字体。以至于在 MacBook 上，使用的是第一种字体，即系统自己的字体。在类似 Windows 的其他系统上，系统检查字体是否存在。当然，肯定不存在，因此尝试使用下一种我们自己定义的字体。它仍然不得不从服务端加载，因此我们的 CSS 代码会再次触发 GET 请求。