JSFiddle - React, Tailwind, and code Playground

CryptoJS - AES v18 Encryption Decryption Example using Crypto JS AES Method

by dledle2

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady.min.js"></script>
<!- These Keys Length Must be 16 chars long ->
	<input id="passphrase" placeholder="Passphrase" value="SOME-PASSPHRASE-" disabled />
	<input id="ivkey" placeholder="IV Key" value="SOME-IV-KEY-HERE" disabled />
	<br />
	<br />
	<input id="input-encryption" /><button id="btn-encrypt">Encrypt</button>
	<br /> Encrypted: <i id="encrypted-output"></i> 
	<br /> Encrypted + Encoded: <i id="encrypted-output-decoded"></i>
	<br />
	<br />
	<!-- input id="input-decryption" / --><button id="btn-decrypt">Decrypt Encoded String</button>
	<br />
	<i id="decrypted-output"></i>

CSS

i{color: red; text-shadow: 1px 1px 1px #CCC;}

JavaScript

$( document ).ready( initSecurity );

/*
$( window ).on( "load", initSecurity );

$( document ).ready( alert('hi2') );
*/

(function(CryptoJS){
		var utils = {
			getElm: function(elm){
				return document.getElementById(elm);
			},
			decryptedToString : function (decrypted) {
				var chars = [],
				decryptedArr = decrypted.toString().split('');
				while (decryptedArr.length !== 0) {
					chars.push(String.fromCharCode(parseInt(decryptedArr.splice(0, 2).join(''), 16)));
				}
				return chars.join('');
			},
			encrypt: function(inputString, passphrase){
				var key = CryptoJS.enc.Utf8.parse(passphrase);
				var ivkey = CryptoJS.enc.Utf8.parse($elms.ivkey.value);
				return CryptoJS.AES.encrypt(inputString, key,  
                {  
                    keySize: 128 / 8,  
                    iv: ivkey,  
                    mode: CryptoJS.mode.CBC,  
                    padding: CryptoJS.pad.Pkcs7  
                });
			},
			decrypt: function(encryptedString, passphrase){
				var key = CryptoJS.enc.Utf8.parse(passphrase);
				var ivkey = CryptoJS.enc.Utf8.parse($elms.ivkey.value);
				var decripted = CryptoJS.AES.decrypt(encryptedString, key,  
                {  
                    keySize: 128 / 8,  
                    iv: ivkey,  
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7  
                });

				return utils.decryptedToString(decripted);
			}
		};

		// Elements
		var $elms = {
			passphrase: utils.getElm("passphrase"),
			ivkey: utils.getElm("ivkey"),
			btnEncrypt: utils.getElm("btn-encrypt"),
			btnDecrypt: utils.getElm("btn-decrypt"),
			inputEncrypt: utils.getElm("input-encryption"),
			inputDecrypt: utils.getElm("input-decryption"),
			encrypted: utils.getElm("encrypted-output"),
			decrypted: utils.getElm("decrypted-output"),
			encryptedEncoded: utils.getElm("encrypted-output-decoded")
		};

		// Event Bindings
		$elms.btnEncrypt.onclick = function(){
    alert('encrypt clicked');
			var...