JSFiddle - React, Tailwind, and code Playground

by kspearrin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.3/platform.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.3/benchmark.min.js"></script>
<script src="https://rawgit.com/bitwiseshiftleft/sjcl/master/sjcl.js"></script>
<script src="https://rawgit.com/bitwiseshiftleft/sjcl/master/core/cbc.js"></script>
<script src="https://rawgit.com/bitwiseshiftleft/sjcl/master/core/bitArray.js"></script>
<script src="https://rawgit.com/bitwiseshiftleft/sjcl/master/core/random.js"></script>
<script src="https://rawgit.com/digitalbazaar/forge-dist/master/dist/forge.min.js"></script>
<h1>Crypto Benchmarks</h1>
<button type="button" id="makekey">Make Key (PBKDF2)</button>
<button type="button" id="encrypt">Encrypt (AES-CBC)</button>
<button type="button" id="decrypt">Decrypt (AES-CBC)</button>

CSS

body {
  background-color: #bbbbbb;
  font-family: arial;
  font-size: 14px;
  color: #000000;
}

button {
  padding: 10px;
  display: block;
  margin-bottom: 10px;
}

JavaScript

var iterations = 5000;
var keySize = 256;

sjcl.beware['CBC mode is dangerous because it doesn\'t protect message integrity.']();

// =========================================================
// Precomputed enc values for decrypt benchmarks
// =========================================================

var encIv = 'FX7Y3pYmcLIQt6WrKc62jA==';
var encCt = 'EDlxtzpEOfGIAIa8PkCQmA==';

// =========================================================
// Precomputed keys for benchmarks
// =========================================================

function sjclMakeKey() {
  return sjcl.misc.pbkdf2('mypassword', 'a salt', iterations, keySize, null);
}

var sjclKey = sjclMakeKey();

function forgeMakeKey() {
  return forge.pbkdf2('mypassword', 'a salt', iterations, keySize / 8, 'sha256');
}

var forgeKey = forgeMakeKey();

var webcryptoKey = null;
window.crypto.subtle.importKey(
  'raw', fromUtf8('mypassword'), {
    name: 'PBKDF2'
  },
  false, ['deriveKey', 'deriveBits']
).then(function(importedKey) {
  window.crypto.subtle.deriveKey({
      'name': 'PBKDF2',
      salt: fromUtf8('a salt'),
      iterations: iterations,
      hash: {
        name: 'SHA-256'
      }
    },
    importedKey, {
      name: 'AES-CBC',
      length: keySize
    },
    true, ['encrypt', 'decrypt']
  ).then(function(derivedKey) {
    webcryptoKey = derivedKey;
  });
});

// =========================================================
// IV helpers for encrypt benchmarks so all are using same PRNG methods
// =========================================================

function getRandomSjclBytes() {
  var bytes = new Uint32Array(4);
  return window.crypto.getRandomValues(bytes);
}

function getRandomForgeBytes() {
  var bytes = new Uint8Array(16);
  window.crypto.getRandomValues(bytes);
  return String.fromCharCode.apply(null, bytes);
}

// =========================================================
// Serialization helpers for web crypto
//...