Press "Enter" to skip to content

Generate a Secure Password Generator Plugin | Diceware

Diceware is an easy-to-remember jQuery-based password generator that uses plain dice to randomly select words from a Diceware Wordlist. Weak passwords are a major 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, relative, or street in a password, or perhaps the number “1”. Not very random, is it? 🙂 Worse, if passwords are reused between services, that increases security risk.

The truth is that humans are awful at remembering random combinations of letters and numbers, but we are pretty good at remembering phrases of words. This is where Diceware comes in.

Diceware is based on the suggestion at http://world.std.com/~reinhold/diceware.html where the default dice are rolled 5 times, and the 5-digit number is used against a lookup table of words. 4 dice rolls give you 4 random words that are easy for a human to remember, however, they have a lot of entropy which makes them hard to break.

diceware password generator, diceware password strength, diceware rempe, diceware word list txt, diceware entropy, how to make a diceware password, diceware github

How to make use of it:

1. Include jQuery library and bundled JavaScript & CSS on the web page.

<link href="/path/to//dice.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/bundle.js"></script>

2. Create the HTML for the password generator.

<!-- This row is completely hidden, but is used to hold elements that get cloned after a dice roll. -->
<div class="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>

<div class="message" ></div>
<h2 class="dice_num">
  Number of Dice Rolls:
</h2>
<div class="btn-group-lg" role="group" aria-label="...">
  <button id="button-dice-2" type="button" class="btn btn-default dice_button">2</button>
  <button id="button-dice-3" type="button" class="btn btn-default dice_button">3</button>
  <button id="button-dice-4" type="button" class="btn btn-default dice_button">4</button>
  <button id="button-dice-5" type="button" class="btn btn-default dice_button">5</button>
  <button id="button-dice-6" type="button" class="btn btn-default dice_button active">6</button>
  <button id="button-dice-7" type="button" class="btn btn-default dice_button">7</button>
  <button id="button-dice-8" 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>

<!-- Results will be displayed here. -->
<div class="results">
</div>

In summary:

  • npp run clean – Cleanup after a previous run
  • npm install – Install NPM packages used by Diceware
  • npm run dev-build – Run webpack to pack Javascript files and watch for changes.
  • http-server
  • vim src/lib.js src/index.js
  • rm -fv src/index.js && git co src/index.js – Get the new SHA1 hash that will be displayed in debug messages.
  • npm test – Make sure you didn’t break any of the core logic!
  • npm run build – Webpack Javascript files in production mode (smaller file but takes longer)
  • ./go-sync-to-s3.sh – Do this if you’re me, to upload to S3. If you’re not me, you’ll need to do something else, or possibly nothing at all.

In practice:

  • npm run clean; npm run dev-build – Run webpack in dev mode while working on Javascript
    • http-server – Stand up a local HTTP server
    • vim src/lib.js src/index.js
    • rm -fv src/index.js && git co src/index.js
  • npm run clean; npm run build – Run webpack in prod mode to produce the final Javascript bundle
  • ./go-sync-to-s3.sh – Do this if you’re me, to upload to S3. If you’re not me, you’ll need to do something else, or possibly nothing at all.

Strong Yet Easy To Remember Password Generator, Diceware Plugin/Github


See Demo And Download

Official Website(dmuth): Click Here

This superior jQuery/javascript plugin is developed by dmuth. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.