267

I'm interested in building a small app for personal use that will encrypt and decrypt information on the client side using JavaScript. The encrypted information will be stored in a database on a server, but never the decrypted version.

It doesn't have to be super duper secure, but I would like to use a currently unbroken algorithm.

Ideally I'd be able to do something like

var gibberish = encrypt(string, salt, key);

to generate the encoded string, and something like

var sensical = decrypt(gibberish, key);

to decode it later.

So far I've seen this: http://bitwiseshiftleft.github.io/sjcl/

Any other libraries I should look at?

4
  • 2
    Take a look at Javascript AES encryption
    – Kevin Ji
    Aug 16, 2013 at 17:44
  • 2
    jsfiddle.net/kein1945/M9K2c Aug 16, 2013 at 17:56
  • 18
    Some terminology here is off, Here's a simple version 1. Salts are added to information (usually passwords) being hashed. Their purpose is to make the hash different than it would be without the salt. This is useful because it makes pre-generated of hashes if your database gets hacked and hashed user passwords get out. 2. Hashing is a one-way operation that translates input into output. It cannot be easily reversed or undone. 3. Encoding is not encryption. base64_encode, urlencode, etc.
    – terite
    Aug 16, 2013 at 17:58
  • I struggled to find that nowadays we have something like window.crypto natively. developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt Dec 27, 2022 at 15:58

12 Answers 12

243

 var encrypted = CryptoJS.AES.encrypt("Message", "Secret Passphrase");
//U2FsdGVkX18ZUVvShFSES21qHsQEqZXMxQ9zgHy+bu0=

var decrypted = CryptoJS.AES.decrypt(encrypted, "Secret Passphrase");
//4d657373616765


document.getElementById("demo1").innerHTML = encrypted;
document.getElementById("demo2").innerHTML = decrypted;
document.getElementById("demo3").innerHTML = decrypted.toString(CryptoJS.enc.Utf8);
Full working sample actually is:

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

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

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

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

11
  • 22
    Encrypted is actually an object, but you can call encrypted.toString() to get the string. You will be able to decrypt that string later: jsbin.com/kofiqokoku/1 Jan 8, 2015 at 23:37
  • 22
    But how can we secure the Secret passphrase?
    – duykhoa
    Nov 25, 2015 at 11:09
  • 15
    It seems crypto js is an archived project. There is a clone on github: github.com/sytelus/CryptoJS but it hasn't been updated in two years. Is this still the best option for js encryption?
    – syonip
    Dec 29, 2015 at 21:47
  • 4
    I would go with this one: github.com/brix/crypto-js it is also available via NPM Dec 30, 2015 at 22:26
  • 2
    @stom it is up to you how and where you store it. I don't know if there is truly secure way to store it in a browser. Request them from the server and store in memory. Feb 14, 2019 at 14:31
98

How about CryptoJS?

It's a solid crypto library, with a lot of functionality. It implements hashers, HMAC, PBKDF2 and ciphers. In this case ciphers is what you need. Check out the quick-start quide on the project's homepage.

You could do something like with the AES:

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>

<script>
    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);
</script>

As for security, at the moment of my writing AES algorithm is thought to be unbroken

Edit :

Seems online URL is down & you can use the downloaded files for encryption from below given link & place the respective files in your root folder of the application.

https://code.google.com/archive/p/crypto-js/downloads

or used other CDN like https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/aes-min.js

4
  • What is the difference between rollups and components under folder 3.1.2? Aug 10, 2018 at 9:10
  • After playing a bit the components are the separated parts. You will need to know which components to take (and in what order) to make it work. The rollups files contain everything you need to make it work with just one script reference (much better as the hard job is already done). Oct 23, 2018 at 7:38
  • 2
    But how can we secure the Secret passphrase ?
    – Shaiju T
    Feb 14, 2019 at 14:04
  • 1
    @shaijut You don't. You don't even save it anywhere except in RAM when encrypting/decrypting the plaintext. The passphrase should only be stored in the user's brain (or a password manager)
    – slebetman
    Jan 14, 2020 at 9:42
96

