JSFiddle - React, Tailwind, and code Playground

CryptoJS Encryption

by dledle2

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/pad-nopadding-min.js"></script>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

JavaScript

function padString(source) {
    var paddingChar = ' ';
    var size = 16;
    var x = source.length % size;
    var padLength = size - x;
    
    for (var i = 0; i < padLength; i++) source += paddingChar;
    
    return source;
}

var key = CryptoJS.enc.Hex.parse('0123456789abcdef');
var iv  = CryptoJS.enc.Hex.parse('fcccba9876541110');
var message = "soldier";
var padMsg = padString(message);

var encrypted = CryptoJS.AES.encrypt(padMsg, key, { iv: iv, padding: CryptoJS.pad.NoPadding, mode: CryptoJS.mode.CBC});

$('#1').text("Encrypted: "+encrypted);
$('#2').text("Encrypted text: "+encrypted.ciphertext);

/*
Encrypted: VNzZNKJTqfRbM7zO/M4cDQ==
Encrypted text: 54dcd934a253a9f45b33bccefcce1c0d
*/

alert ('press ok to decrypt');

var message = "VNzZNKJTqfRbM7zO/M4cDQ==";
var padMsg = padString(message);
alert ('hi1');

var decrypted = CryptoJS.AES.decrypt(padMsg, key, { iv: iv, padding: CryptoJS.pad.NoPadding, mode: CryptoJS.mode.CBC});

alert ('hi2');
/*
var decrypted = CryptoJS.AES.decrypt(message, key, { format: JsonFormatter }); 
*/
alert ('hi3');
alert(decrypted.toString(CryptoJS.enc.Utf8)); // Message 



/*$('#1').text("Decrypted: "+decrypted);
$('#2').text("Decrypted xxx: "+decrypted.ciphertext);
$('#3').text("Decrypted xxx2: "+decrypted.toString(CryptoJS.enc.Utf8));*/