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.

Plain Text:

Cipher Text:
Result:


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



python Cryptography Topics
Topics
For Coffee/ Beer/ Amazon Bill and further development of the project Support by Purchasing, The Modern Cryptography CookBook for Just $9 Coupon Price

Kubernetes for DevOps

Hello Dockerfile

Cryptography for Python Developers

Cryptography for JavaScript Developers

Go lang ryptography for Developers

Here