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>

---

---

Next Reading Perform AES-GCM Encryption Using generateKey Method

---

Download the sample code here

---

Thanku for reading !!! Give a Share for Support

Asking for donation sound bad to me, so i'm raising fund from by offering all my Nine book for just $9

---

---