6.3-用户追踪

Create by fall on 10 Sep 2023 Recently revised in 10 Sep 2023

用户追踪

常用于广告联盟，例如你在某个网站上看到某个商品没有登录过账号信息，过两天用同台电脑访问其他网站的时候却发现很多同类商品的广告。针对个人进行唯一追踪。

canvas 指纹追踪

在过去我们可能使用 cookie 去追踪用户信息，不过 cookie 可以被用户禁止掉，从而无法追踪，并且无法跨域访问。

或者就是浏览器指纹（navigator），以及一些其它信息，例如 userAgent、language、platform

# 火狐浏览器的 userAgent
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0

这些浏览器 navigator 提供的内容不能对某个人进行唯一性标识，也无法对客户端进行唯一性判定，因此会使用一些高级指纹思路 canvas 指纹

canvas 一般用于绘制一些图形，游戏等等。它也可以用来跟踪用户当我们调用 toDataURL 转换 base64，他底层会获取设备，操作系统，浏览器，三合一的唯一标识，如果其他用户使用的这三个信息和你一样的话也是有一定概率，不过概率很低。

生成 canvas 指纹

const uuid = () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const txt = 'test';
  ctx.fillText(txt, 10, 10)
  console.log(canvas.toDataURL())
  return md5(canvas.toDataURL())
}

每个浏览器的信息不同，生成的 base64 串也不同，但是图片是一样的，如果太长可以进行 MD5 或者 crypto 压缩。

