Encrypt and Decrypt string in Javascript

In previous article, I have mentioned Convert Image to base64 string using Javascript but in this article, I have mentioned how, we can Encrypt and Decrypt string or text in Javascript to secure text using Crypto JS or without using any external plugin/Library.

Using CryptoJS

To encrypt and then decrypt string or text using Javascript, one of the easiest and secure method is to use CryptoJS library it gives us JavaScript implementations of standard and secure cryptographic algorithms.

They are fast, and they have a consistent and simple interface.

There are multiple algorithms which you can apply to encrypt/decrypt text using CryptoJS, like MD5, SHA-1, SHA-2, SHA-3, AES etc.

We will consider using AES Algorithm example in this article, which is easy and simple to use.

Suppose we have sample HTML as below

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js" integrity="sha256-/H4YS+7aYb9kJ5OKhFYPUjSJdrtV6AeyJOtTkw6X72o=" crossorigin="anonymous"></script>


<label>encrypted</label>
<div id="demo1"></div>
<br>

<label>decrypted</label>
<div id="demo2"></div>

<br>
<label>Actual Message</label>
<div id="demo3">Here is sample Message</div>

Then using CryptoJS, we have javascript for encryption and decryption of string as below

    var encryptedAES = CryptoJS.AES.encrypt(document.getElementById("demo3").innerHTML, "SomeSalt");
    var decryptedBytes = CryptoJS.AES.decrypt(encryptedAES, "SomeSalt");
    var plaintext = decryptedBytes.toString(CryptoJS.enc.Utf8);
    
    document.getElementById("demo1").innerHTML = decryptedBytes;
    document.getElementById("demo2").innerHTML = plaintext;

If you will look at above javascript code, we have this sample configuration or settings for CryptoJS using AES

    var encryptedAES = CryptoJS.AES.encrypt("Message", "My Secret Passphrase");
    var decryptedBytes = CryptoJS.AES.decrypt(encryptedAES, "My Secret Passphrase");
    var plaintext = decryptedBytes.toString(CryptoJS.enc.Utf8);

Sample Fiddle: https://jsfiddle.net/1kd46qaz/

Without using External Library

If you don't like the above method of using External library like CryptoJS, then you can create your own javascript function for encryption and decryption of string, but it would not be as secure as above.

const Encrypt = (salt, text) => {
  const textToChars = (text) => text.split("").map((c) => c.charCodeAt(0));
  const byteHex = (n) => ("0" + Number(n).toString(16)).substr(-2);
  const applySaltToChar = (code) => textToChars(salt).reduce((a, b) => a ^ b, code);

  return text.split("").map(textToChars).map(applySaltToChar).map(byteHex).join("");
};

const decrypt = (salt, encoded) => {
  const textToChars = (text) => text.split("").map((c) => c.charCodeAt(0));
  const applySaltToChar = (code) => textToChars(salt).reduce((a, b) => a ^ b, code);
  return encoded.match(/.{1,2}/g).map((hex) => parseInt(hex, 16)).map(applySaltToChar).map((charCode) => String.fromCharCode(charCode)).join("");
};

// encrypt
const encrypted_text = Encrypt("YourSalt", "HelloWorld"); 
document.getElementById("demo1").innerHTML=encrypted_text;

// decrypt
const decrypted_string = decrypt("YourSalt", encrypted_text); 
document.getElementById("demo2").innerHTML=decrypted_string;

Output:

encrypted
537e7777744c7469777f

decrypted
HelloWorld

Here is the sample Fiddle:https://jsfiddle.net/8zvyfmgd/1/

There are other external library also for encryption of plain text in javascript, but I will suggest you to use CryptoJS or you can use 'sodium-plus'.

You may also like to read:

Convert seconds to hh:mm:ss using Javascript

How to convert iso date to date-format JavaScript?

Toggle Password input field using Javascript (Show/hide password)

Word count using Javascript (jQuery or Pure JS)

Error "TypeError: Cannot read property 'classList' of null"

String to Number (Int) using Javascript

RGB to Hex and Hex to RGB using Javascript