Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>AES Encryption/Decryption</title>
    <style>
        div { padding: 3px; }
        input { width: 350px; }
        #key { width: 200px; }
        #encText,#decText { 
            color: darkblue; 
            height: 1em;
        }
    </style>
</head>
​
<body>
    <div>
        Key = <input type="text" id="key" value="#The3ncryp7Key">
    </div>
    <div>
        <input type="text" id="plain" value="Hello World!">
        <button onclick="encrypt()">Encrypt</button>
        <div id="encText"></div>
    </div>
    <div>
        <input type="text" id="encrypted" value="QfKvmv2wlAMhqXYM1c5gzLcrf24x+qnMXIwHpNqO4Os=">
        <button onclick="decrypt()">Decrypt</button>
        <div id="decText"></div>
    </div>
    <script>
        if (!window.crypto?.subtle) {
            alert("Your browser is unsupported!");
        }
        async function createCryptoKey(key, keyUsage ) {
            const hashBuffer = await window.crypto.subtle.digest("SHA-256",  new TextEncoder().encode(key));
            // split the sha256 hash byte array into key and iv
            let keyPart = new Uint8Array(hashBuffer.slice(0, 16));
            let ivPart = new Uint8Array(hashBuffer.slice(16));
            // create a CryptoKey object from the key byte array
            const cryptoKey = await window.crypto.subtle.importKey(
                "raw", // format
                keyPart, // key data (as a Uint8Array)
                { name: "AES-CBC" }, // algorithm
                false, // not extractable
                [keyUsage] 
            );
            // return CryptoKey and IV
            return { cryptoKey, ivPart };
        }
        async function encryptData(enc, key) {
            const { cryptoKey, ivPart } = await createCryptoKey(key, "encrypt");
            const data = new TextEncoder().encode(enc);
            const encryptedBytes = await window.crypto.subtle.encrypt(
                { name: "AES-CBC", iv: ivPart },
                cryptoKey,
                data
            );
            const encrypted = btoa(String.fromCharCode(...new Uint8Array(encryptedBytes)));
            return encrypted;
        }
        async function decryptData(data, key) {
            const { cryptoKey, ivPart } = await createCryptoKey(key, "decrypt");
            // Convert the base64-encoded data to a Uint8Array
            const dataBytes = new Uint8Array(atob(data).split("").map(c => c.charCodeAt(0)));
            // Decrypt the data using the CryptoKey object
            const decryptedBytes = await window.crypto.subtle.decrypt(
                { name: "AES-CBC", iv: ivPart },
                cryptoKey,
                dataBytes
            );
            return new TextDecoder().decode(decryptedBytes);
        }
        function encrypt() {
            const plain = document.querySelector("#plain").value;
            const key = document.querySelector("#key").value;
            encryptData(plain, key).then((result) => {
                document.querySelector("#encrypted").value = result;
                document.querySelector("#encText").textContent = result;
            }, (err) => {
                console.log(err);
            });
        }
        function decrypt() {
            const encrypted = document.querySelector("#encrypted").value;
            const key = document.querySelector("#key").value;
            decryptData(encrypted, key).then((result) => {
                document.querySelector("#decText").textContent = result;
            }).catch((err) => {
                alert(err.message);
            });
        }
​
    </script>
</body>
​
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
darkthreadpro
0viewers