生成的 Base64（google）

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAGWElEQVR4Xu3ZTavtAxzF8XVnQiYGJAMpeQEGylBSSlJGJmaKUiKJoYcywoyJ8g5kIoW3QCJlxFCU5NmMrv4pMtm71arT/ZzR7dyz12+fzzl92+1zKT4IECBwQQQuXZDn6WkSIEAgguWXgACBCyNwarCeSPJWkj9O/A7vSfJdks9OfJwvJ0CAwD8CpwbriyR3JvnlRMPXk7yf5IMTH+fLCRAgcFaw3kzyWJL3krx4LDyZ5LYkXyd5NMktSV5OctXxKuzxJA8meS7JN0kub7zNnwABAucInPsK69cknya5N8m3SZ5O8kOS65PcmuSpJHckuTrJR0m8wjrnp+MxBAj8S+DcYN2Y5JMk7x5rl19RfZnklSTPJLk7yfdJnk3ylWD5rSNAoCFwTrDuSvJzks+TXP73j0nuS3JtkmuOz3+c5OHj848keS3Jh8f7WI3nbYMAgStQ4NRgvZTkgSQPJbn9eDX1e5Lfjve3bkryxvEXwZuTvHC853V/kleTPJ/knSvQ2bdMgEBB4NRg/d/J65L89J//uOGI1p+F52iCAAECfws0goWSAAECEwHBmjA7QoBAQ0CwGoo2CBCYCAjWhNkRAgQaAoLVULRBgMBEQLAmzI4QINAQEKyGog0CBCYCgjVhdoQAgYaAYDUUbRAgMBEQrAmzIwQINAQEq6FogwCBiYBgTZgdIUCgISBYDUUbBAhMBARrwuwIAQINAcFqKNogQGAiIFgTZkcIEGgICFZD0QYBAhMBwZowO0KAQENAsBqKNggQmAgI1oTZEQIEGgKC1VC0QYDARECwJsyOECDQEBCshqINAgQmAoI1YXaEAIGGgGA1FG0QIDAREKwJsyMECDQEBKuhaIMAgYmAYE2YHSFAoCEgWA1FGwQITAQEa8LsCAECDQHBaijaIEBgIiBYE2ZHCBBoCAhWQ9EGAQITAcGaMDtCgEBDQLAaijYIEJgICNaE2RECBBoCgtVQtEGAwERAsCbMjhAg0BAQrIaiDQIEJgKCNWF2hACBhoBgNRRtECAwERCsCbMjBAg0BASroWiDAIGJgGBNmB0hQKAhIFgNRRsECEwEBGvC7AgBAg0BwWoo2iBAYCIgWBNmRwgQaAgIVkPRBgECEwHBmjA7QoBAQ0CwGoo2CBCYCAjWhNkRAgQaAoLVULRBgMBEQLAmzI4QINAQEKyGog0CBCYCgjVhdoQAgYaAYDUUbRAgMBEQrAmzIwQINAQEq6FogwCBiYBgTZgdIUCgISBYDUUbBAhMBARrwuwIAQINAcFqKNogQGAiIFgTZkcIEGgICFZD0QYBAhMBwZowO0KAQENAsBqKNggQmAgI1oTZEQIEGgKC1VC0QYDARECwJsyOECDQEBCshqINAgQmAoI1YXaEAIGGgGA1FG0QIDAREKwJsyMECDQEBKuhaIMAgYmAYE2YHSFAoCEgWA1FGwQITAQEa8LsCAECDQHBaijaIEBgIiBYE2ZHCBBoCAhWQ9EGAQITAcGaMDtCgEBDQLAaijYIEJgICNaE2RECBBoCgtVQtEGAwERAsCbMjhAg0BAQrIaiDQIEJgKCNWF2hACBhoBgNRRtECAwERCsCbMjBAg0BASroWiDAIGJgGBNmB0hQKAhIFgNRRsECEwEBGvC7AgBAg0BwWoo2iBAYCIgWBNmRwgQaAgIVkPRBgECEwHBmjA7QoBAQ0CwGoo2CBCYCAjWhNkRAgQaAoLVULRBgMBEQLAmzI4QINAQEKyGog0CBCYCgjVhdoQAgYaAYDUUbRAgMBEQrAmzIwQINAQEq6FogwCBiYBgTZgdIUCgISBYDUUbBAhMBARrwuwIAQINAcFqKNogQGAiIFgTZkcIEGgICFZD0QYBAhMBwZowO0KAQENAsBqKNggQmAgI1oTZEQIEGgKC1VC0QYDARECwJsyOECDQEBCshqINAgQmAoI1YXaEAIGGgGA1FG0QIDAREKwJsyMECDQEBKuhaIMAgYmAYE2YHSFAoCEgWA1FGwQITAQEa8LsCAECDQHBaijaIEBgIiBYE2ZHCBBoCAhWQ9EGAQITAcGaMDtCgEBDQLAaijYIEJgICNaE2RECBBoCgtVQtEGAwERAsCbMjhAg0BAQrIaiDQIEJgKCNWF2hACBhoBgNRRtECAwERCsCbMjBAg0BASroWiDAIGJwF8KLDiXEGIUiwAAAABJRU5ErkJggg==

