Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/flatly/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <h1>One Time Pad (OTP)</h1>
    <h3>Adapted from <i>Perfect EnCryption - Old Style!</i>, by Cliff. Published in <i>2600</i> (Summer, 2013 - 30:2)</h3>
    <p>This is a brief description of an unbreakable encryption method. It is used between two people who share the same key, called a one time pad (OTP), which is a string of randomly-generated numbers. We will use ten-sided dice for true randomness because even extremely fancy computers aren't perfect at creating these. Each digit in the pad is used only once- the lack of repetition makes the key more secure. The only weakness of this method is if an attacker gets her hands on the key.</p>
    <p>This is just one example of a way to create a one time pad. The encoding process is clever and simplifies the encryption process. This method is lifted entirely from <i>Perfect Encryption - Old Style!</i> by Cliff.</p>
    <p>Before moving on, there are a few terms you may need to know:</p>
    <dl>
      <dt><a href="https://en.wikipedia.org/wiki/Plaintext" target="_blank">plain text or clear text</a></dt>
      <dd>the normal message that you intend to send - written in plain English and readable by anyone</dd>
      <dt><a href="https://en.wikipedia.org/wiki/Ciphertext" target="_blank">ciphertext</a></dt>
      <dd>the encrypted version of your message that is only readable by someone who has the encryption key</dd>
      <dt><a href="https://en.wikipedia.org/wiki/Key_(cryptography)" target="_blank">key</a></dt>
      <dd>the code that allows you to encrypt and decrypt your messages- both the sender and receiver of the message need to have copies of the same key when using a OTP</dd>
      <dt><a href="https://en.wikipedia.org/wiki/Cryptanalysis" target="_blank">attacker</a></dt>
      <dd>anyone trying to decrypt your message without the key</dd>
      <dt><a href="https://en.wikipedia.org/wiki/Cryptanalysis" target="_blank">cracking</a></dt>
      <dd>figuring out a way to decrypt a message without the key - e.g. sometimes if an attacker gets their hands on an encrypted message and its corresponding plaintext, they can figure out how to decrypt other messages that use the same encryption</dd>
      <dt><a href="https://en.wikipedia.org/wiki/One-time_pad#Perfect_secrecy" target="_blank">perfect secrecy</a></dt>
      <dd>when an encrypted message gives no information about the original message - one time pads offer perfect secrecy! A OTP is uncrackable even for someone with unlimited computational power.</dd>
    </dl>
    <h2>Assign values to letters</h2>
    <h3>Straddling Checkerboard</h3>
    <p>The 'straddling checkerboard' allows you to encode the plaintext message before you encrypt it. This makes the encryption process easier and offers an extra layer of security. The checkerboard uses the most common letters in the English language as the first line (which spells out  three words to make it easier to memorize: 'at one sir'). The remaining letters of the alphabet are entered in the next two lines in alphabetical order. Since there are two spaces between the three words (columns 2 and 6), the second and third lines of the checkerboard are assigned those values. Thus, each letter is given a coordinate (e.g. Q = 6:1, or 61; H = 2:5 or 25; and T = 1). The structure of the checkerboard makes it easy to decrypt later- as we'll soon see.</p>
    
    <table class="table table-striped table-hover center">
      <tbody>
        <tr class="info">
          <td>&nbsp;</td>
          <td>0</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
        <tr class="danger">
          <td>&nbsp;</td>
          <td>A</td>
          <td>T</td>
          <td>-</td>
          <td>O</td>
          <td>N</td>
          <td>E</td>
          <td>-</td>
          <td>S</td>
          <td>I</td>
          <td>R</td>
        </tr>
        <tr class="danger">
          <td>2</td>
          <td>B</td>
          <td>C</td>
          <td>D</td>
          <td>F</td>
          <td>G</td>
          <td>H</td>
          <td>J</td>
          <td>K</td>
          <td>L</td>
          <td>M</td>
        </tr>
        <tr class="danger">
          <td>6</td>
          <td>P</td>
          <td>Q</td>
          <td>U</td>
          <td>V</td>
          <td>W</td>
          <td>X</td>
          <td>Y</td>
          <td>Z</td>
          <td>.</td>
          <td>#</td>
        </tr>
      </tbody>
    </table> 
    <h2>Encode 'computer hacker' as:</h2>
<pre>21 3 29 60 62 1 5 9 25 0 21 27 5 9</pre>
    <h2>Remove the spaces and group for readability:</h2>
