前端指紋，尋找蛛絲馬跡（技術周刊 2018-02-23）

前端快爆

上新

• 2018 年，W3 組織將繼續擴展多媒體支持。此前我們有audio和video標籤、DASH 和 HLS 流媒體協議，而今年則有如下相關事項：媒體能力規範擴展；網頁顏色小組探討 HDR 與廣域顏色範圍；第二屏小組則討論開放屏幕協議、演講 API、遠程錄放 API 等。

Fast-forwarding media support on the Webwww.w3.org

• Facebook 下的一盤大棋 ReasonML 於近日開放了論壇。ReasonML 這個源自函數式語言 OCaml 的後輩，可以經由 BuckleScript 快速編譯為可讀且高效的 JavaScript，也有對 JavaScript 程序員相對友好一些的語法，並擁有強類型、編譯時檢查，它的未來是值得期待的。

Reason Forum Now Open! · Reasonreasonml.github.io

• Mozilla 啟動「物品計劃」，使得諸如 Raspberry Pi 3、ZigBee、Z-Wave USB dongles 的設備，可以經由 Mozilla 提供的框架接入網路被控制。

Announcing 「Project Things」 – An open framework for connecting your devices to the web. – The Mozilla Blogblog.mozilla.org

• 在最新的 Fitbit Ionic 之上已經跑著 JavaScript 代碼了。Fitbit 出品了 JerryScript 引擎，可以在少於 64k 內存的智能設備上運行 JS 代碼。

JavaScript in the Internet of Things: JerryScript and the Fitbit Ionicjs.foundation

• 微信小程序提供的開發工具新增了真機遠程調試功能。開發者只需掃描二維碼，即可在手機上的微信客戶端中調試運行小程序。

小程序開發工具支持真機調試mp.weixin.qq.com

• perspective 是一個經由 WebAssembly 來完成流式的、實時的數據可視化的庫。
• LCUI 是一個將 CSS 用於基於 C 語言開發的用戶界面的嘗試。

調研

針對 Node.js 為何如此受開發歡迎，Risingstack 做了一個調查：

• 快速開發能力、富 I/O 場景下的高性能、易學易用導致 Node.js 受歡迎；
• Node.js 主要用於開發 API、後端服務與網頁服務；
• Node.js 在生產環境中主要有性能和安全問題；
• MongoDB 成為主流 Node.js 開發的資料庫選擇；
• ES Next 是最受歡迎的開發模式。

Why Developers Love Node.js & whats their main issue with it? | @RisingStackblog.risingstack.com

Quip 為我們帶來了一個有意思的性能 Tips：

使用script[type=application/json]聲明 JSON 字元串並調用JSON.parse，比在 JS 中直接聲明字面量更快。

且 JSON 越大，快得越明顯。

Efficiently loading inlined JSON dataofs.quip.com

專題

前端指紋與用戶嗅探

網路標準制定了相對周詳的方案來保護用戶隱私，比如我們無法通過 JavaScript 拿到:visited的元素、沒有獲取用戶訪問過的頁面的介面、有嚴格的跨域與沙盒限制來防止用戶信息泄漏……這些都確保了：如果一位用戶打定主意不登錄我們的站點，他沒有辦法被唯一標識。

而前端的指紋技術則通過用戶留下的蛛絲馬跡，嘗試定位與追蹤用戶行為。前陣子爆發出來的熔斷 Meltdown 與幽靈 Spectre，也打開了閱讀其它內存的魔盒，攻擊者可以利用相關漏洞來讀取其它站點的敏感用戶信息。這是一個契機，讓我們藉以了解前端領域的相關技術。

• 開發者如何應對 Meltdown 與 Spectre

谷歌提供給網頁開發者的應對方案，包括利用 Cookie 中的SameSite和HTTPOnly來防止 cookie 進入渲染進程的內存，確保 MIME 設置正確，並增添X-Content-Type-Options: nosniff返回頭標識用戶敏感的內容等措施。（牆外）

• 瀏覽器指紋列舉

相對系統的列舉了 http 協議過程中能夠帶來的指紋信息。

• Pixel Perfect Timing Attacks with HTML5

使用text-shadow/svg等方式嗅探用戶訪問信息。

• Canvas 指紋

本文介紹了幾年前名噪一時的 Canvas 指紋技術，論述了如何利用 WebGL 與文字渲染的輸出差異，來獲取高信息熵、持久、用戶透明且與其它指紋技術正交的特徵值。

• fingerprintjs2

fingerprintjs2 封裝了指紋技術，並在其說明處列舉了共 27 項可以標識用戶的數據來源。

• CrookedStyleSheets

介紹了一些僅用 CSS 實現網頁追蹤的方式，利用 CSS 中特定位置埋下的url()，能實現點擊檢測、瀏覽器特性檢測、字體支持性檢測、懸停監測和輸入監測。

本期編輯：humphry & 審閱：bosn

推薦閱讀：