diceware/index.html
Douglas Muth 7598f49c4a Changed code from a self-contained function into an object with code
that no longer runs when the file is included.  This is in preparation
for Qunit testing.
2017-01-29 06:47:08 -05:00

275 lines
11 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Diceware: Create Secure Passwords You Can Actually Remember!</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="./starter-template.css" rel="stylesheet">
<!-- Our different dice faces. -->
<link href="./dice.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<meta property="og:title" content="Diceware: Generate Secure Passwords You Can Actually Remember!" />
<meta property="og:description" content="Diceware is a password generator which creates passwords based on dicerolls keyed to a set of words." />
<meta property="og:url" content="https://www.dmuth.org/diceware/" />
<meta property="og:image" content="https://www.dmuth.org/diceware/dice.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@dmuth" />
<meta name="twitter:url" content="https://www.dmuth.org/diceware/" />
<meta name="twitter:title" content="Diceware: Generate Secure Passwords You Can Actually Remember!" />
<meta name="twitter:description" content="Diceware is a password generator which creates passwords based on dicerolls keyed to a set of words." />
<meta name="twitter:image" content="https://www.dmuth.org/diceware/dice.jpg" />
</head>
<body>
<div class="container">
<a id="github_ribbon" style="display: none; " href="https://github.com/dmuth/diceware"
><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<div class="starter-template">
<h1>Diceware Password Generator</h1>
<p class="lead">
Generate high-entropy passwords the easy way!
</p>
<!-- This row is completely hidden, but is used to hold elements
that get cloned after a dice roll. -->
<div class="row source" style="display: none; ">
<div class="col-md-12" style="height: 0px; ">
<div class="die dice1 dice_element" style="float: left; ">
<div class="dot center"></div>
</div>
<div class="die dice2 dice_element" style="float: left; ">
<div class="dot dtop dleft"></div>
<div class="dot dbottom dright"></div>
</div>
<div class="die dice3 dice_element" style="float: left; ">
<div class="dot dtop dleft"></div>
<div class="dot center"></div>
<div class="dot dbottom dright"></div>
</div>
<div class="die dice4 dice_element" style="float: left; ">
<div class="dot dtop dleft"></div>
<div class="dot dtop dright"></div>
<div class="dot dbottom dleft"></div>
<div class="dot dbottom dright"></div>
</div>
<div class="die dice5 dice_element" style="float: left; ">
<div class="dot dtop dleft"></div>
<div class="dot dtop dright"></div>
<div class="dot center"></div>
<div class="dot dbottom dleft"></div>
<div class="dot dbottom dright"></div>
</div>
<div class="die dice6 dice_element" style="float: left; ">
<div class="dot dtop dleft"></div>
<div class="dot dtop dright"></div>
<div class="dot center dleft"></div>
<div class="dot center dright"></div>
<div class="dot dbottom dleft"></div>
<div class="dot dbottom dright"></div>
</div>
<div class="dice_word dice_element" style="float: left; padding-left: 20px; padding-top: 25px; ">
</div>
<div class="results_words_key" >Your words are: </div>
<div class="results_words_value" ></div>
<div class="results_phrase_key" >Your passphrase is: </div>
<div class="results_phrase_value" ></div>
<div class="results_num_possible_key" ># of possible passwords: </div>
<div class="results_num_possible_value" ></div>
</div>
<div class="alert alert-danger bad_crypto" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Whoa there! Your browser doesn't have the getRandomValues() function.
This means that dice rolls you make <em>will not be cryptogrpahically secure!</em><br/>
Please try another browser. Otherwise, proceed at your own risk.
</div>
</div> <!--/ row -->
<div class="row">
<div class="col-md-12">
<div class="message" ></div>
<h2 class="dice_num">
Number of Dice to roll:
</h2>
<div class="btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default dice_button">2</button>
<button type="button" class="btn btn-default dice_button">3</button>
<button type="button" class="btn btn-default dice_button active">4</button>
<button type="button" class="btn btn-default dice_button">5</button>
<button type="button" class="btn btn-default dice_button">6</button>
<button type="button" class="btn btn-default dice_button">7</button>
<button type="button" class="btn btn-default dice_button">8</button>
</div>
<br/>
<a name="roll_dice_button" ></a>
<button type="button" class="btn btn-default btn-lg btn-primary" id="roll_dice">
<span class="glyphicon glyphicon-play" aria-hidden="true" ></span> Roll Dice!
</button>
</div>
</div><!-- /row -->
<p/>
<div class="row">
<div class="col-md-12" >
<div class="results">
</div>
</div>
</div><!-- /row -->
<div class="row" style="text-align: left;">
<div class="col-md-12">
<h3>About Diceware</h3>
Weak passwords are a big flaw in computer security due to a lack of "entropy"
or randomness. For example, how many times have you used the name of a pet or relative or street
in a password, or perhaps the number "1"? Not very random, is it? :-)
Worse still, if
passwords are reused between services, <a href="http://www.businessinsider.com/biggest-password-mistake-2014-8"
>that increases your security risk</a>. This is not theoretical, <a href="http://www.techspot.com/news/65255-hackers-access-github-accounts-reusing-passwords-previous-leaks.html"
>this has already happened.</a>
</p>
Fact is, humans are terrible at remembering random combiations of letters and
numbers, but we are great at remembering phrases of words. That's where Diceware comes in.
</p>
This Diceware web app is based on the proposal at <a href="http://world.std.com/~reinhold/diceware.html">http://world.std.com/~reinhold/diceware.html</a>
wherein virtual dice are roled 5 times, and the 5 digit number used against a lookup table of words.
4 dice rolls gives you 4 random words which are easy for a human being to remember, yet have
a high amount of entropy which makes them hard to crack.
</p>
For more information on Diceware:
<ul>
<li><a href="http://world.std.com/~reinhold/diceware.html">The Diceware Passphrase FAQ</a></li>
<li><a href="http://world.std.com/~reinhold/diceware.wordlist.asc">Original Diceware word list</a> (This implementation uses <a href="#wordlist">a different wordlist...</a>)</li>
<li><a href="http://world.std.com/~reinhold/diceware.txt">Diceware for Passphrase Generation and Other Cryptographic Applications</a></li>
</ul>
For more information on the entropy in passphrases, I'd like to refer you
<a href="https://xkcd.com/936/">to this XKCD comic</a>.</p>
Diceware is a trademark of Arnold Reinhold.
<h3>FAQ: Why not use LastPass or a similar product?</h3>
By all means, feel free to do so. LastPass is an excellent product and I highly recommend it.
That said, there's no reason that Diceware cannot be used concurrently with LastPass. Personally,
I like passwords that I can remember.
<h3>I can't believe you're sending passwords over the Internet!</h3>
I'm not. Passwords are generated within your browser and do not leave it (unless you copy them out yourself).
<h3>FAQ: Are these dice rolls cryptographically secure?</h3>
Yes, insofar as we're using the
<a href="https://developer.mozilla.org/en-US/docs/Web/API/RandomSource/getRandomValues">getRandomValues() function in Javascript</a>,
and you trust that your
browser and computer have not been compromised or otherwise tampered with. Keep in mind that a not-so-theoretical attack
would be for an attacker to compromise the random number generator on your computer so that
anything that is encrypted (or passkeys generated) would be suspectible to less intense cryptoanalysis.
<h3>FAQ: Is the source available?</h3>
Yep! You can grab a copy at <a href="https://github.com/dmuth/diceware">https://github.com/dmuth/diceware</a>
</p>
In fact, if you are nervous about generating a password on a website (even though the password is actually
generated by Javascript in your browser), I would encourage you to download the source and run it locally.
<a name="wordlist"></a>
<h3>FAQ: Why did you change the wordlist?</h3>
I used to use <a href="http://world.std.com/~reinhold/diceware.wordlist.asc">the original wordlist</a>,
but it contained a lot of symbols, punctuation, numbers, and 2 and 3 letter words. I wanted to try a different
wordlist with longer words, no non-alphabetic characters, and words more commonly used. So I got
<a href="http://norvig.com/ngrams/">Peter Norvig's</a> list of <a href="http://norvig.com/ngrams/count_1w.txt"
>the 1/3rd million most frequently used words</a> and selected the 7,776 most common words between 4 and 7
characters in length.
</p>
I am always considering what words I use in the wordlist. I may opt to use shorter words in the future.
<h3>Who built this? / Contact</h3>
My name is <a href="http://www.dmuth.org/">Douglas Muth</a>, and I am a software engineer in Philadelphia, PA.
</p>
There are several ways to get in touch with me:
<ul>
<li>Email to doug.muth AT gmail DOT com or dmuth AT dmuth DOT org</li>
<li><a href="http://www.facebook.com/dmuth">Facebook</a> and <a href="http://twitter.com/dmuth">Twitter</a></li>
<li><a href="http://www.linkedin.com/in/dmuth">LinkedIn</a></li>
</ul>
Feel free to reach out to me if you have any comments, suggestions, or bug reports.
</div>
</div>
</div><!-- /starter-template -->
</div><!-- /.container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./main.js"></script>
<script>
Diceware.go();
</script>
</body>
</html>