mirror of
https://github.com/quantum5/correcthorsebatterystaple.git
synced 2025-04-25 02:31:57 -04:00
143 lines
7 KiB
HTML
143 lines
7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Correct Horse Battery Staple-Style Password Generator</title>
|
|
</head>
|
|
|
|
<body data-spy="scroll" data-target="nav" data-offset="72">
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">Correct Horse Battery Staple</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
|
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="nav-anchors">
|
|
<ul class="nav navbar-nav mr-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#generator">Password Generator</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#idea">Idea</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container" id="generator">
|
|
<div class="jumbotron py-4">
|
|
<div class="alert alert-danger" id="too-old">
|
|
${require('octicons').alert.toSVG({ height: 24 })}
|
|
Your browser is too old: it does not support the necessary APIs for this web application.
|
|
</div>
|
|
<p class="lead">This is a truly secure password generator that generates easy-to-remember passwords.</p>
|
|
<hr class="my-4">
|
|
<div class="input-group mb-3">
|
|
<input id="generated-password" class="form-control form-control-lg text-monospace" type="text"
|
|
placeholder="Click the Generate button to generate a new password">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-success copy" type="button" id="copy-password"
|
|
data-clipboard-target="#generated-password">
|
|
${require('octicons').clippy.toSVG({ height: 20 })}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress my-3" id="password-bits">
|
|
<div class="progress-bar" role="progressbar" aria-valuemin="0"></div>
|
|
</div>
|
|
|
|
<form id="options-form">
|
|
<div class="form-group row">
|
|
<label for="word-list" class="col-sm-2 col-form-label">Word List</label>
|
|
<div class="col-sm-10">
|
|
<select id="word-list" class="form-control custom-select" name="list">
|
|
<option value="small">2048 words (11 bits/word)</option>
|
|
<option value="medium" disabled>4096 words (12 bits/word)</option>
|
|
<option value="large" disabled>8192 words (13 bits/word)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<label for="word-count" class="col-sm-2 col-form-label">Word Count</label>
|
|
<div class="col-sm-10">
|
|
<input id="word-count" class="form-control" type="number" name="count" value="4" min="1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<div class="pt-0 col-sm-2 col-form-label">Options</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="use-capitalize" name="capitalize">
|
|
<label for="use-capitalize">Capitalize the first letter</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="use-symbol" name="symbol">
|
|
<label for="use-symbol">Add a symbol</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="use-digit" name="digit">
|
|
<label for="use-digit">Add a digit</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button class="btn btn-lg btn-primary" id="run-generator">Generate</button>
|
|
<button class="btn btn-lg btn-success" id="save-settings">Save Settings</button>
|
|
<button class="btn btn-lg btn-danger" id="clear-settings">Clear Settings</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container" id="idea">
|
|
<h3 class="mb-3">The Idea</h3>
|
|
<p class="lead">We tend to associate secure passwords with complicated and hard-to-remember passwords. But it
|
|
doesn't have to be this way.</p>
|
|
<p>We make password difficult to guess by increasing <em>entropy</em> — the degree of uncertainty in the
|
|
password. The higher the entropy, the harder it is to guess the password.</p>
|
|
<p>One way of increasing entropy is to make passwords more complicated. Another way is to make the password
|
|
longer, but keeping it simple, as the following xkcd comic shows:</p>
|
|
<a class="d-block" href="https://xkcd.com/936/"
|
|
title="To anyone who understands information theory and security and is in an infuriating argument with someone who does not (possibly involving mixed case), I sincerely apologize.">
|
|
<figure class="figure border rounded p-4 bg-light">
|
|
<img class="figure-img img-fluid d-block mx-auto" src="https://imgs.xkcd.com/comics/password_strength.png"
|
|
alt="xkcd comic about password strength">
|
|
<figcaption class="figure-caption">To anyone who understands information theory and security and is in an
|
|
infuriating argument with someone who does not (possibly involving mixed case), I sincerely apologize.
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
<p>The core idea is that while using a single dictionary as a password is horribly insecure and can be cracked in
|
|
seconds, each additional word makes cracking exponentially harder.</p>
|
|
|
|
<p>There is a lot of criticism on the internet about this password scheme. However, most of them fail to get the
|
|
actual point. There are also claims that <code>correcthorsebatterystaple</code> is as secure as a 9 character
|
|
password, which sounds fairly bad. This is true if your 9 character password is truly random, such as
|
|
<code>n98idhi3n</code>, and not say, <code>Tr0ub4d0r</code>. The point is that,
|
|
<code>correcthorsebatterystaple</code> is more memorable than <code>n98idhi3n</code>, for approximately equal
|
|
security. To increase security, we can always add more words.</p>
|
|
|
|
<p class="lead"><span class="mark">5 words</span> from the large list, or <span class="mark">6 words</span>
|
|
from the small list is sufficient for all reasonable threats.</p>
|
|
|
|
<p>Let us consider the absolute worst case, assuming the attacker knows your password is generated by this site,
|
|
knowing that it has 65 bits of entropy, your password was insecurely hashed, and your enemy has GPUs to run
|
|
<span class="mark">500 billion attempts every second</span>. Even then, this scheme will resist the
|
|
cracking attempt for <code>over a year</code>.</p>
|
|
|
|
<p>Now, most attackers can't attack you that fast, and those who could have better things to do than spending a year
|
|
doing nothing but attacking you (unless you possess state secrets or something), so this is more than sufficient for
|
|
your password. In the highly unlikely case that your password need more security than this offers, or perhaps you
|
|
are just paranoid, adding an extra word would make the attack time thousandfold.</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |