毛片小说,狠狠撸天天干,欧美成人天堂,中国熟妇乱伦,大鷄巴嫲嫲亂伦,操逼一级,下体无遮挡,女人脱精光让人桶爽了小说

點(diǎn)擊上方關(guān)注前端技術(shù)江湖，一起學(xué)習(xí)，天天進(jìn)步

譯者：黃梵高 https://juejin.cn/post/6887478219662950414

在瀏覽器里進(jìn)行用戶追蹤會(huì)引發(fā)關(guān)于隱私和數(shù)據(jù)保護(hù)一次又一次的討論。類似 Google 分析之類的工具幾乎可以抓到所有需要的內(nèi)容，包括來(lái)源，語(yǔ)言，設(shè)備，停留時(shí)間等等。

但是，想獲取一些感興趣的信息，你可能不需要任何外部追蹤器，甚至不需要 JavaScript。本文將向你展示，即便用戶禁用了 JavaScript，依然可以跟蹤用戶的行為。

追蹤器通常如何工作

通常，這類追蹤器分析工具要使用到 JavaScript。因此，大多數(shù)等信息可以十分輕松的讀取，并且可以立刻發(fā)送到服務(wù)端。

這就是為什么出現(xiàn)越來(lái)越多的方式來(lái)阻止瀏覽器中跟蹤器的原因。類似 Brave Browser 的瀏覽器或者某些 chrome 擴(kuò)展程序會(huì)阻止跟蹤器的加載，例如 Google 分析。其中一個(gè)訣竅是，例如 Google 分析總是從外部集成的，一段來(lái)自 Google CDN 的 JavaScript 代碼。嵌入的 URL 總是相同的，因此可以輕松的將它阻止掉。

因此追蹤器總是會(huì)用 JavaScript 做些什么。甚至如果你通過(guò)阻止 URL 限制了追蹤器，網(wǎng)站擁有者可能會(huì)通過(guò)將 JavaScript 代碼嵌入頁(yè)面的方式繼續(xù)使用。最強(qiáng)有力的保護(hù)措施就是禁用 JavaScript，雖然這可能會(huì)付出非常大的代價(jià)。

最后，我們?nèi)匀豢梢圆皇褂?JavaScript 追蹤一些內(nèi)容，而是使用一些 CSS 技巧。當(dāng)然 CSS 并不是為追蹤使用的，讓我們開始實(shí)踐吧。

找到設(shè)備類型信息

媒體查詢應(yīng)該是每一個(gè) web 開發(fā)者都知道的。有了這個(gè)，我們可以讓 CSS 代碼只在某些確定的屏幕條件下執(zhí)行。所以我們可以為智能手機(jī)或平板電腦等，編寫自己的查詢條件。

我們所有 CSS 追蹤器背后的魔法就是它們的屬性，比如我們可以將一段 URL 作為屬性值。有一個(gè)比較好的例子是 background-image 的屬性，它允許我們?yōu)橐粋€(gè)元素設(shè)置一張背景圖片。這張圖片從一段 URL 獲取，并且在執(zhí)行過(guò)程中，它是優(yōu)先請(qǐng)求的，因此會(huì)向這個(gè) URL 地址： background-image: url('/dog.png'); 發(fā)送一個(gè) GET 請(qǐng)求。

但是最后，沒(méi)人強(qiáng)制我們必須確保這段 URL 鏈接確實(shí)能訪問(wèn)到圖片。服務(wù)器甚至不需要對(duì)請(qǐng)求進(jìn)行應(yīng)答，但我們?nèi)匀豢梢皂憫?yīng) GET 請(qǐng)求，向數(shù)據(jù)庫(kù)輸入數(shù)據(jù)。

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)
復(fù)制代碼

至于后端，我使用 Express.js 作為服務(wù)器。它提供了一個(gè)簡(jiǎn)單的 HTML 網(wǎng)站；如果訪問(wèn)設(shè)備是智能手機(jī)，則會(huì)調(diào)用 mobile 路由。并且我們的后端是唯一使用 JavaScript 的地方。

@media only screen and (max-width: 768px) {
  body {
    background-image: url("http://localhost:8080/mobile");
  }
}
復(fù)制代碼

在我們的 index.html 文件中，我們有了上面的 CSS 代碼。只有在用戶設(shè)備與媒體查詢匹配的時(shí)候，才請(qǐng)求背景圖片。

如果現(xiàn)在一部智能手機(jī)訪問(wèn)這個(gè)頁(yè)面，媒體查詢會(huì)執(zhí)行，并發(fā)送請(qǐng)求背景圖片的請(qǐng)求，同時(shí)服務(wù)端會(huì)輸出它是智能手機(jī)。這些操作是完全沒(méi)有使用 JavaScript。

并且由于我們不會(huì)發(fā)送一張圖片作為回應(yīng)，這個(gè)網(wǎng)站內(nèi)容將不會(huì)有任何改變。

找到操作系統(tǒng)信息

現(xiàn)在變得更加瘋狂，我們能大致找到用戶操作系統(tǒng)通過(guò)它支持的字體。在 CSS 中，我們可以使用多種后備方案，換句話說(shuō)，可以指定多種字體。如果第一個(gè)在系統(tǒng)上不起作用，瀏覽器將會(huì)嘗試第二個(gè)。

