Introduction
Advanced Encryption Standard (AES) is a famous and robust encryption method for encrypting data (string, files). Crypto-js is a JavaScript library provided to achieve AES in JavaScript without the help of any other language like Java or C#. Here, we will learn how to encrypt and decrypt the data strings using crypto-js.
Include the crypto-js library in the HTML file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/cryptojs/3.1.2/rollups/aes.js">
</script>
<script>
var enbtn = document.getElementById("encrbtn");
var rawdata = document.getElementById("rawdata");
var password = document.getElementById("password");
var display1 = document.getElementById("display1");
var endata = document.getElementById("endata");
var password2 = document.getElementById("password2");
var display2 = document.getElementById("display2");
var debtn = document.getElementById("debtn");
</script>
First, we are going to encrypt sensitive data with a user-defined password. The data is encrypted with the AES method.
Sensitive Data<input type="text" id="rawdata"/>
Password <input type="text" id="password"/>
Encrypted data:: <span id="display1"></span><br/>
<button type="button" id="encrbtn">Encrypt</button>
<script>
enbtn.addEventListener("click",function(e){
var ciphertext = CryptoJS.AES.encrypt(rawdata.value, password.value);
endata.value = ciphertext.toString();
display1.textContent = ciphertext.toString();
})
</script>
The 'ciphertext' you get back after encryption isn't a string yet. It's a 'CipherParams 'object. A CipherParams object gives you access to all the parameters used during encryption. Using a CipherParams object in a string context automatically converts it to a string according to the format strategy. The default is an OpenSSL-compatible format.
Then, the decrypted data string uses the same password.
Encrypted String<input type="text" id="endata"/>
Password <input type="text" id="password2"/>
Decrypted data:: <span id="display2"></span><br/>
<button type="button" id="debtn">Decrypt</button>
<script>
debtn.addEventListener("click",function(e){
if(password.value != password2.value){
alert('password must same as on encrypted');
return false;
}
var Normaltext = CryptoJS.AES.decrypt(endata.value, password2.value);
display2.textContent = Normaltext.toString(CryptoJS.enc.Utf8);
});
</script>
The 'Normaltext' you get after decryption is a Word Array object.
![]()
Object encryption
Crypto-js also provide the functionality to encrypt and decrypt objects at a deep level.
var data = [{ foo: bar }, { bar: foo}];
var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), 'secret key 123');
var bytes = CryptoJS.AES.decrypt(ciphertext.toString(), 'secret key 123');
var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
Summary
JavaScript is a fast-growing scripting language in browsers, servers (node.js), and databases. So encryption of data using JavaScript is important. Crypto-JS supports AES-128, AES-192, and AES-256. It will pick the variant by the key size you pass in. Crypto-JS also support other Hasher Algorithms, MD, SHA-1, and SHA-2.