-
Notifications
You must be signed in to change notification settings - Fork 23
/
test.html
124 lines (124 loc) · 5.14 KB
/
test.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
<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<link integrity="sha256-59U5fUnSnro6fLunzvrOYDYaMK0rztwBFmISM27NunY=" crossorigin="anonymous" rel="stylesheet" href="assets/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Password Entropy</title>
<script integrity="sha256-nhc0YqLx/ngDlJG0LJyvdBgoOlwJupmPI+QbYlp8gHs=" crossorigin="anonymous" src="js/zxcvbn-async.js"></script>
<style type="text/css">
@import 'https://fonts.googleapis.com/css?family=Droid+Sans+Mono';
#password {
font-family: 'Droid Sans Mono';
font-size: 14px;
height: 25px;
width: 100%;
}
.align-center {
margin: 0 auto;
padding: 0 10px;
text-align: center;
width: 768px;
}
.justify-left {
text-align: left;
}
.gauge {
height: 300px;
width: 400px;
}
#g1 { margin: 0 auto; }
#show_me {
float: right;
height: 25px;
position: relative;
top: -28px;
width: 100px;
}
#show_me input {
cursor: pointer;
width: 20px;
height: 20px;
}
#show_me label {
position: absolute;
top: 5px;
}
.warning {
color: red;
font-weight: bold;
}
@media only screen and (max-width: 767px) {
.align-center { width: 480px; }
}
@media only screen and (max-width: 479px) {
.align-center { width: 100%; }
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Passphrase and Password Generator</h1>
<ul id="navigation">
<li><a href="index.html">Generate Passwords</a></li>
<li><a href="what.html">What is entropy?</a></li>
<li><a href="test.html">Entropy Testing Meter</a></li>
</ul>
</div>
<div class="align-center">
<p class="justify-left"><span class="warning">DO NOT ENTER YOUR ACTUAL PASSWORDS!</span> I promise I'm not logging them, but you can't prove that. This is meant as an exercise to show you weak or strong your intuition may be when creating passwords.</p>
<p class="justify-left">Below is a password meter that tests entropy using <a href="https://github.com/dropbox/zxcvbn">zxcvbn by Dropbox</a>. It tests for dictionary words, leet-speak, recognizable patterns, and other heuristics to give an educated guess at what the entropy could be.</p>
<p class="justify-left">If you are pasting passwords from the generator, you will notice disagreements. This tester is a <em>blind entropy</em> guess. It doesn't know the set of elements your password is from, nor does it know if a random function was used. So, the guess may be higher or lower than what you know it to be.</p>
<p class="justify-left">Can you raise the needle above 55-bits of entropy? Can you reach the safety of 70-bits?</p>
<input type="password" id="password" name="password" type="text" size="48">
<div id="show_me">
<input onclick="toggle_password_visibility()" id="checkbox" type="checkbox" name="checkbox" />
<label for="checkbox">Show</label>
</div>
<div id="g1" class="gauge"></div>
</div>
</div>
<div id="footer">
<center>
<p><strong>Disclaimer: This is for demonstration puposes only and is not logging passwords!</strong></p>
<p>
<a href="https://github.com/atoponce/webpassgen"><img title="Get the source code" src="assets/github.png" /></a>
<a href="https://github.com/atoponce/webpassgen/releases/latest"><img title="Download latest release" src="assets/download.png" /></a>
<a href="https://twitter.com/AaronToponce"><img title="Meet the author" src="assets/twitter.png" /></a>
</p>
</center>
</div>
<script integrity="sha256-xkPnL6FqCpvOQTxQR88hb9ooHutKR6xTiAdiDFqWRDk=" crossorigin="anonymous" src="js/raphael-2.1.4.min.js"></script>
<script integrity="sha256-s+qB1VKhos4lYcVV8hIsZ5JoFYpG3HC4JJ1H/EWUTcs=" crossorigin="anonymous" src="js/justgage.js"></script>
<script>
function toggle_password_visibility() {
var input = document.getElementById("password");
var checkbox = document.getElementById("checkbox");
if (checkbox.checked) password.type = "text";
else password.type = "password";
}
var g1 = new JustGage({
id: "g1",
pointer: true,
value: 0,
min: 55,
max: 80,
title: "Entropy",
label: "bits",
gaugeWidthScale: 0.3,
donut: false,
customSectors: [{ color: "#ff0000", lo: 0, hi: 59 },
{ color: "#ffa500", lo: 59, hi: 64 },
{ color: "#ffff00", lo: 64, hi: 69 },
{ color: "#00ff00", lo: 69, hi: 256 }],
});
password.addEventListener('input', function() {
var password = document.getElementById('password').value;
var entropy = Math.log2(zxcvbn(password).guesses);
g1.refresh(Math.floor(entropy));
});
</script>
</body>
</html>