浏览器指纹跨域共享

概念：设备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 静态页面里的脚本

扩展阅读

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