瀏覽器指紋跨域共享

概念：設備id 即設備指紋，用來表示用戶設備的唯一性

背景

最近在做用戶行為分析項目的開發，需要採集用戶的設備信息，需要用設備指紋來唯一表示用戶操作設備。web 存儲都和瀏覽器相關，我們無法通過js 來標識一台電腦，只能以瀏覽器作為設備維度來採集設備信息。即用戶電腦中一個瀏覽器就是一個設備。

問題

web 變數存儲，我們第一時間想到的就是 cookie，sessionStorage，localStorage，但是這3種存儲方式都和訪問資源的域名相關。我們總不能每次訪問一個網站就新建一個設備指紋吧，所以我們需要通過一個方法來跨域共享設備指紋

方法

我們想到的方案是，通過嵌套 iframe 載入一個靜態頁面，在 iframe 上載入的域名上存儲設備id，通過跨域共享變數獲取設備id，共享變數的原理是採用了iframe 的 contentWindow通訊，通過 postMessage 獲取事件狀態，調用封裝好的回調函數進行數據處理

實現

SDK 採集端，調用方初始化的時候調用方法

collect.setIframe = function () { var that = this var iframe = document.createElement(iframe) iframe.src = "http://localhost:82/" iframe.style = display:none document.body.appendChild(iframe) iframe.onload = function () { iframe.contentWindow.postMessage(loaded,*); } //監聽message事件 window.addEventListener("message", function(){ that.deviceId = event.data.deviceId console.log(獲取設備id,that.deviceId) sessionStorage.setItem(PageSessionID,helper.upid()) helper.send(that.getParames(), that.eventUrl); helper.sendDevice(that.getDevice(), that.deviceUrl); }, false);}

嵌套在 iframe 靜態頁面里的腳本

<script> var getDeviceId = function() { return xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c == x ? r : (r & 0x3 | 0x8); return v.toString(16); }); }; var hasCreated = false var _deviceId = if(document.cookie){ document.cookie.split(;).forEach(function(i){ if(i.indexOf(deviceId)>-1){ hasCreated = true _deviceId = i.split(=)[1] } }) } if(!_deviceId && (sessionStorage.getItem(deviceId)||localStorage.getItem(deviceId))){ hasCreated = true _deviceId = sessionStorage.getItem(deviceId)||localStorage.getItem(deviceId) } if(!hasCreated) { _deviceId = getDeviceId() document.cookie = deviceId= + _deviceId sessionStorage.setItem(deviceId,_deviceId) localStorage.setItem(deviceId,_deviceId) } //回調函數 function receiveMessageFromIndex ( event ) { console.log( receiveMessageFromIndex, event ) parent.postMessage( {deviceId: _deviceId}, *); } //監聽message事件 window.addEventListener("message", receiveMessageFromIndex, false); </script>

推薦閱讀：