What is JavaScript AES Encryption?

Javascript Object Oriented Programming Front End Technology

In this article, we are going to learn what is JavaScript AES Encryption.

AES is an algorithm developed for the encryption of data. AES uses the same key to encrypt and decrypt data, called the symmetric encryption algorithm.

AES encryption is Advanced Encryption Standard (AES) to encrypt the data in the application. We use the JavaScript library Forge to perform AES encryption. These algorithms are used in different communication apps such as WhatsApp, Signal, etc.

The third-party user cannot be able to decrypt the message, and when the message is reached the destination receiver endpoint, it is decrypted using the same key as the sender. These keys are provided by the application to both the sender and receiver.

These types of algorithms are used in different communication apps such as WhatsApp, Signal, etc.

Example

Following is the example program to understand AES encryption in JavaScript.


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AES</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js" integrity="sha256-/H4YS+7aYb9kJ5OKhFYPUjSJdrtV6AeyJOtTkw6X72o=" crossorigin="anonymous"></script>
</head>
<body>
    <script>
	  function encrypt() {
         var encrypted = CryptoJS.AES.encrypt(
            document.getElementById("text").value,
            document.getElementById("password").value
         );
         document.getElementById("EncryptedValue").innerHTML = encrypted;
         document.getElementById("decrypted").innerHTML = "";
      }
      function decrypt() {
         var decrypted = CryptoJS.AES.decrypt(
            document.getElementById("EncryptedValue").innerHTML,
            document.getElementById("password").value
         ).toString(CryptoJS.enc.Utf8);
         document.getElementById("decrypted").innerHTML = decrypted;
         document.getElementById("EncryptedValue").innerHTML = "";
      }
   </script>
   <br />Data to encrypt:
   <input id="text" type="text" placeholder="Enter text to encrypt" />
   <br />password: <input id="password" type="text" value="cool" />
   <br /><button onclick="encrypt()">encrypt</button>
   <br />Encrypted Value:<br /><span id="EncryptedValue"></span>
   <br />
   <button onclick="decrypt()">decrypt</button>
   <br />Decrypted Value: <span id="decrypted"></span>
</body>
</html>

We should enter the data in the data to the entry input field and a password is set as default for the communication.

After we click the encrypt button, an encrypted message will be sent to the other user. He uses the same encryption key to decrypt the message.

After clicking the decrypt button, the data entered is decrypted into the data we have entered.

As we see the data we have entered, and the data decrypted are the same.

Hence, safe communication is held between the two different users.

Lokesh Badavath

Updated on: 21-Nov-2022

11K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started