I created an insecure but simple text cipher/decipher utility. No dependencies with any external library.

These are the functions:

const cipher = salt => {
    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 => text.split('')
      .map(textToChars)
      .map(applySaltToChar)
      .map(byteHex)
      .join('');
}
    
const decipher = salt => {
    const textToChars = text => text.split('').map(c => c.charCodeAt(0));
    const applySaltToChar = code => textToChars(salt).reduce((a,b) => a ^ b, code);
    return encoded => encoded.match(/.{1,2}/g)
      .map(hex => parseInt(hex, 16))
      .map(applySaltToChar)
      .map(charCode => String.fromCharCode(charCode))
      .join('');
}

// To create a cipher
const myCipher = cipher('mySecretSalt')

//Then cipher any text:
console.log(myCipher('the secret string'))

//To decipher, you need to create a decipher and use it:
const myDecipher = decipher('mySecretSalt')
console.log(myDecipher("7c606d287b6d6b7a6d7c287b7c7a61666f"))

12
  • 7
    let myDecipher = decipher('CartelSystem') - This salt will decipher the string as well. You don't have to know the exact word 'mySecretSalt'
    – Dror Bar
    May 6, 2019 at 12:21
  • 2
    Yet another post where someone is blindly using let. 😒︎
    – John
    Dec 26, 2019 at 9:58
  • 1
    The length of byteHex should be extended to 4 since the maximum charCode is 2^16 - 1(i.e. 65535), which will be ffff when encoded to base 16. Fix: const byteHex = n => ("000" + Number(n).toString(16)).substr(-4); and return encoded => encoded.match(/.{1,4}/g)
    – Sean C.
    Apr 5, 2020 at 8:11
  • 7
    Isn't this a) super broken and insecure and b) the 'salt' is in fact your 'secret key' as salts are not expected to be private? I think its very dangerous to post code like this without any comments that this fun-code not intended for any real world use. The amount of upvotes is worrisome. crypto.stackexchange.com/questions/11466/…
    – lschmierer
    Apr 21, 2020 at 10:28
  • 2
    Well at least they use sound crypto. What you are doing is basically a Caesar Chipher (applying the same key to every character) en.wikipedia.org/wiki/Caesar_cipher#Breaking_the_cipher Regarding the other answers... I expect it to be obvious that something called a "secret" is expected to be kept secret (by the user)
    – lschmierer
    Apr 24, 2020 at 14:57
53

This code is based on @Jorgeblom's answer above.


@Jorgeblom my man, that's fantastic small crypto lib :D I touch it a bit because I didn't like that I have to assign the salt and to call it again but in general, for my needs is absolutely perfect.

const crypt = (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("");
};

And you use it

// encrypting
const encrypted_text = crypt("salt", "Hello"); // -> 426f666665

// decrypting
const decrypted_string = decrypt("salt", "426f666665"); // -> Hello
8
  • 2
    you did a great job
    – Hamza
    Jan 10, 2022 at 19:19
  • 1
    Thanks, Hamza but as much as I'd like to take credit, @Jorgeblom did the real job :)
    – MetaTron
    Jan 14, 2022 at 20:21
  • 1
    What is the equivalent for PHP?
    – RedoColor
    Feb 5, 2022 at 10:24
  • 1
    Thanks, it's a simple version that uses string only. Pretty useful :D May 12, 2022 at 13:10
  • 1
    Does not work on other characters (like spaces) Sep 6, 2022 at 0:52
30

The existing answers which leverage SJCL, CryptoJS, and/or WebCrypto aren't necessarily wrong but they're not as safe as you might initially suspect. Generally you want to use libsodium. First I'll explain why, then how.

Why Not SJCL, CryptoJS, WebCrypto, etc.?

Short answer: In order for your encryption to actually be secure, these libraries expect you to make too many choices e.g. the block cipher mode (CBC, CTR, GCM; if you can't tell which of the three I just listed is secure to use and under what constraints, you shouldn't be burdened with this sort of choice at all).

Unless your job title is cryptography engineer, the odds are stacked against you implementing it securely.

Why to Avoid CryptoJS?

