Add FAQ

src/app.scss

@@ -2,12 +2,15 @@
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
 
+$blockquote-font-size: $font-size-base;
+
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/type";
 @import "~bootstrap/scss/grid";
 @import "~bootstrap/scss/images";
 @import "~bootstrap/scss/alert";
 @import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/card";
 @import "~bootstrap/scss/forms";
 @import "~bootstrap/scss/custom-forms";
 @import "~bootstrap/scss/input-group";
@@ -47,4 +50,14 @@ body {
   .staple {
     display: none;
   }
+}
+
+.blockquote {
+  border-left: ($spacer * 0.25) solid $gray-400;
+  padding-left: $spacer;
+  color: $blockquote-small-color;
+}
+
+#faq .card {
+  margin-bottom: $spacer;
 }

src/index.html

@@ -23,6 +23,9 @@
         <li class="nav-item">
           <a class="nav-link" href="#idea">Idea</a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#faq">FAQ</a>
+        </li>
       </ul>
     </div>
   </div>
@@ -58,7 +61,7 @@
           <select id="word-list" class="form-control custom-select" name="list">
             <option value="small">2048 words (11 bits/word)</option>
             <option value="medium">4096 words (12 bits/word)</option>
-            <option value="large">8192 words (13 bits/word)</option>
+            <option value="large" selected>8192 words (13 bits/word)</option>
           </select>
         </div>
       </div>
@@ -97,7 +100,7 @@
   </div>
 </div>
 
-<div class="container" id="idea">
+<div class="container mb-5" 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>
@@ -125,22 +128,89 @@
     <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 class="lead"><span class="mark">5 words from the large list</span>, or <span class="mark">6 words
+    from the small list</span> 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>
+    cracking attempt for <em>over a year</em>.</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>
+  <p>You don't have to worry about this hypothetical scenario. Running this sort of attack is prohibitively expensive.
+    Unless you possess highly valuable secrets that makes this sort of effort worthwhile, in which case you should be
+    using stuff more complex than a password to protect it. If you have to, you can simply add more words.</p>
 
   <p class="lead">In practice, most real life systems use secure password hashing algorithms, captchas, and other
     mechanisms to stop password cracking. It is unlikely that your attacker can reach anywhere close to a million
-    guesses a second, and so a 4 word password is probably sufficient for most non-critical accounts.</p>
+    guesses a second, and so a <span class="mark">four word password</span> (from the large list) is probably sufficient
+    in real life. If you are paranoid and want to feel better, use five.</p>
+</div>
+
+<div class="container mb-5" id="faq">
+  <h3 class="mb-3">Frequently Asked Questions</h3>
+  <div class="card">
+    <div class="card-body">
+      <h5 class="card-title">Why did you make this website?</h5>
+      <p class="card-text">
+        I made this website because I wanted a good password generator. I know the xkcd-style password scheme is fairly
+        secure and easy to remember, especially if you increase the length, and it's simple enough to understand and
+        verify. Most programmers can audit the source code of this website to ensure security.
+      </p>
+      <p class="card-text">
+        Another major part of the reason is that a lot of the similar websites fail to generate passwords securely: for
+        example, they used <code>Math.random()</code>, which is not a cryptographically secure random number generator,
+        and should never be used to passwords. This website aims to avoid such pitfalls, and provide a truly secure
+        experience.
+      </p>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-body">
+      <h5 class="card-title">Why is this site more secure than alternatives?</h5>
+      <ol>
+        <li>I have a large list of 8192 words.</li>
+        <li>I use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues">
+          <code>window.crypto.getRandomValues()</code></a> &mdash; the only cryptographically-secure random number
+          generator in JavaScript, instead of
+          <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">
+            <code>Math.random()</code></a>, whose use is explicitly discouraged for this purporse.
+        </li>
+      </ol>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-body">
+      <h5 class="card-title">Bruce Schneier says this password scheme is broken. Is it?</h5>
+      <p class="card-text">
+        Bruce Schneier completely missed the point:
+      </p>
+      <blockquote class="blockquote">
+        <p class="card-text">Modern password crackers combine different words from their dictionaries:</p>
+        <p class="card-text">&hellip;</p>
+        <p class="card-text">This is why the oft-cited XKCD scheme for generating passwords -- string together
+          individual words like "correcthorsebatterystaple" -- is no longer good advice. The password crackers are on to
+          this trick.</p>
+        <footer class="blockquote-footer">Bruce Schneier, <cite title="Source Title"><a
+            href="https://www.schneier.com/blog/archives/2014/03/choosing_secure_1.html" rel="nofollow">Choosing Secure
+          Passwords</a></cite></footer>
+      </blockquote>
+      <p class="card-text">
+        Excuse me, Bruce, but the entropy calculation for this password scheme is based on the absolute worst case
+        scenario: that the attackers knows exactly which words you have to choose from, and attempts to guess every
+        possible combinations from the known dictionary.
+      </p>
+      <p class="card-text">
+        In essence, we are assuming the attacker is <em>more than</em> &ldquo;on to this trick&rdquo; already. Whether
+        attackers are &ldquo;on to this trick&rdquo; is completely therefore irrelevant to its security. If Bruce
+        Schneier thinks using four words is insufficiently secure, he should be suggesting five or six words, not
+        <strong>shamelessly promoting his own password generation scheme</strong>.
+      </p>
+      <p class="card-text">
+        If you don't believe me, that okay. Lots of other people agree with me. Check out
+        <a href="https://security.stackexchange.com/q/62832/103593">this post on the Information Security Stack
+          Exchange</a>. The top four answers (by a huge margin) agree with me.</p>
+    </div>
+  </div>
 </div>
 
 </body>