-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (143 loc) · 5.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html>
<head>
<title>
Browser fingerprinting with HTML5
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src='tests.js' type="text/javascript"></script>
<script src="sylvester.js" type="text/javascript"></script>
<script src="glUtils.js" type="text/javascript"></script>
<script src="gl-matrix-min-1.2.3.js" type="text/javascript"></script>
<!-- Fragment shader program -->
<script id="shader-fs" type="x-shader/x-fragment">
varying mediump vec2 vTextureCoord;
varying mediump vec3 vLightning;
uniform sampler2D uSampler;
void main(void) {
//gl_FragColor = texture2D(uSampler, vTextureCoord);
//gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
mediump vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(texelColor.rgb * vLightning, texelColor.a);
}
</script>
<!-- Vertex shader program -->
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexNormal;
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uNormalMatrix;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying mediump vec2 vTextureCoord;
varying mediump vec3 vLightning;
void main(void) {
//gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
//vTextureCoord = aTextureCoord;
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
// Apply lightning
mediump vec3 ambientLight = vec3(0.1, 0.1, 0.1); // Color of the ambiant light
mediump vec3 directionalLightColor = vec3(0.8, 0.8, 0.0); // Color of the directional light
mediump vec3 directionalVector = vec3(0.2, 0.4, 0.9); // Where the directional light should come from (should not be greater than 1.0).
mediump vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
mediump float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
vLightning = ambientLight + (directionalLightColor * directional);
}
</script>
</head>
<body>
<div id='wrap'>
<div id='content'>
<noscript><h1>Please allow JavaScript to be able to use this page.</h1><br></noscript>
<span id='toAbout'><a href='about/'>About</a></span>
<h1>
How unique is your HTML5 <code> <canvas></code> fingerprint?
</h1>
<h4>
A study of how your browser renders the HTML5 <code> <canvas></code> element.
</h4>
<p class='info'>
One of the new elements introduced with HTML5 is the <code><canvas></code> element, which is used to render text or images in the browser.
The text and images differ slightly in how they are rendered depending on your software and hardware configuration.
The tests on this page are part of a study that aims to answer the question about how uniquely a browser renders the <code><canvas></code> element.
The tests create six pictures and then compares their differences to other users' results.<br>
<br>
After the tests have finished, you will be presented with the results which will show you the ratio of devices that share your browser's <code><canvas></code> fingerprint, to the total number of browsers that have participated in the study.
By participating, you will help us estimate how well these tests work to identify a browser.<br>
<br>
The test data cannot be used to identify individual visitors to the webpage.
For more information on who we are, what data is saved and how the tests work, see the <a href='about/'>About</a> page.<br>
<br>
Now then - how unique is <i>your</i> configuration?
</p>
<div id='startButtonHolder'>
<button id='startButton' onclick='start()'>Start tests</button>
</div>
<div id='results'>
<table id='rTable'>
<colgroup>
<col id='tesCol'>
<col id='valCol'>
<col id='resCol'>
</colgroup>
<thead>
<th>Test</th>
<th>Value</th>
<th>Result</th>
</thead>
<tbody>
<tr>
<td><b>Arial</b></td>
<td id='v1'>VALUE</td>
<td id='r1'>VALUE</td>
</tr>
<tr>
<td><b>Arial Px</b></td>
<td id='v2'>VALUE</td>
<td id='r2'>VALUE</td>
</tr>
<tr>
<td><b>WebFont</b></td>
<td id='v3'>VALUE</td>
<td id='r3'>VALUE</td>
</tr>
<tr>
<td><b>WebFont Px</b></td>
<td id='v4'>VALUE</td>
<td id='r4'>VALUE</td>
</tr>
<tr>
<td><b>Nonsense Font</b></td>
<td id='v5'>VALUE</td>
<td id='r5'>VALUE</td>
</tr>
<tr>
<td><b>WebGL</b></td>
<td id='v6'>VALUE</td>
<td id='r6'>VALUE</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><b><i>Overall</i></b></td>
<td></td>
<td id='rA'>VALUE</td>
</tr>
</tfoot>
</table>
</div>
<div class='push'></div>
</div><!--content>-->
</div><!--wrap-->
<div id='footer'>
<small>
<center>
This page uses cookies. These cookies can not be used to identify individual visitors. <br>
For more information, see the <a href='about/'>About</a> page.
</center>
</small>
</div>
</body>
</html>