浏览器指纹跨域共享

[bailinlin]

概念：设备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>

扩展阅读

跨浏览器cookie
跨浏览器指纹识别
浏览器指纹追踪
使用postMessage解决iframe跨域通信问题
window.postMessage