-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
271 lines (224 loc) · 11.1 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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
---
layout: default
isIndex: true
title: Data Transparency Lab
---
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Browser Fingerprinting Census</h1>
<!-- <h2>TESTING ANGULARJS: {{ '1+2' | angular }}.</h2> -->
<p><span>Browser Fingerprinting</span> is a web tracking technique often used to create profiles and stories about you and
billions of other users. Generally, users unwittingly consent to this practice, and probably are not even aware that
it exists. Tracker blocking apps like Ghostery and AdBlock cannot block this kind of behavior. </p>
<p id="introNumber"></p>
<!-- <p>Best viewed on desktop browsers.</p> -->
<!-- <a class="btn btn-primary " href="#whatis" role="button"><img src="/images/arrow.png" alt="Home" /></a> -->
</div>
<div class="wrapper">
<div id="whatis" class="container">
<h2>What is Online Fingerprinting?</h2>
<!-- Example row of columns -->
<!-- Value -->
<!-- <pre id="object"></pre> -->
<!-- Child -->
<!-- <ul id='list'></ul> -->
<div class="divider-line"></div>
<div class="row" style="text-align: left;">
<div class="col-md-4" style="padding: 30px;">
<h4 style="margin-bottom: 30px;">What is browser fingerprinting?</h4>
<p>Browser fingerprinting is a tracking technique executed by running a code that requests a user's device to generate
a unique set of information, and based on that information, creates a unique fingerprint for that particular user.
Users are generally not aware that they are being identified and tracked online this way. </p>
<!-- <p><a class="btn btn-default" href="#" role="button">View details »</a></p> -->
</div>
<div class="col-md-4" style="padding: 30px;">
<h4 style="margin-bottom: 30px;">What is done with users' fingerprints?</h4>
<p>This information is sometimes used to personalize a website's or service's user experience, but is also often used
to create profiles and stories about billions of users. </p>
<!-- <p><a class="btn btn-default" href="#" role="button">View details »</a></p> -->
</div>
<div class="col-md-4" style="padding: 30px;">
<h4 style="margin-bottom: 30px;">Why did we create this site?</h4>
<p>There's little to no information about how widespread the practice of browser fingerprinting is. Moreover, users
generally do not consent to this practice, and tools such as Ghostery and AdBlock do not have the capability of
blocking this activity. We created this website to raise awareness about this practice, and eventually allow people
to identify the websites that are fingerprinting (a feature that we will add soon).</p>
</div>
</div>
<hr>
</div>
<!-- /container -->
<!-- <section id="dataWrap"> -->
<h2>Data Highlights</h2>
<p id="updated"><span></span></p>
<!-- section -->
<div class="fadeInBlock container vizContainer">
<h4 style="text-align: left;">We periodically analyze the top websites ranked by traffic according to <a href="http://www.alexa.com/topsites">Alexa</a>.
From this analysis we have extracted the following highlights: </h4>
<div id="totalFingerprintedTraffic"></div>
<!-- <div class="row">
<div id="totalFingerprinted" class="col-md-12"></div>
</div> -->
<!-- Example row of columns -->
<div class="row">
<div class="col-md-5">
<div id="globalVisitors">
<h4 class="dataTitle">Percentage of all analyzed websites that fingerprint users <i class="fa fa-info-circle fa-1x" data-toggle="tooltip"
data-original-title="We scanned the websites with the most traffic (ranked by Alexa). This doesn't include websites that track users using cookies, only websites that use fingerprinting technology."
data-placement="bottom" style="color:#9b9b9b;"></i></h4>
</div>
<!-- <img src="http://placehold.it/350x350"> -->
</div>
<div class="col-md-7">
<h4 class="dataTitle">Top Website Categories Ranked by Number of Fingerprinted Visits <i class="fa fa-info-circle fa-1x" data-toggle="tooltip"
data-original-title="Rank of Website Categories (categories taken from Alexa), by number of monthly fingerprinted visits"
data-placement="bottom" style="color:#9b9b9b;"></i></h4>
<!-- <img src="http://placehold.it/350x350"> -->
<div id="categoryBars">
<svg width="600" height="500"></svg>
</div>
<hr>
</div>
</div>
</div>
<!-- /container -->
<div class="section-divider-line"></div>
<!-- Trends Section -->
<div id="trends" class="container vizContainer fadeInBlock">
<h3 style="margin-bottom:40px;"> Trends (monthly) </h3>
<br>
<div class="row">
<!-- <div class="col-md-4">
<h4> Total Sites that Fingerprint (Month-to-month)</h4>
<div id="trend1"> </div>
</div> -->
<center>
<form>
Select scope of analysis:
<label><input type="radio" name="range" id="range" value="1000" checked> Top 1000 sites</label>
<label><input type="radio" name="range" id="range" value="100000"> Top 100,000 sites</label>
<label><input type="radio" name="range" id="range" value="400000"> Top 400,000 sites</label>
</form>
</center>
<br><br>
<br>
<div class="col-md-12">
<center>
<h4>Number of sites that fingerprint displayed by fingerprinting technique</h4>
</center>
<div id="trendTypes"></div>
<center>
<h4>Number of users fingerprinted per month</h4>
</center>
<div id="trendTraffic"></div>
<center>
<h4>Number of fingerprints found per month</h4>
</center>
<div id="trendTotal"></div>
</div>
</div>
</div>
<div class="section-divider-line"></div>
<!-- section -->
<div class="container vizContainer fadeInBlock">
<h3> Category Breakdown </h3>
<div class="row">
<h4 class="dataTitle">Fingerprinted Visits by Site Category <i class="fa fa-info-circle fa-1x" data-toggle="tooltip" data-original-title="The percentage and highlighted color indicates the proportion of websites that fingerprint of the total analyzed sites of that category."
data-placement="bottom" style="color:#9b9b9b;"></i></h4>
<div id="categorizer">
<div class="row">
<div class="col-md-3 doughnut">
<div id="category1"></div>
</div>
<div class="col-md-3 doughnut">
<div id="category2"></div>
</div>
<div class="col-md-3 doughnut">
<div id="category3"></div>
</div>
<div class="col-md-3 doughnut">
<div id="category4"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 doughnut">
<div id="category5"></div>
</div>
<div class="col-md-3 doughnut">
<div id="category6"></div>
</div>
<div class="col-md-3 doughnut">
<div id="category7"></div>
</div>
<div class="col-md-3 doughnut">
<div id="category8"></div>
</div>
</div>
</div>
</div>
</div>
<!-- section -->
<div class="container ">
<h4 class="dataTitle"> Percentage of sites fingerprinting users <i class="fa fa-info-circle fa-1x" data-toggle="tooltip" data-original-title="Highlighted color indicates what fraction of websites visited by users from a given country are fingerprinting them. Country indicates users' location not the website's hosting country. "
data-placement="bottom" style="color:#9b9b9b;"></i></h4>
<div class="row">
<div id="mapC" class="col-md-10">
<div id="container2"></div>
</div>
<div class="col-md-2">
<div id="container"></div>
</div>
<!-- here goes map -->
</div>
<hr>
</div>
<!-- /container -->
<div id="downloads">
</div>
<!-- section -->
<div id="about" class="container vizContainer">
<!-- Example row of columns -->
<h2>About</h2>
<div class="row" id="aboutText">
<div class="col-md-6">
<center>
<h3>About</h3>
</center>
<p>This website is a collaboration between the <a href="http://datatransparencylab.org/">Data Transparency Lab ("DTL") <i class="fa fa-external-link" ></i></a>,
and DTL grantees <a href="https://webtransparency.cs.princeton.edu/webcensus/#"> Steven Englehardt and Arvind Narayanan of Princeton University <i class="fa fa-external-link"></i></a>,
the researchers behind the Princeton Web Census.</p>
<p>OpenWPM is a research tool that provides information about the measurements performed on websites, which has been
used to generate the Princeton Web Census. The measurements were focused on identifying the tracking techniques
used by those websites, both stateful (cookie-based) and stateless (fingerprinting-based). The tool can be used
to check which tracking techniques are used by a given website or to check how widely used a given tracking technology
is.
</p>
<p>This website is an effort to interface, communicate, and share the data yielded by Privacymeter, a tool created by
the <a href="http://datatransparencylab.org/techprogram.html">DTL Tech Program <i class="fa fa-external-link" ></i></a>,
which builds on top of the Princeton OpenWPM, and enhances it. You can find other privacy tools supported by DTL
<a href="http://datatransparencylab.org/tools.html">here <i class="fa fa-external-link" ></i></a>. At the moment,
the website is only visualizing data highlights related to browser fingerprinting, other tracking techniques will
analyzed and visualized in the future. </p>
<a href="http://datatransparencylab.org/"><img src="images/dtl1-sm.png"></a>
</div>
<div class="col-md-6">
<center>
<h3>Methodology</h3>
</center>
<p>The Princeton Web Census is made possible by their open-source web privacy measurement tool, OpenWPM1 , which uses
an automated version of a full-fledged consumer browser. It supports parallelism for speed and scale, automatic
recovery from failures of the underlying browser, and comprehensive browser instrumentation.</p>
<p>Privacymeter builds on top of the OpenWPM results and hones in on the websites with the most traffic (as ranked by
<a href="http://www.alexa.com/topsites">Alexa <i class="fa fa-external-link" ></i></a>), analyzing tens of thousands
of websites, which encompass 145 countries and 16 website categories.
</p>
<p><a class="btn btn-default" href="https://webtransparency.cs.princeton.edu/webcensus/#" role="button">View details »</a></p>
</div>
</div>
</div>
<!-- /container -->
<!-- </section> -->
<!-- traffic wrapper -->
</div>
<!-- <script src="{{ site.baseurl}}/script/privacymeter-map.js"></script> -->
<!-- <script src="{{ site.baseurl}}/script/trendTypes.js"></script> -->