CryptoJS offers a handful of building blocks and expects you to know how to use them securely. It even defaults to CBC mode (archived).

Why is CBC mode bad?

Read this write-up on AES-CBC vulnerabilities.

Why to Avoid WebCrypto?

WebCrypto is a potluck standard, designed by committee, for purposes that are orthogonal to cryptography engineering. Specifically, WebCrypto was meant to replace Flash, not provide security.

Why to Avoid SJCL?

SJCL's public API and documentation begs users to encrypt data with a human-remembered password. This is rarely, if ever, what you want to do in the real world.

Additionally: Its default PBKDF2 round count is roughly 86 times as small as you want it to be. AES-128-CCM is probably fine.

Out of the three options above, SJCL is the least likely to end in tears. But there are better options available.

Why is Libsodium Better?

You don't need to choose between a menu of cipher modes, hash functions, and other needless options. You'll never risk screwing up your parameters and removing all security from your protocol.

Instead, libsodium just gives you simple options tuned for maximum security and minimalistic APIs.

  • crypto_box() / crypto_box_open() offer authenticated public-key encryption.
    • The algorithm in question combines X25519 (ECDH over Curve25519) and XSalsa20-Poly1305, but you don't need to know (or even care) about that to use it securely
  • crypto_secretbox() / crypto_secretbox_open() offer shared-key authenticated encryption.
    • The algorithm in question is XSalsa20-Poly1305, but you don't need to know/care

Additionally, libsodium has bindings in dozens of popular programming languages, so it's very likely that libsodium will just work when trying to interoperate with another programming stack. Also, libsodium tends to be very fast without sacrificing security.

How to Use Libsodium in JavaScript?

First, you need to decide one thing:

  1. Do you just want to encrypt/decrypt data (and maybe still somehow use the plaintext in database queries securely) and not worry about the details? Or...
  2. Do you need to implement a specific protocol?

If you selected the first option, get CipherSweet.js.

The documentation is available online. EncryptedField is sufficient for most use cases, but the EncryptedRow and EncryptedMultiRows APIs may be easier if you have a lot of distinct fields you want to encrypt.

With CipherSweet, you don't need to even know what a nonce/IV is to use it securely.

Additionally, this handles int/float encryption without leaking facts about the contents through ciphertext size.

Otherwise, you'll want sodium-plus, which is a user-friendly frontend to various libsodium wrappers. Sodium-Plus allows you to write performant, asynchronous, cross-platform code that's easy to audit and reason about.

To install sodium-plus, simply run...

npm install sodium-plus

There is currently no public CDN for browser support. This will change soon. However, you can grab sodium-plus.min.js from the latest Github release if you need it.

const { SodiumPlus } = require('sodium-plus');
let sodium;

(async function () {
    if (!sodium) sodium = await SodiumPlus.auto();
    let plaintext = 'Your message goes here';
    let key = await sodium.crypto_secretbox_keygen();
    let nonce = await sodium.randombytes_buf(24);
    let ciphertext = await sodium.crypto_secretbox(
        plaintext,
        nonce,
        key    
    );
    console.log(ciphertext.toString('hex'));

    let decrypted = await sodium.crypto_secretbox_open(
        ciphertext,
        nonce,
        key
    );

    console.log(decrypted.toString());
})();

The documentation for sodium-plus is available on Github.

If you'd like a step-by-step tutorial, this dev.to article has what you're looking for.

6
  • 27
    whats your relation to sodium projects? Dec 29, 2020 at 12:43
  • it would be good to more sustained argument against WebCrypto - it seems you just linked anonymous comment saying WebCrypto was not designed with security in mind Dec 29, 2020 at 12:45
  • 7
    Downvoting because there is zero indication/acknowledgement he is a maintainer (possibly head) of the project on GitHub (bias)...
    – Kendall
    Oct 9, 2021 at 2:49
  • 1
    @MaciejUrbański I contribute to libsodium, and led the initiative to get it into the PHP standard library. wiki.php.net/rfc/libsodium My relation to sodium is as a) a user, b) an independent security expert that specializes in applied cryptography. Jan 19, 2022 at 8:04
  • 2
    Sodium is too much of a black box and it's documentation is awful. It's ok if the decryptor and encryptor are the same entity but for standardised encryption for transmission it's atrocious.
    – m12lrpv
    Jul 15, 2022 at 6:30
