浏览器指纹跨域共享

rottengeek 发布于2019-08-22 15:08 / 2510人阅读

摘要：存储都和浏览器相关，我们无法通过来标识一台电脑，只能以浏览器作为设备维度来采集设备信息。即用户电脑中一个浏览器就是一个设备。

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

云服务器 GPU云服务器跨域共享跨域共享session 跨域资源共享 session跨域共享

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93192.html

Web 应用安全性: 使用这些 HTTP 头保护 Web 应用

摘要：综上所述，认为没有提供的保护，用户会过得更好安全研究人员并不完全反对这一决定。内容安全策略是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本和数据注入攻击等。这是关于web安全性系列文章的第三篇，其它的可点击以下查看： Web 应用安全性: 浏览器是如何工作的 Web 应用安全性: HTTP简介目前，浏览器已经实现了大量与安全相关的头文件，使攻击者更难利用漏...

spademan 2019-08-26 13:35 评论0 收藏0
前端人员必须知道的三个问题

摘要：第一个问题前端都做哪些事呢，前端都需要哪些技术呢前端发展的三个阶段初级阶段入门常见标签，新增的，语义化标签等等选择器，背景，文本，链接，列表，盒模型，定位，浮动，新增的属性栅格化系统，按钮，表单，导航数据类型，对象，函数，运算符，语句，，选第一个问题：前端都做哪些事呢，前端都需要哪些技术呢前端发展的三个阶段：初级阶段：（入门） html：常见标签，html5新增的，语义化标签等等...

zollero 2019-08-02 16:13 评论0 收藏0
前端人员必须知道的三个问题

摘要：第一个问题前端都做哪些事呢，前端都需要哪些技术呢前端发展的三个阶段初级阶段入门常见标签，新增的，语义化标签等等选择器，背景，文本，链接，列表，盒模型，定位，浮动，新增的属性栅格化系统，按钮，表单，导航数据类型，对象，函数，运算符，语句，，选第一个问题：前端都做哪些事呢，前端都需要哪些技术呢前端发展的三个阶段：初级阶段：（入门） html：常见标签，html5新增的，语义化标签等等...

王晗 2019-08-23 16:59 评论0 收藏0