生成的Base64（360浏览器）

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAABlhJREFUeF7t2U2r7QMcxfF1Z0ImBiQDKXkBBspQUkpSRiZmilIiiaGHMsKMifIOZCKFt0AiZcRQlOTZjK7+KTLZu9Wq0/2c0e3cs9dvn885fdvtcyk+CBAgcEEELl2Q5+lpEiBAIILll4AAgQsjcGqwnkjyVpI/TvwO70nyXZLPTnycLydAgMA/AqcG64skdyb55UTD15O8n+SDEx/nywkQIHBWsN5M8liS95K8eCw8meS2JF8neTTJLUleTnLV8Srs8SQPJnkuyTdJLm+8zZ8AAQLnCJz7CuvXJJ8muTfJt0meTvJDkuuT3JrkqSR3JLk6yUdJvMI656fjMQQI/Evg3GDdmOSTJO8ea5dfUX2Z5JUkzyS5O8n3SZ5N8pVg+a0jQKAhcE6w7kryc5LPk1z+949J7ktybZJrjs9/nOTh4/OPJHktyYfH+1iN522DAIErUODUYL2U5IEkDyW5/Xg19XuS3473t25K8sbxF8Gbk7xwvOd1f5JXkzyf5J0r0Nm3TIBAQeDUYP3fyeuS/PSf/7jhiNafhedoggABAn8LNIKFkgABAhMBwZowO0KAQENAsBqKNggQmAgI1oTZEQIEGgKC1VC0QYDARECwJsyOECDQEBCshqINAgQmAoI1YXaEAIGGgGA1FG0QIDAREKwJsyMECDQEBKuhaIMAgYmAYE2YHSFAoCEgWA1FGwQITAQEa8LsCAECDQHBaijaIEBgIiBYE2ZHCBBoCAhWQ9EGAQITAcGaMDtCgEBDQLAaijYIEJgICNaE2RECBBoCgtVQtEGAwERAsCbMjhAg0BAQrIaiDQIEJgKCNWF2hACBhoBgNRRtECAwERCsCbMjBAg0BASroWiDAIGJgGBNmB0hQKAhIFgNRRsECEwEBGvC7AgBAg0BwWoo2iBAYCIgWBNmRwgQaAgIVkPRBgECEwHBmjA7QoBAQ0CwGoo2CBCYCAjWhNkRAgQaAoLVULRBgMBEQLAmzI4QINAQEKyGog0CBCYCgjVhdoQAgYaAYDUUbRAgMBEQrAmzIwQINAQEq6FogwCBiYBgTZgdIUCgISBYDUUbBAhMBARrwuwIAQINAcFqKNogQGAiIFgTZkcIEGgICFZD0QYBAhMBwZowO0KAQENAsBqKNggQmAgI1oTZEQIEGgKC1VC0QYDARECwJsyOECDQEBCshqINAgQmAoI1YXaEAIGGgGA1FG0QIDAREKwJsyMECDQEBKuhaIMAgYmAYE2YHSFAoCEgWA1FGwQITAQEa8LsCAECDQHBaijaIEBgIiBYE2ZHCBBoCAhWQ9EGAQITAcGaMDtCgEBDQLAaijYIEJgICNaE2RECBBoCgtVQtEGAwERAsCbMjhAg0BAQrIaiDQIEJgKCNWF2hACBhoBgNRRtECAwERCsCbMjBAg0BASroWiDAIGJgGBNmB0hQKAhIFgNRRsECEwEBGvC7AgBAg0BwWoo2iBAYCIgWBNmRwgQaAgIVkPRBgECEwHBmjA7QoBAQ0CwGoo2CBCYCAjWhNkRAgQaAoLVULRBgMBEQLAmzI4QINAQEKyGog0CBCYCgjVhdoQAgYaAYDUUbRAgMBEQrAmzIwQINAQEq6FogwCBiYBgTZgdIUCgISBYDUUbBAhMBARrwuwIAQINAcFqKNogQGAiIFgTZkcIEGgICFZD0QYBAhMBwZowO0KAQENAsBqKNggQmAgI1oTZEQIEGgKC1VC0QYDARECwJsyOECDQEBCshqINAgQmAoI1YXaEAIGGgGA1FG0QIDAREKwJsyMECDQEBKuhaIMAgYmAYE2YHSFAoCEgWA1FGwQITAQEa8LsCAECDQHBaijaIEBgIiBYE2ZHCBBoCAhWQ9EGAQITAcGaMDtCgEBDQLAaijYIEJgICNaE2RECBBoCgtVQtEGAwERAsCbMjhAg0BAQrIaiDQIEJgKCNWF2hACBhoBgNRRtECAwERCsCbMjBAg0BASroWiDAIGJgGBNmB0hQKAhIFgNRRsECEwEBGvC7AgBAg0BwWoo2iBAYCIgWBNmRwgQaAgIVkPRBgECEwHBmjA7QoBAQ0CwGoo2CBCYCAjWhNkRAgQaAoLVULRBgMBEQLAmzI4QINAQEKyGog0CBCYCgjVhdoQAgYaAYDUUbRAgMBEQrAmzIwQINAQEq6FogwCBicBfCiw4lxBiFIsAAAAASUVORK5CYII=

如何防止跟踪

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

参考文章

作者	链接
小满zs	网络安全（canvas指纹追踪技术）