HTML5 Canvas在浏览器指纹识别中的应用技巧
最编程
2024-02-20 09:18:12
...
在HTML5中可以使用JS + Canvas标签生成图片,利用”canvas.toDataURL()”可以获取到图片的Base64码。
同样的JS Canvas绘图代码,在同一个浏览器下生成的图片是相同的(字节码相同)。
但是由于系统的差别、渲染引擎的不同,同样的JS Canvas绘图代码,在不同的浏览器下得到的图片也是不同的(字节码不同。注意:也有相同的可能,但是概率较小)。
利用上述原理,同一段JS Canvas绘图代码,返回生成图片的HASH值作为“HTML5 Canvas指纹”。
【在线测试工具】
https://browserleaks.com/canvas
如附图1所示,我的谷歌浏览器的“HTML5 Canvas指纹”在793798 个相同UA的浏览器中,仅有317个相同的,唯一性高达99.96%。
【”HTML5 Canvas指纹算法”示例代码】
// 计算字符串的hash值
function hashstr(s){ var hash = 0; if (s.length == 0) return hash; for (i = 0; i < s.length; i++) { char = s.charCodeAt(i); hash = ((hash<<5)-hash)+char; hash = hash & hash; // Convert to 32bit integer } return hash; }
使用canvas绘图,并返回图片的Base64码对应的hash值
function getCanvasFp() { var result = ""; // Very simple now, need to make it more complex (geo shapes etc) var canvas = document.createElement('canvas'); canvas.width = 2000; canvas.height = 200; canvas.style.display = 'inline'; var ctx = canvas.getContext('2d'); // detect browser support of canvas winding // http://t.cn/R7wzrRy // http://t.cn/AiFHoZG5 ctx.rect(0, 0, 10, 10); ctx.rect(2, 2, 6, 6); result += 'canvas winding:' + ((ctx.isPointInPath(5, 5, 'evenodd') === false) ? 'yes' : 'no'); ctx.textBaseline = 'alphabetic'; ctx.fillStyle = '#f60'; ctx.fillRect(125, 1, 62, 20); ctx.fillStyle = '#069'; // http://t.cn/AiFHoZGx ctx.font = '11pt no-real-font-123'; ctx.fillText('Cwm fjordbank glyphs vext quiz, \ud83d\ude03', 2, 15); ctx.fillStyle = 'rgba(102, 204, 0, 0.2)'; ctx.font = '18pt Arial'; ctx.fillText('Cwm fjordbank glyphs vext quiz, \ud83d\ude03', 4, 45); // canvas blending // http://t.cn/AiFHoZGt // http://t.cn/AiFHoZGM ctx.globalCompositeOperation = 'multiply'; ctx.fillStyle = 'rgb(255,0,255)'; ctx.beginPath(); ctx.arc(50, 50, 50, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.fillStyle = 'rgb(0,255,255)'; ctx.beginPath(); ctx.arc(100, 50, 50, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.fillStyle = 'rgb(255,255,0)'; ctx.beginPath(); ctx.arc(75, 100, 50, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.fillStyle = 'rgb(255,0,255)'; // canvas winding // http://t.cn/R7wzrRy // http://t.cn/AiFHoZGf ctx.arc(75, 75, 75, 0, Math.PI * 2, true); ctx.arc(75, 75, 25, 0, Math.PI * 2, true); ctx.fill('evenodd'); if (canvas.toDataURL) { result += ';canvas fp:' + canvas.toDataURL(); } return hashstr(result); }
文章转自:http://www.68xi.com/991.html
推荐阅读
-
在 C++ 中应用虚函数和纯虚函数的技巧
-
Java 类加载器的作用 - 简介:类加载器是 Java™ 中一个非常重要的概念。类加载器负责将 Java 类的字节码加载到 Java 虚拟机中。本文首先详细介绍了 Java 类加载器的基本概念,包括代理模型、加载类的具体过程和线程上下文类加载器等。然后介绍了如何开发自己的类加载器,最后介绍了类加载器在 Web 容器和 OSGi™ 中的应用。 类加载器是 Java 语言的一项创新,也是 Java 语言广受欢迎的重要原因之一。它允许将 Java 类动态加载到 Java 虚拟机中并执行。类加载器从 JDK 1.0 开始出现,最初是为了满足 Java Applets 的需求而开发的,Java Applets 需要从远程位置下载 Java 类文件并在浏览器中执行。现在,类加载器已广泛应用于网络容器和 OSGi。一般来说,Java 应用程序的开发人员不需要直接与类加载器交互;Java 虚拟机的默认行为足以应对大多数情况。但是,如果遇到需要与类加载器交互的情况,而您又不太了解类加载器的机制,就很容易花费大量时间调试异常,如 ClassNotFoundException 和 NoClassDefFoundError。本文将详细介绍 Java 的类加载器,帮助读者深入理解 Java 语言中的这一重要概念。下面先介绍一些基本概念。 类加载器的基本概念 顾名思义,类加载器用于将 Java 类加载到 Java 虚拟机中。一般来说,Java 虚拟机以如下方式使用 Java 类:Java 源程序(.java 文件)经 Java 编译器编译后转换为 Java 字节代码(.class 文件)。类加载器负责读取 Java 字节代码并将其转换为 java.lang 实例。每个实例都用来表示一个 Java 类。通过该实例的 newInstance 方法创建该类的对象。实际情况可能更加复杂,例如,Java 字节代码可能是由工具动态生成或通过网络下载的。 基本上,所有类加载器都是 java.lang.ClassLoader 类的实例。下面将详细介绍这个 Java 类。 java.lang.ClassLoader 类简介 java.lang.ClassLoader 类的基本职责是根据给定类的名称为其查找或生成相应的字节码,然后根据这些字节码定义一个 Java 类,即 java.lang.Class 类的实例。除此之外,ClassLoader 还负责加载 Java 应用程序所需的资源,如图像文件和配置文件。不过,本文只讨论它加载类的功能。为了履行加载类的职责,ClassLoader 提供了许多方法,其中比较重要的方法如表 1 所示。下文将详细介绍这些方法。 表 1.与加载类相关的 ClassLoader 方法
-
寻找类似Sikuli的工具:在浏览器中轻松自动操作流媒体应用
-
轻松掌握Linux技巧:tar命令在压缩与解压文件中的应用
-
轻松掌握Linux技巧:tar命令在压缩与解压文件中的应用
-
HTML5 Canvas在浏览器指纹识别中的应用技巧
-
小明的RSA破解技巧在CTF竞赛中的应用(第二篇)
-
在HTML5中,如何简单绘制出圆形或椭圆的Canvas技巧
-
在HTML5中实现页面缩放的四种实用技巧
-
在React和Vue中,我们是如何玩转router的? - 使用HTML5 History API,React Router利用pushState和replaceState方法在不刷新页面的情况下管理导航历史。它像这样工作: 1. 当URL发生变化时,React Router悄悄地“监听”浏览器地址栏的改动,主要通过popstate事件来察觉url更改。 2. 随着URL的变化,Router会对照预先设定好的JavaScript路由配置对象,依据一套规则找出与当前URL匹配的路径。 3. 一旦找到合适的路线,React Router就会如魔法般地渲染相应的组件到网页上,从而实现了页面内容的实时更新。让我们来看一个React Router实际运用的例子。