前言 : 一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这样可以通过收集这些个体的数据,通过分析后更加精准的去推送广告(精准化营销)或其他有针对性的一些活动。
Cookie技术是非常受欢迎的一种。当用户访问一个网站时,网站可以在用户当前的浏览器Cookie中永久植入一个含有唯一标示符(UUID)的信息,并通过这个信息将用户所有行为(浏览了哪些页面?搜索了哪些关键字?对什么感兴趣?点了哪些按钮?用了哪些功能?看了哪些商品?把哪些放入了购物车等等)关联起来。
但是Cookie可以伪装,在浏览器隐私窗口,不同用户,甚至是爬虫时无法区分。
而"帆布指纹识别”技术可以一定程度避免以上的缺点。
#
**先看看浏览器中navigator的内容**
![](https://img.kancloud.cn/a5/9f/a59f422fd52d51ecb8ac51114404cb16_1680x1223.png)
里面包含了大量信息,但是都无法对客户端做唯一的判定,所以基于H5canvas新出了canvas指纹追踪技术,它的底层会获取设备、操作系统、浏览器三合一唯一的标识,如果其他用户与你的这三个信息重复的概率就非常低了
**生成canvas指纹**
```
<script>
const uuid = () => {
const canvas = document.createElement("canvas");//画布
const cts = canvas.getContext('2d');//2d
const txt = "test";//文字
cts.fillText(txt, 10, 10);//传入文字
console.log(canvas.toDataURL());//导出base64格式
}
uuid();
</script>
```
结果:
![](https://img.kancloud.cn/05/cb/05cb9ec674fb6ad321feb7e75f2bb6ab_1393x513.png)
打开后,分别到谷歌和edge浏览器中,每个浏览器生成的base64码都是不一样的,得到的内容是一样的,但是包含的信息是不一样的,三个标识都会保存在这个码中
![](https://img.kancloud.cn/4a/e0/4ae0b476d3d0eb1d9d2b6f2901761b8c_1977x1054.png)
chrome浏览器如果防止被跟踪:安装浏览器插件,谷歌应用商店中找到CanvasFingerprintBlock安装即可,原理是:每次都会往canvas中随机注入的噪音(肉眼无法看到),从而影响base64的加密结果
- vue项目目录
- git
- git 使用
- git 新建和合并不同git分支
- vue使用element ui
- vue复选框
- vue使用富文本编辑器
- element 级联选择器使用
- vue使用时间过滤器
- vue form表单中使用table表格
- element ui图片上传(upload)功能
- 树形tree组件
- element 表格表头样式修改
- element ui添加loading动画
- table展开列
- el-tooltip提示框加for循环无法显示数据
- table合并
- table表头插槽,render-header警告
- table列表中鼠标放上去显示图片
- 表格中输入内容动态改变数据(箭头和颜色)
- 使用element ui表格跨页勾选
- 可编辑表格可分页
- 组件之间简单传值
- 从表格中选择其他表单子段
- router
- vuex
- vue接口写法
- 将后端返回的数字转成字符串显示在表格中
- element ui实现动态验证
- vue根据token判断登录
- vue修饰符
- js小案例
- 倒计时
- 验证码
- 带文字匹配搜索框
- 选项卡
- 复选框全选,反选,全不选
- 相册选择,鼠标放到图片上,对应图放大显示
- 敏感词过滤
- 进度条
- 点击按钮回到顶部
- 电影院选座
- 盒子移动
- 鼠标绑定一个盒子
- 档案建立,输入信息添加到表格
- 抽奖机
- 放大镜
- 购物车
- 飞机大战
- echarts案例
- 常规条形图
- 横向条形图
- 折线图
- 散点图
- 饼状图
- 地图
- 雷达图
- 仪表盘
- 条形堆叠图
- 微前端--qiankun框架
- node中间件
- 手机端样式自适应,格式化初始样式插件
- 简单的axios请求封装,无权限
- npm安装后缀-s或-d
- 系统环境变量
- 过滤字符串,不足两位前面添加0
- 概念问题
- async和await的区别
- created和mounted区别
- link和@import区别
- 排他算法
- 数组方法
- 数组扁平化
- 数组去重
- 遍历数组的四种方法
- vue数组中哪些方法时响应式的
- splice删除数组遇到的坑
- 展开运算符(...)用法
- 冒泡排序
- 判断数组中是否有重复
- 计算数组中某项出现的次数
- filter方法
- 将数组分割成多个指定长度的数组
- 常用数组方法整合
- 对象数据处理
- 合并对象:Object.assign( )
- Object.keys(),返回数组,自身枚举对象
- Object.values使用
- Object.entries使用
- vue中使用svg
- svg组件
- vue滑块验证
- 方法一:滑块验证
- 方法二:滑块插件
- vue配置不同的启动和打包环境
- js过滤日期
- js获取指定日期前一个月日期
- js指定日期与当前日期比较
- js截取字符串
- js截取字符串最后的逗号
- js截取图片后缀
- 前端监听网络
- vue.config.js解析
- 常用正则
- 闭包概念+闭包防抖节流
- vue插槽
- 网络安全栏
- canvas指纹追踪技术
- exif照片信息
- xss攻击
- vue中操作引导
- 封装全局loading组件
- vue更换主题方案(手动)
- vue项目打包优化
- 组件递归案例
- Promise及异步操作介绍
- vue-cli打包的dist文件怎么直接运行
- 浏览器页签通信(BroadcastChannel)
- nginx配置