JSFiddle - React, Tailwind, and code Playground
by Dan Shahin
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/rollups/md5.js"></script>
<h3>key</h3>
<input type="text" id="key"/>
<br/>
<h3>clear text</h3>
<button id="encrypt" onclick="encrypt();">encrypt</button><br/>
<textarea name="cleartext" id="cleartext" cols="30" rows="10"></textarea><br/>
<h3>cypher text</h3>
<button id="decrypt" onclick="decrypt();">decrypt</button><br/>
<textarea name="message" id="cypher" cols="30" rows="10"></textarea><br/>JavaScript
/* var key = document.getElementById("key").value;
//alert(key);
var encrypted = CryptoJS.AES.encrypt("Message", "Secret Passphrase");
//U2FsdGVkX18ZUVvShFSES21qHsQEqZXMxQ9zgHy+bu0=
var decrypted = CryptoJS.AES.decrypt(encrypted, "Secret Passphrase");
//4d657373616765
document.getElementById("cypher").innerHTML = encrypted;
document.getElementById("cleartext").innerHTML = decrypted;
document.getElementById("demo3").innerHTML = decrypted.toString(CryptoJS.enc.Utf8); */
function encrypt(){
let key = document.getElementById("key").value;
let clearText = document.getElementById("cleartext").value;
var encrypted = CryptoJS.AES.encrypt(clearText, key);
document.getElementById("cypher").innerHTML = encrypted;
}
function decrypt(){
let key = document.getElementById("key").value;
let encrypted = document.getElementById("cypher").value;
var decrypted = CryptoJS.AES.decrypt(encrypted, key).toString(CryptoJS.enc.Utf8);
document.getElementById("cleartext").value = decrypted;
}