<pre>21329 60621 59250 21275 9</pre>
​
<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">Side note- numbers:</h3>
  </div>
  <div class="panel-body">
    Use '#' (69) to signify the beginning and end of a number and repeat each digit three times. 2600 would be encoded as:
    <pre>69222 66600 00006 9</pre>
  </div>
</div>
    <h2>Create a one time pad (random set of values):</h2>
    <p>This is where you'll break out the 10-sided dice you have laying around...</p>
<pre>51187 69890 33159 87236 25955 46669</pre>
  </div>
    
  <div class="container">
    <h2>Encryption Process:</h2>
    <p>Grab your encoded message and your key and follow the rules below to encrypt the message.</p>
    <h3>Basic rules</h3>
    <ol>
      <li>Subtract the key from the encoded message (cleartext)</li>
      <li>Carry the one for subtraction- 2 - 8 becomes 4 (12 - 8 = 4).</li>
    </ol>
  </div>
    
  <div class="container">
    <table class="hover">
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <tbody>
        <tr>
          <td class="skip">Encoded plain text:</td>
          <td>2</td>
          <td>1</td>
          <td>3</td>
          <td>2</td>
          <td>9</td>
          <td class="skip"></td>
          <td>6</td>
          <td>0</td>
          <td>6</td>
          <td>2</td>
          <td>1</td>
          <td class="skip"></td>
          <td>5</td>
          <td>9</td>
          <td>2</td>
          <td>5</td>
          <td>0</td>
          <td class="skip"></td>
          <td>2</td>
          <td>1</td>
          <td>2</td>
          <td>7</td>
          <td>5</td>
          <td class="skip"></td>
          <td>9</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
        </tr>
        <tr>
          <td class="skip"></td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td class="skip"></td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td class="skip"></td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td class="skip"></td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td class="skip"></td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
        </tr>
        <tr>
          <td class="skip">OTP:</td>
          <td>5</td>
          <td>1</td>
          <td>1</td>
          <td>8</td>
          <td>7</td>
          <td class="skip"></td>
          <td>6</td>
          <td>9</td>
          <td>8</td>
          <td>9</td>
          <td>0</td>
          <td class="skip"></td>
          <td>3</td>
          <td>4</td>
          <td>1</td>
          <td>5</td>
          <td>9</td>
          <td class="skip"></td>
          <td>8</td>
          <td>7</td>
          <td>2</td>
          <td>3</td>
          <td>6</td>
          <td class="skip"></td>
          <td>2</td>
          <td>5</td>
          <td>9</td>
          <td>5</td>
          <td>5</td>
        </tr>
        <tr class="total">
          <td class="skip">Ciphertext:</td>
          <td>7</td>
          <td>0</td>
          <td>2</td>
          <td>4</td>
          <td>2</td>
          <td class="skip"></td>
          <td>0</td>
          <td>1</td>
          <td>8</td>
          <td>3</td>
          <td>1</td>
          <td class="skip"></td>
          <td>2</td>
          <td>5</td>
          <td>1</td>
          <td>0</td>
          <td>1</td>
          <td class="skip"></td>
          <td>4</td>
          <td>4</td>
          <td>0</td>
          <td>4</td>
          <td>9</td>
          <td class="skip"></td>
          <td>7</td>
          <td>5</td>
          <td>1</td>
          <td>5</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <div class="container">
    <h2>OTP Strength</h2>
    <p>The encrypted text can now be shared openly- only the two people who have the OTP keys can make the ciphertext readable. Even if an attacker were to get their hands on the decrypted text, the encrypted text, and even the key for that message- future messages are secure. Since the numbers are generated at random (and do not repeat), there is no way to use ciphertext, known-plaintext, chosen-plaintext or adaptive-chosen-plaintext attacks. The only way to break this system is to get the entire OPT key. The only way to mess up the method itself is to not use actually random numbers.</p>
  </div>
  
  <div class="container">
    <h2>Decryption Process:</h2>
    <h3>Basic rules</h3>
    <ol>
      <li>Add the key to the ciphertext</li>
      <li>Do not carry- 7 + 7 becomes 4 (drop the 1).</li>
    </ol>
  </div>
    
  <div class="container">
    <table class="hover2">
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <colgroup></colgroup>
      <tbody>
        <tr>
          <td class="skip">Ciphertext:</td>
          <td>7</td>
          <td>0</td>
          <td>2</td>
          <td>4</td>
          <td>2</td>
          <td class="skip"></td>
          <td>0</td>
          <td>1</td>
          <td>8</td>
          <td>3</td>
          <td>1</td>
          <td class="skip"></td>
          <td>2</td>
          <td>5</td>
          <td>1</td>
          <td>0</td>
          <td>1</td>
          <td class="skip"></td>
          <td>4</td>
          <td>4</td>
          <td>0</td>
          <td>4</td>
          <td>9</td>
          <td class="skip"></td>
          <td>7</td>
          <td>5</td>
          <td>1</td>
          <td>5</td>
          <td>5</td>
        </tr>
        <tr>
          <td class="skip"></td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td class="skip"></td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td class="skip"></td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td class="skip"></td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td class="skip"></td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
          <td>+</td>
        </tr>
        <tr>
          <td class="skip">OTP:</td>
          <td>5</td>
          <td>1</td>
          <td>1</td>
          <td>8</td>
          <td>7</td>
          <td class="skip"></td>
          <td>6</td>
          <td>9</td>
          <td>8</td>
          <td>9</td>
          <td>0</td>
          <td class="skip"></td>
          <td>3</td>
          <td>4</td>
          <td>1</td>
          <td>5</td>
          <td>9</td>
          <td class="skip"></td>
          <td>8</td>
          <td>7</td>
          <td>2</td>
          <td>3</td>
          <td>6</td>
          <td class="skip"></td>
          <td>2</td>
          <td>5</td>
          <td>9</td>
          <td>5</td>
          <td>5</td>
        </tr>
        <tr class="total">
          <td class="skip">Encoded plain text:</td>
          <td>2</td>
          <td>1</td>
          <td>3</td>
          <td>2</td>
          <td>9</td>
          <td class="skip"></td>
          <td>6</td>
          <td>0</td>
          <td>6</td>
          <td>2</td>
          <td>1</td>
          <td class="skip"></td>
          <td>5</td>
          <td>9</td>
          <td>2</td>
          <td>5</td>
          <td>0</td>
          <td class="skip"></td>
          <td>2</td>
          <td>1</td>
          <td>2</td>
          <td>7</td>
          <td>5</td>
          <td class="skip"></td>
          <td>9</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <div class="container">
    <h2>Decoding the plain text:</h2>
    <h3>The checkerboard only allows for certain numbers to exist- break up the encoded string following these rules: </h3>
    <ol>
      <li>Numbers are only one or two-digit</li>
      <li>Two-digit numbers can only start with 2 or 6</li>
      <li>If a number starts with 2 or 6, it is double-digit</li>
      <li>If a number doesn't start with 2 or 6, it is single-digit</li>
    </ol>
