-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (89 loc) · 5.17 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
<!DOCTYPE html>
<html lang='en'>
<head>
<title>CSS-only browser detection</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.firefox-only, .ms-only, .webkit-only{
display: none;
}
input::-moz-range-track, .firefox-only {
display: inline;
}
:-webkit-full-screen, .webkit-only {
display: inline;
}
input::-ms-track, .ms-only {
display: inline;
}
#form-container {
border: 1px solid #ff00ff;
}
</style>
</head>
<body>
<h1>CSS-only browser detection proof of concept</h1>
<h2>Small demo</h2>
<p>Hello there. I can see you are a <span class='firefox-only'>Firefox</span>
<span class='webkit-only'>webkit</span><span class='ms-only'>IE/ Edge</span> User.<br/>
Theoretically I could find out more information about your browser and use that (with everything
else I could somehow find out) to fingerprint you even with a spooved useragent and javascript disabled.<br/>
Try submitting the form below and check your URL.
</p>
<div id='form-container'>
<form class='firefox-only'>
<label for='firefoxTextInput'>Enter some text. Or don't; it won't do anything.</label><br/>
<input id='firefoxTextInput' type='text'/><br/>
<input name='browser' type='hidden' value='firefox' /><br/>
<button type='submit'>Submit and admit you're using firefox</button>
</form>
<form class='webkit-only'>
<label for='webkitTextInput'>Enter some text. Or don't it won't do anything.</label><br/>
<input id='webkitTextInput' type='text'/><br/>
<input name='browser' type='hidden' value='webkit' /><br/>
<button type='submit'>Submit and admit you're using webkit</button>
</form>
<form class='ms-only'>
<label for='msTextInput'>Enter some text. Or don't it won't do anything.</label><br/>
<input id='msTextInput' type='text'/><br/>
<input name='browser' type='hidden' value='ms' /><br/>
<button type='submit'>Submit and admit you're using IE/ Edge</button>
</form>
</div>
<h2>How does it work?</h2>
<p>
It's rather simple, which is why I am almost certain that someone else has built this exact proof
of concept before, but I did not check before doing it because it sounded like a fun project to
complete in under an hour.<br/>
Web browsers will ignore any rule that contains a selector which they don't understand.
All I did was hide three forms (and spans) that look almost identical. When used maliciously,
the only difference between those would be the hidden input which contains information about your
browser. Then I just had to make them visible again in a rule that also contains a selector that
the other browsers won't understand.
</p>
<h2>Why is this bad?</h2>
<p>
For privacy reasons, many people try to obscure which browser they are using by changing their
useragent. Those people will often disable javascript as well and think they are no longer fingerprintable.
While it certainly is a lot harder to fingerprint those browsers, it is not impossible.
Combined with information about the other methods used to enhance privacy, it might be possible to end up
just as unique as everyone else.
</p>
<h2>Are you serious? You're only figuring out which kind of browser they are using. That's not private information.</h2>
<p>
While this is correct, please note that due to browsers constantly adding and removing features,
it is possible to get a far more finely grated image of what browser someone is using by applying
this method in a more refined way.<br/>
By using very specific rules it may be possible to find out which browser <b>version</b> someone is using.
Combine this with everything else you can scrape together and you might just have a unique identifier.<br/>
Safari on iOS has had a static user agent for years now -to prevent websites from knowing which
version it is. This means that there are people who absolutely care about not every website knowing which
browser version they are using.<br/>
Adding a bunch of almost identical forms with slightly different css rules to display them won't increase
a site's footprint by too much, considering the loads of NPM packages that most websites serve these days.<br/>
Also there is the more eloquent solution that does not even require the user to submit a form, done
through loading background images via css. This, however, is an exercise left to the reader.<br/>
PRs are always welcome.
</p>
</body>
</html>