28

Modern browsers now support the crypto.subtle API, which provides native encryption and decryption functions (async no less!) using one of these method: AES-CBC, AES-CTR, AES-GCM, or RSA-OAEP.

https://www.w3.org/TR/WebCryptoAPI/#dfn-Crypto

3
10

crypt.subtle AES-GCM, self-contained, tested:

async function aesGcmEncrypt(plaintext, password)

async function aesGcmDecrypt(ciphertext, password) 

https://gist.github.com/chrisveness/43bcda93af9f646d083fad678071b90a

1
  • 2
    Thanks! Dificult to find simple to use example of using native browser Crypto API. Only restriction is IE11...
    – Pavel
    Feb 14, 2021 at 16:07
8

Before implementying any of this, please see Scott Arciszewski's answer.

I want you to be very careful with what I'm about to share as I have little to no security knowledge (There's a high chance that I'm misusing the API below), so I'd be more than welcome to update this answer with the help of the community.

As @richardtallent mentioned in his answer, there's support for the Web Crypto API, so this example uses the standard. As of this writing, there's a 95.88% of global browser support.

I'm going to be sharing an example using the Web Crypto API

Before we proceed, please note (Quoting from MDN):

This API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle.

Even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to get right and are generally the domain of specialist security experts.

Errors in security system design and implementation can make the security of the system completely ineffective.

If you're not sure you know what you are doing, you probably shouldn't be using this API.

I respect security a lot, and I even bolded additional parts from MDN... You've been warned

Now, to the actual example...


JSFiddle:

Found here: https://jsfiddle.net/superjose/rm4e0gqa/5/

Note:

Note the use of await keywords. Use it inside an async function or use .then() and .catch().

Generate the key:

// https://developer.mozilla.org/en-US/docs/Web/API/CryptoKey
// https://developer.mozilla.org/en-US/docs/Web/API/RsaHashedKeyGenParams
// https://github.com/diafygi/webcrypto-examples#rsa-oaep---generatekey
    const stringToEncrypt = 'https://localhost:3001';
    // https://github.com/diafygi/webcrypto-examples#rsa-oaep---generatekey
    // The resultant publicKey will be used to encrypt
    // and the privateKey will be used to decrypt. 
    // Note: This will generate new keys each time, you must store both of them in order for 
    // you to keep encrypting and decrypting.
    //
    // I warn you that storing them in the localStorage may be a bad idea, and it gets out of the scope
    // of this post. 
    const key = await crypto.subtle.generateKey({
      name: 'RSA-OAEP',
      modulusLength: 4096,
      publicExponent:  new Uint8Array([0x01, 0x00, 0x01]),
      hash: {name: 'SHA-512'},
      
    }, true,
    // This depends a lot on the algorithm used
    // Go to https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto
    // and scroll down to see the table. Since we're using RSA-OAEP we have encrypt and decrypt available
    ['encrypt', 'decrypt']);

    // key will yield a key.publicKey and key.privateKey property.

Encrypt:

    const encryptedUri = await crypto.subtle.encrypt({
      name: 'RSA-OAEP'
    }, key.publicKey, stringToArrayBuffer(stringToEncrypt))
    
    console.log('The encrypted string is', encryptedUri);


Decrypt

   const msg = await  crypto.subtle.decrypt({
      name: 'RSA-OAEP',
    }, key.privateKey, encryptedUri);
    console.log(`Derypted Uri is ${arrayBufferToString(msg)}`)

Converting ArrayBuffer back and forth from String (Done in TypeScript):

  private arrayBufferToString(buff: ArrayBuffer) {
    return String.fromCharCode.apply(null, new Uint16Array(buff) as unknown as number[]);
  }

  private stringToArrayBuffer(str: string) {
    const buff = new ArrayBuffer(str.length*2) // Because there are 2 bytes for each char.
    const buffView = new Uint16Array(buff);
    for(let i = 0, strLen = str.length; i < strLen; i++) {
      buffView[i] = str.charCodeAt(i);
    }
    return buff;
  }