font-family: BlinkMacSystemFont, "Arial"; 當(dāng)我在我們的網(wǎng)站嵌入這句代碼時(shí)，我的 MacBook 使用第一種蘋果標(biāo)準(zhǔn)字體，這字體只可以在 Mac OS 上使用。當(dāng)在我的 Windows PC 上，Arial 正常使用。

當(dāng)使用字體時(shí)，我們可以定義自定義字體以及從什么地方加載它。Google 字體的工作方式相同，如果我們要從某處使用自定義的字體，必須先從服務(wù)器加載它。并且我們可以多次使用字體。

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

body {
  font-family: BlinkMacSystemFont, Font2, "Arial";
}
復(fù)制代碼

這里我們?yōu)榱巳康?body 部分設(shè)置了字體。從邏輯上講，你只能使用一種字體。以至于在 MacBook 上，使用的是第一種字體，即系統(tǒng)自己的字體。在類似 Windows 的其他系統(tǒng)上，系統(tǒng)檢查字體是否存在。當(dāng)然，肯定不存在，因此嘗試使用下一種我們自己定義的字體。它仍然不得不從服務(wù)端加載，因此我們的 CSS 代碼會(huì)再次觸發(fā) GET 請(qǐng)求。

畢竟 Font2 不是一個(gè)真正的字體，因此我們繼續(xù)嘗試，最終將使用 Arial 字體。盡管如此，我們?nèi)匀豢梢栽谟脩魺o(wú)感知的情況下，使用一個(gè)合理的字體。

追蹤元素信息

到目前為止，我們所做的事情就是當(dāng)用戶抵達(dá)網(wǎng)站，立即對(duì)信息進(jìn)行分析。當(dāng)然，我們也可以利用 CSS 對(duì)單獨(dú)的事件做出應(yīng)對(duì)。

如下所示，我們可以使用下面的例子，來(lái)分析鼠標(biāo)懸停或活動(dòng)事件。

<head>
  <style>
    #one:hover {
      background-image: url("http://localhost:8080/one-hovered/");
    }
  </style>
</head>
<body>
  <button id="one">Hover me</button>
</body>
復(fù)制代碼

當(dāng)鼠標(biāo)每次懸停在按鈕上，它會(huì)一次又一次的設(shè)置背景圖片，一個(gè) GET 請(qǐng)求也隨之發(fā)出。

我們可以在按鈕被點(diǎn)擊時(shí)，做相同的事情。在 CSS 中，這就是活動(dòng)事件。

<head>
  <style>
    #one:active {
      background-image: url("http://localhost:8080/one-clicked/");
    }
  </style>
</head>
<body>
  <button id="one">Click me</button>
</body>
復(fù)制代碼

還有一系列其他事件。例如，懸停事件幾乎適用在每一個(gè)元素上。因此從理論上來(lái)講，我們可以追蹤用戶的每一個(gè)行為。

猶豫計(jì)時(shí)器

使用更多的代碼，我們可以組合這些事件并且了解更多信息，而不僅僅是發(fā)生了那些事件。

對(duì)于許多網(wǎng)站主來(lái)說(shuō)，更感興趣的是，用戶在看到或懸停在元素上猶豫了多久才點(diǎn)擊某個(gè)元素。通過(guò)下面的代碼，我們可以測(cè)量用戶懸停后點(diǎn)擊所花費(fèi)的時(shí)間。

let counter;
app.get("/one-hovered", (req, res) => {
  counter = Date.now();
});

app.get("/one-active", (req, res) => {
  console.log("Clicked after", (Date.now() - counter) / 1000, "seconds");
});
復(fù)制代碼

用戶一旦懸停，計(jì)時(shí)器就會(huì)啟動(dòng)。最后，我們可以算出直到點(diǎn)擊過(guò)了幾秒。

你可能會(huì)認(rèn)為由于它嵌入在 CSS 代碼中，統(tǒng)計(jì)的可能并不準(zhǔn)確，但事實(shí)并非如此。由于請(qǐng)求的體積十分小，并且立即作用在服務(wù)器上。我試了幾次并測(cè)量了時(shí)間，最終測(cè)量的結(jié)果非常精確。

很驚人，不是嗎？

讓整個(gè)功能更美觀

為了不被發(fā)現(xiàn)，使用不顯眼的 URL 是十分有意義的。最后，每個(gè)人都可以看到完整的前端代碼。

你也可以使用自己想到的關(guān)鍵詞，代替?zhèn)€別特別顯眼的路由單詞。最后，前端和后端的 URL 必須匹配。

對(duì)于上面的示例，我始終將我自己的路由用作 GET 請(qǐng)求。這樣十分清晰明白。一種更優(yōu)雅的方式是使用 URL 的查詢，這在 CSS 當(dāng)中也適用。

@font-face {
  font-family: Font2;
  src: url("http://192.168.2.110:8080/os/mac");
  /* or: */ 
  src: url("http://192.168.2.110:8080/?os=mac");
}

The End

歡迎自薦投稿到《前端技術(shù)江湖》，如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，記得點(diǎn)個(gè) 「在看」哦

點(diǎn)個(gè)『在看』支持下

怎樣只使用 CSS 進(jìn)行用戶追蹤？