<pre>21329 60621 59250 21275 9</pre>
    <h3>Thus we get our encoded message:</h3>
    <pre>21 3 29 60 62 1 5 9 25 0 21 27 5 9</pre>
    <h3>Which decodes to:</h3>
    <pre>COMPUTERHACKER</pre>
    <h3>Figure out the spaces on your own!</h3>
    <br>
    
    <h2>What else can you encrypt?</h2>
    <h3>Try some of the following:</h3>
    <ul>
      <li>Encrypt a short message with some numbers: "Call Bob at 707 555 5555"</li>
      <li>Encrypt a long message - how much harder is it to get the spaces right?</li>
      <li>Share a message with a buddy! It's more fun when you have someone else to send your encoded messages to.</li>
    </ul>
  </div>
  
</body>
  
</html>
 
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);
​
body {
  background: #eaeaea;
}
​
h1 {
  font-family: oswald;
  font-size: 5em;
  text-align: center;
}
​
h3 {
  color: #333;
}
​
.container {
  background: #fff;
}
​
pre {
  font-size: 2em;
}
​
td {
  text-align: center;
  border: 1px solid #fff !important;
}
​
table {
  font-size: 2.5rem;
}
​
.highlight { 
  background-color: rgba(241, 196, 15,0.7); 
  color: #fff; 
}
​
.highlight2 { 
  background-color: rgba(39, 174, 96,0.7);
  color: #fff; 
}
​
td, th {
    padding: 10px;
}
.total {
    border: 2px solid #333 !important;
}
​
.skip {
    background: #fff;
}
​
.center {
  text-align: center;
}
​
.panel {
  max-width: 90%;
  margin: 0 auto;
}
​
.panel pre {
  font-size: 1.5rem;
}
​
a{
  color: rgba(52, 152, 219,1.0);
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sometimesmotionpro
0viewers