JSFiddle - React, Tailwind, and code Playground

by johnwun

HTML

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/pbkdf2.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/hmac-sha256.js"></script>
<div id="result"></div>

JavaScript

function encrypt(message, passphrase) {
    
    // generate 256 bit salt 
    var salt = CryptoJS.lib.WordArray.random(256/8);
    
    // generate derived key from passphrase using SHA256, 10 iterations
    var key = CryptoJS.PBKDF2(passphrase, salt, { iterations: 10, hasher:CryptoJS.algo.SHA256});

    // generate 128 bit IV    
    var iv = CryptoJS.lib.WordArray.random(128 / 8);
    
    // key is already in WordArray format, so custom IV accepted    
    var encrypted = CryptoJS.AES.encrypt(message, key, { iv: iv });
    
    // cipher paramaters to be returned. Encoded for storage
    var cp = {};
    
    // encode ciphertext into base46
    cp.ciphertext = CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
    
    // encode salt and iv to string representing hexedecimal
    cp.salt = CryptoJS.enc.Hex.stringify(salt);
    cp.iv = CryptoJS.enc.Hex.stringify(iv);
    
    // generate HMAC     
    key_str = CryptoJS.enc.Hex.stringify(key);
    var HMAC = CryptoJS.HmacSHA256(cp.ciphertext + cp.iv, key_str);
    cp.HMAC = CryptoJS.enc.Hex.stringify(HMAC);
    
    return cp;
}

function decrypt(cp, passphrase) {
    
    // decode iv and salt from string to type WordArray
    var iv = CryptoJS.enc.Hex.parse(cp.iv);
    var salt = CryptoJS.enc.Hex.parse(cp.salt);

    // generate derived key from passphrase using SHA256, 10 iterations
    var key = CryptoJS.PBKDF2(passphrase, salt, { iterations: 10, hasher:CryptoJS.algo.SHA256});
    
    // decode ciphertext from base64 string to WordArray
    ciphertext = CryptoJS.enc.Base64.parse(cp.ciphertext);

    // calculate HMAC
    var key_str = CryptoJS.enc.Hex.stringify(key);
    var HMAC = CryptoJS.HmacSHA256(cp.ciphertext + cp.iv, key_str);
    var HMAC_str = CryptoJS.enc.Hex.stringify(HMAC);    

    // compare HMACs    
    if (HMAC_str != cp.HMAC) {
        return;
    }
    
    var _cp = CryptoJS.lib.CipherParams.create({
                ciphertext: ciphertext
            });
    
    var decrypted =...