AES Encryption/Decryption using Web Cryptography API

by Anish

Posted on Sunday september 16, 2018

This sample chapter extracted from the book, Cryptography for JavaScript Developers.

The Crypto interface represents an interface to general purpose cryptographic functionality including a cryptographically strong pseudo-random number generator seeded with truly random values.

The AES Encryption/Decryption Mode

• The AES-CTR algorithm identifier is used to perform encryption and decryption using AES in Counter mode.

• The "AES-CBC" algorithm identifier is used to perform encryption and decryption using AES in Cipher Block Chaining mode

• The "AES-GCM" algorithm identifier is used to perform authenticated encryption and decryption using AES in Galois/Counter Mode mode

• The "AES-KW" algorithm identifier is used to perform key wrapping using AES,

The Demo

AES key is hardcoded in the javascript code.

The importKey method

The SubtleCrypto.importKey() method returns a Promise of the CryptoKey generated from the data given in parameters.

 var result = crypto.subtle.importKey(_format_, keyData, algo, extractable, usages);

The Web Cryptography javascript code

<script type="text/javascript">
    var keyData = hexStringToUint8Array("1bf8be421b201adf247297140aa76cc8211620976125db505d348cd60bee4198");
    var iv = crypto.getRandomValues(new Uint8Array(16));   

     function AES_CTR_encrypt()
        {
            crypto.subtle.importKey("raw", keyData, "aes-ctr", false, ["encrypt"]).then(function(key) {
                var plainText = document.getElementById("plainTextGCM").value;
                return crypto.subtle.encrypt({name: "aes-ctr", counter: iv,length: 128}, key, asciiToUint8Array(plainText));
            }, failAndLog).then(function(cipherText) {
                document.getElementById("cipherTextGCM").value = bytesToHexString(cipherText);
            }, failAndLog);
        }

    function AES_GCM_encrypt()
    {
        crypto.subtle.importKey("raw", keyData, "aes-gcm", false, ["encrypt"]).then(function(key) {
            var plainText = document.getElementById("plainTextGCM").value;
            return crypto.subtle.encrypt({name: "aes-gcm", iv: iv}, key, asciiToUint8Array(plainText));
        }, failAndLog).then(function(cipherText) {
            document.getElementById("cipherTextGCM").value = bytesToHexString(cipherText);
        }, failAndLog);
    }
    function AES_GCM_decrypt()
    {
        crypto.subtle.importKey("raw", keyData, "aes-gcm", false, ["decrypt"]).then(function(key) {
            var cipherText = document.getElementById("cipherTextGCM").value;
            return crypto.subtle.decrypt({name: "aes-gcm", iv: iv}, key, hexStringToUint8Array(cipherText));
        }, failAndLog).then(function(plainText) {
            document.getElementById("resultGCM").innerHTML = "Result: " + bytesToASCIIString(plainText);
        }, function(result) {
            document.getElementById("resultGCM").innerHTML = "Result: " + result;
        });
    }
    function AES_CBC_encrypt()
    {
        crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
            var plainText = document.getElementById("plainTextGCM").value;
            return crypto.subtle.encrypt({name: "aes-cbc", iv: iv}, key, asciiToUint8Array(plainText));
        }, failAndLog).then(function(cipherText) {
            document.getElementById("cipherTextGCM").value = bytesToHexString(cipherText);
        }, failAndLog);
    }

    function AES_CTR_decrypt()
        {
            crypto.subtle.importKey("raw", keyData, "aes-ctr", false, ["decrypt"]).then(function(key) {
                var cipherText = document.getElementById("cipherTextGCM").value;
                return crypto.subtle.decrypt({name: "aes-ctr", counter: iv, length:128}, key, hexStringToUint8Array(cipherText));
            }, failAndLog).then(function(plainText) {
                document.getElementById("resultGCM").innerHTML = "Result: " + bytesToASCIIString(plainText);
            }, function(result) {
                document.getElementById("resultGCM").innerHTML = "Result: " + result;
            });
        }

    function AES_CBC_decrypt()
    {
        crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["decrypt"]).then(function(key) {
            var cipherText = document.getElementById("cipherTextGCM").value;
            return crypto.subtle.decrypt({name: "aes-cbc", iv: iv}, key, hexStringToUint8Array(cipherText));
        }, failAndLog).then(function(plainText) {
            document.getElementById("resultGCM").innerHTML = "Result: " + bytesToASCIIString(plainText);
        }, failAndLog);
    }

The HTML

<div>
        Plain Text: <input type="text" id="plainTextGCM" value="Hello, 8gwifi.org">
        <button type="button" onclick="AES_GCM_encrypt()">encryptGCM</button>
        <button type="button" onclick="AES_CBC_encrypt()">encryptCBC</button>
        <button type="button" onclick="AES_CTR_encrypt()">encryptCTR</button>
    </div>
    <div>
        Cipher Text: <input type="text" id="cipherTextGCM" size="50">
        <button type="button" onclick="AES_GCM_decrypt()">decryptGCM</button>
        <button type="button" onclick="AES_CTR_decrypt()">decryptCTR</button>
    </div>
  
    <div id="resultGCM">
        Result:
    </div>

Thanku for reading !!! Give a Share for Support

Your Support Matters!

Instead of directly asking for donations, I'm thrilled to offer you all nine of my books for just $9 on leanpub By grabbing this bundle you not only help cover my coffee, beer, and Amazon bills but also play a crucial role in advancing and refining this project. Your contribution is indispensable, and I'm genuinely grateful for your involvement in this journey!

Any private key value that you enter or we generate is not stored on this site, this tool is provided via an HTTPS URL to ensure that private keys cannot be stolen, for extra security run this software on your network, no cloud dependency