124 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			124 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<html>
 | 
						|
 | 
						|
<head>
 | 
						|
  <title>BlueCrypt</title>
 | 
						|
  <style>
 | 
						|
    textarea {
 | 
						|
      width: 42em;
 | 
						|
      height: 10em;
 | 
						|
    }
 | 
						|
      /* need to word wrap the binary no space der */
 | 
						|
      .js-der-public, .js-der-private{
 | 
						|
        white-space: pre-wrap;      /* CSS3 */
 | 
						|
        white-space: -moz-pre-wrap; /* Firefox */
 | 
						|
        white-space: -pre-wrap;     /* Opera <7 */
 | 
						|
        white-space: -o-pre-wrap;   /* Opera 7 */
 | 
						|
        word-wrap: break-word;      /* IE */
 | 
						|
      }
 | 
						|
  </style>
 | 
						|
</head>
 | 
						|
<body>
 | 
						|
  <h1>BlueCrypt for the Browser</h1>
 | 
						|
  <p>BlueCrypt is universal crypto for the browser. It's lightweight, fast, and based on native webcrypto.
 | 
						|
    This means it's easy-to-use crypto in kilobytes, not megabytes.</p>
 | 
						|
 | 
						|
  <h2>Keypair Generation</h2>
 | 
						|
  <form class="js-keygen">
 | 
						|
    <p>Key Type:</p>
 | 
						|
    <div>
 | 
						|
        <input type="radio" id="-ktyEC"
 | 
						|
         name="kty" value="EC" checked>
 | 
						|
        <label for="-ktyEC">ECDSA</label>
 | 
						|
        <input type="radio" id="-ktyRSA"
 | 
						|
         name="kty" value="RSA">
 | 
						|
        <label for="-ktyRSA">RSA</label>
 | 
						|
      </div>
 | 
						|
      <div class="js-ec-opts">
 | 
						|
        <p>EC Options:</p>
 | 
						|
        <label for="-crv2"><input type="radio" id="-crv2"
 | 
						|
         name="ec-crv" value="P-256" checked>P-256</label>
 | 
						|
        <label for="-crv3"><input type="radio" id="-crv3"
 | 
						|
         name="ec-crv" value="P-384">P-384</label>
 | 
						|
        <!-- label for="-crv5"><input type="radio" id="-crv5"
 | 
						|
         name="ec-crv" value="P-521">P-521</label -->
 | 
						|
      </div>
 | 
						|
      <div class="js-rsa-opts" hidden>
 | 
						|
        <p>RSA Options:</p>
 | 
						|
        <label for="-modlen2"><input type="radio" id="-modlen2"
 | 
						|
         name="rsa-len" value="2048" checked>2048</label>
 | 
						|
        <label for="-modlen3"><input type="radio" id="-modlen3"
 | 
						|
         name="rsa-len" value="3072">3072</label>
 | 
						|
        <label for="-modlen5"><input type="radio" id="-modlen5"
 | 
						|
         name="rsa-len" value="4096">4096</label>
 | 
						|
      </div>
 | 
						|
    <button class="js-generate" hidden>Generate</button>
 | 
						|
  </form>
 | 
						|
 | 
						|
  <div class="js-loading" hidden>Loading</div>
 | 
						|
 | 
						|
  <details class="js-toc-jwk" hidden>
 | 
						|
    <summary>JWK Keypair</summary>
 | 
						|
    <pre><code class="js-jwk"> </code></pre>
 | 
						|
  </details>
 | 
						|
  <details class="js-toc-der-private" hidden>
 | 
						|
    <summary>DER Private Binary</summary>
 | 
						|
    <pre><code class="js-der-private"> </code></pre>
 | 
						|
  </details>
 | 
						|
  <details class="js-toc-der-public" hidden>
 | 
						|
    <summary>DER Public Binary</summary>
 | 
						|
    <pre><code class="js-der-public"> </code></pre>
 | 
						|
  </details>
 | 
						|
  <details class="js-toc-pem js-toc-pem-pkcs1-private" hidden>
 | 
						|
    <summary>PEM Private (base64-encoded PKCS1 DER)</summary>
 | 
						|
    <pre><code  class="js-input-pem-pkcs1-private" ></code></pre>
 | 
						|
  </details>
 | 
						|
  <details class="js-toc-pem js-toc-pem-sec1-private" hidden>
 | 
						|
    <summary>PEM Private (base64-encoded SEC1 DER)</summary>
 | 
						|
    <pre><code  class="js-input-pem-sec1-private" ></code></pre>
 | 
						|
  </details>
 | 
						|
  <details class="js-toc-pem js-toc-pem-pkcs8-private" hidden>
 | 
						|
    <summary>PEM Private (base64-encoded PKCS8 DER)</summary>
 | 
						|
    <pre><code  class="js-input-pem-pkcs8-private" ></code></pre>
 | 
						|
  </details>
 | 
						|
  <details class="js-toc-pem js-toc-pem-pkcs1-public" hidden>
 | 
						|
    <summary>PEM Public (base64-encoded PKCS1 DER)</summary>
 | 
						|
    <pre><code  class="js-input-pem-pkcs1-public" ></code></pre>
 | 
						|
  </details>
 | 
						|
  <details class="js-toc-pem js-toc-pem-spki-public" hidden>
 | 
						|
    <summary>PEM Public (base64-encoded SPKI/PKIX DER)</summary>
 | 
						|
    <pre><code  class="js-input-pem-spki-public" ></code></pre>
 | 
						|
  </details>
 | 
						|
 | 
						|
  <h2>Signing</h2>
 | 
						|
  <div class="errors" id="sign-error"></div>
 | 
						|
  <form class="js-keysign">
 | 
						|
    <div>
 | 
						|
      <label for="pem">Pem</label>
 | 
						|
      <br>
 | 
						|
      <textarea id="pem" name="pem"></textarea>
 | 
						|
    </div>
 | 
						|
    <button class="js-sign" hidden>Sign</button>
 | 
						|
  </form>
 | 
						|
  <div class="js-jws-opts" hidden>
 | 
						|
    <details class="js-toc-jws">
 | 
						|
      <summary>JWS </summary>
 | 
						|
      <pre><code class="js-jws" ></code></pre>
 | 
						|
    </details>
 | 
						|
  </div>
 | 
						|
  <div class="js-jwt-opts" hidden>
 | 
						|
    <details class="js-toc-jwt">
 | 
						|
      <summary>JWS </summary>
 | 
						|
      <pre><code class="js-jwt" ></code></pre>
 | 
						|
    </details>
 | 
						|
  </div>
 | 
						|
 | 
						|
  <script src="./lib/bluecrypt-encoding.js"></script>
 | 
						|
  <script src="./lib/asn1-packer.js"></script>
 | 
						|
  <script src="./lib/x509.js"></script>
 | 
						|
  <script src="./lib/ecdsa.js"></script>
 | 
						|
  <script src="./lib/rsa.js"></script>
 | 
						|
  <script src="./lib/keypairs.js"></script>
 | 
						|
  <script src="./app.js"></script>
 | 
						|
</body>
 | 
						|
</html>
 |