You can find more examples here (I'm not the owner): // https://github.com/diafygi/webcrypto-examples

7

you can use those function it's so easy the First one for encryption so you just call the function and send the text you wanna encrypt it and take the result from encryptWithAES function and send it to decrypt Function like this:

const CryptoJS = require("crypto-js");


   //The Function Below To Encrypt Text
   const encryptWithAES = (text) => {
      const passphrase = "My Secret Passphrase";
      return CryptoJS.AES.encrypt(text, passphrase).toString();
    };
    //The Function Below To Decrypt Text
    const decryptWithAES = (ciphertext) => {
      const passphrase = "My Secret Passphrase";
      const bytes = CryptoJS.AES.decrypt(ciphertext, passphrase);
      const originalText = bytes.toString(CryptoJS.enc.Utf8);
      return originalText;
    };

  let encryptText = encryptWithAES("YAZAN"); 
  //EncryptedText==>  //U2FsdGVkX19GgWeS66m0xxRUVxfpI60uVkWRedyU15I= 

  let decryptText = decryptWithAES(encryptText);
  //decryptText==>  //YAZAN 
4

CryptoJS is no longer supported. If you want to continue using it, you may switch to this url:

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>

2
  • What is the difference between rollups and components under folder 3.1.2? Aug 10, 2018 at 9:09
  • 1
    Crypto is recommending the forge library when you enter their site.
    – Dror Bar
    May 5, 2019 at 12:52
4

UPDATE December 2021

use crypto api provided by MDN Web Docs:

https://developer.mozilla.org/en-US/docs/Web/API/Crypto


Old answer

Use SimpleCrypto

Using encrypt() and decrypt()

To use SimpleCrypto, first create a SimpleCrypto instance with a secret key (password). Secret key parameter MUST be defined when creating a SimpleCrypto instance.

To encrypt and decrypt data, simply use encrypt() and decrypt() function from an instance. This will use AES-CBC encryption algorithm.

var _secretKey = "some-unique-key";
 
var simpleCrypto = new SimpleCrypto(_secretKey);
 
var plainText = "Hello World!";
var chiperText = simpleCrypto.encrypt(plainText);
console.log("Encryption process...");
console.log("Plain Text    : " + plainText);
console.log("Cipher Text   : " + cipherText);
var decipherText = simpleCrypto.decrypt(cipherText);
console.log("... and then decryption...");
console.log("Decipher Text : " + decipherText);
console.log("... done.");
2
  • 5
    SimpleCrypto uses unauthenticated AES-CBC and is therefore vulnerable to chosen-ciphertext attacks. Oct 13, 2019 at 5:43
  • 1
    I struggled to find that nowadays we have something like window.crypto natively. Thanks! Dec 27, 2022 at 15:58
-6

Simple functions:

function Encrypt(value) 
{
  var result="";
  for(i=0;i<value.length;i++)
  {
    if(i<value.length-1)
    {
        result+=value.charCodeAt(i)+10;
        result+="-";
    }
    else
    {
        result+=value.charCodeAt(i)+10;
    }
  }
  return result;
}

function Decrypt(value)
{
  var result="";
  var array = value.split("-");

  for(i=0;i<array.length;i++)
  {
    result+=String.fromCharCode(array[i]-10);
  }
  return result;
} 
4
  • 6
    While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
    – Johan
    Jun 5, 2019 at 10:45
  • 3
    This is not a secure algorithm (note that Encrypt is not taking a key parameter) and can be easily reversed engineered. The OP asked for something that had security on it.
    – Mike S
    Nov 17, 2019 at 0:16
  • This is not exactly encrypting and decrypting. It's more like encoding and decoding...
    – code
    May 20, 2021 at 19:08
  • @MikeS This is javascript... everything is reversible. Dec 26, 2022 at 16:46

Not the answer you're looking for? Browse other questions tagged or ask your own question.