网络安全之Canvas指纹追踪技术

1,835 阅读4分钟

1. 技术场景

(常用于广告联盟)例如你在某个网站上看到某个商品没有登录过账号信息,过两天用同台电脑访问其他网站的时候却发现很多同类商品的广告。

假设一家电商公司想要推广其新上市的智能手表产品,并希望通过在线广告来吸引潜在客户。该公司可以使用Canvas指纹追踪技术来跟踪用户的兴趣和行为,以更好地定位目标受众。

首先,该公司可以在其网站上放置一个Canvas元素,并使用JavaScript代码在Canvas上绘制一些图形,如手表的图片和品牌标识等。然后,将Canvas元素的像素数据转换为一个唯一的标识符,这个标识符可以用于识别用户的浏览器和设备。

接下来,该公司可以在各种在线广告平台上发布广告,并使用Canvas指纹追踪技术来跟踪用户的兴趣和行为。例如,当用户点击广告并访问该公司的网站时,该公司可以收集用户的Canvas指纹信息,并将其与其他数据(如用户的地理位置、浏览历史和购买行为等)结合起来,以更好地了解用户的兴趣和行为。

最后,该公司可以使用这些数据来优化其广告投放策略,例如在特定的网站、社交媒体平台或搜索引擎上投放广告,以吸引更多的潜在客户。此外,该公司还可以使用Canvas指纹追踪技术来评估广告效果,并根据数据来调整其广告投放策略,以提高转化率和ROI。

在过去我们可能使用

  • cookie去追踪用户信息,不过弊端也很明显cookie可以被用户禁止掉,从而无法追踪,并且无法跨域访问。
  • 浏览器指纹(navigator)userAgent(用户代理)

image.png

这些指纹不能对某个人进行唯一性标识,也无法对客户端进行唯一性判定,基于HTML5的诸多高级指纹对此提供了新思路

2. canvas指纹追踪

Canvas指纹追踪技术是一种利用HTML5 Canvas元素生成的图像来识别用户的唯一标识符的技术。它可以通过收集用户浏览器中的Canvas指纹信息来跟踪用户的在线活动,包括他们的浏览历史、兴趣爱好和购买行为等。

Canvas指纹追踪技术的实现原理是通过在用户的浏览器中生成一个Canvas元素,并使用JavaScript代码在Canvas上绘制一些图形,如文本、线条和形状等。然后,将Canvas元素的像素数据转换为一个唯一的标识符,这个标识符可以用于识别用户的浏览器和设备。

它也可以用来跟踪用户当我们调用toDataURL转换base64,他底层会获取设备,操作系统,浏览器,三合一的唯一标识,如果其他用户使用的这三个信息和你一样的话也是重复这个概率是很低的也不排除有可能。

const uuid = () => {
        // 创建一个Canvas元素
        var canvas = document.createElement('canvas')
        var ctx = canvas.getContext('2d')

        // 在Canvas上绘制一些图形
        ctx.fillStyle = '#f00'
        ctx.fillRect(0, 0, 100, 100)
        ctx.fillStyle = '#0f0'
        ctx.fillRect(100, 0, 100, 100)
        ctx.fillStyle = '#00f'
        ctx.fillRect(0, 100, 100, 100)
        ctx.fillStyle = '#ff0'
        ctx.fillRect(100, 100, 100, 100)

        // 将Canvas元素的像素数据转换为一个唯一的标识符
        var canvasData = canvas.toDataURL()
        var fingerprint = canvasData.replace(/^data:image\/(png|jpg);base64,/, '')
        // 将唯一标识符发送到服务器进行跟踪
        // sendFingerprintToServer(fingerprint)
}

uuid()

image.png

image.png

我们首先创建了一个Canvas元素,并使用getContext()方法获取了一个2D绘图上下文。

然后,我们在Canvas上绘制了四个不同颜色的矩形。 接下来,我们使用toDataURL()方法将Canvas元素的像素数据转换为一个Base64编码的字符串,并将其作为唯一标识符发送到服务器进行跟踪。

在实际应用中,我们可以将唯一标识符与其他数据一起发送到服务器,例如用户的IP地址、浏览器版本和操作系统等。不同浏览器生成的不同。


3. 如何禁用

由于Canvas指纹追踪技术不需要使用cookie或其他标准的浏览器标识符,因此它可以在用户禁用cookie或使用隐身模式的情况下进行跟踪。这使得它成为一种非常难以检测和防止的追踪技术。

安装浏览器插件,谷歌应用商店有随机修改canvas指纹的插件(CanvasFingerprintBlock),其原理是,每次随机往 canvas 画布里面注入一个随机的噪音(人肉眼是看不到的),从而影响base64加密结果

为了保护用户隐私,一些浏览器和浏览器插件已经开始阻止Canvas指纹追踪技术。此外,一些网站也开始采取措施来限制或防止使用Canvas指纹追踪技术。


参考小满zs B站视频