Unreviewed, add another demo page for a WebCrypto API blog post
authorjiewen_tan@apple.com <jiewen_tan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 20 Jul 2017 15:46:51 +0000 (15:46 +0000)
committerjiewen_tan@apple.com <jiewen_tan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 20 Jul 2017 15:46:51 +0000 (15:46 +0000)
* demos/webcrypto/aes-gcm.html: Added.
* demos/webcrypto/asynchronous-execution.html:
* demos/webcrypto/common.js: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@219686 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/demos/webcrypto/aes-gcm.html [new file with mode: 0644]
Websites/webkit.org/demos/webcrypto/asynchronous-execution.html
Websites/webkit.org/demos/webcrypto/common.js [new file with mode: 0644]

index 55bc75c..e901a66 100644 (file)
@@ -1,3 +1,11 @@
+2017-07-20  Jiewen Tan  <jiewen_tan@apple.com>
+
+        Unreviewed, add another demo page for a WebCrypto API blog post
+
+        * demos/webcrypto/aes-gcm.html: Added.
+        * demos/webcrypto/asynchronous-execution.html:
+        * demos/webcrypto/common.js: Added.
+
 2017-07-19  Jiewen Tan  <jiewen_tan@apple.com>
 
         Unreviewed, add a demo page for a WebCrypto API blog post
diff --git a/Websites/webkit.org/demos/webcrypto/aes-gcm.html b/Websites/webkit.org/demos/webcrypto/aes-gcm.html
new file mode 100644 (file)
index 0000000..d9cb398
--- /dev/null
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>WebCrypto API Demo: AES-GCM</title>
+    <script type="text/javascript" src="common.js"></script>
+    <script type="text/javascript">
+    var keyData = hexStringToUint8Array("2b7e151628aed2a6abf7158809cf4f3c2b7e151628aed2a6abf7158809cf4f3c");
+    var iv = hexStringToUint8Array("000102030405060708090a0b0c0d0e0f");
+
+    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_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);
+    }
+    </script>
+</head>
+<body>
+    <h1>AES-GCM</h1>
+    <p>Click the corresponding buttons to do AES-CBC/GCM encryption/decryption. In the middle, try modify the cipher text to see how AES-CBC/GCM responds.</p>
+    <div>
+        Plain Text: <input type="text" id="plainTextGCM" value="Hello, World!">
+        <button type="button" onclick="AES_GCM_encrypt()">encryptGCM</button>
+        <button type="button" onclick="AES_CBC_encrypt()">encryptCBC</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_CBC_decrypt()">decryptCBC</button>
+    </div>
+    <div id="resultGCM">
+        Result:
+    </div>
+</body>
+</html>
index fbc9b91..f151cf2 100644 (file)
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <title>WebCrypto API Demo: Asynchronous Execution</title>
     <style>
     .inner
     {
         100% { transform: rotate(360deg); }
     }
     </style>
+    <script type="text/javascript" src="common.js"></script>
     <script type="text/javascript">
-    function hexStringToUint8Array(hexString)
-    {
-        if (hexString.length % 2 != 0)
-            throw "Invalid hexString";
-        var arrayBuffer = new Uint8Array(hexString.length / 2);
-
-        for (var i = 0; i < hexString.length; i += 2) {
-            var byteValue = parseInt(hexString.substr(i, 2), 16);
-            if (byteValue == NaN)
-                throw "Invalid hexString";
-            arrayBuffer[i/2] = byteValue;
-        }
-
-        return arrayBuffer;
-    }
-    function failAndLog(error)
-    {
-        console.log(error);
-    }
-
     var plainText = new Uint8Array(104857600); // 100MB
     var keyData = hexStringToUint8Array("2b7e151628aed2a6abf7158809cf4f3c2b7e151628aed2a6abf7158809cf4f3c");
     var iv = hexStringToUint8Array("000102030405060708090a0b0c0d0e0f");
diff --git a/Websites/webkit.org/demos/webcrypto/common.js b/Websites/webkit.org/demos/webcrypto/common.js
new file mode 100644 (file)
index 0000000..ef70f78
--- /dev/null
@@ -0,0 +1,47 @@
+function hexStringToUint8Array(hexString)
+{
+    if (hexString.length % 2 != 0)
+        throw "Invalid hexString";
+    var arrayBuffer = new Uint8Array(hexString.length / 2);
+
+    for (var i = 0; i < hexString.length; i += 2) {
+        var byteValue = parseInt(hexString.substr(i, 2), 16);
+        if (byteValue == NaN)
+            throw "Invalid hexString";
+        arrayBuffer[i/2] = byteValue;
+    }
+
+    return arrayBuffer;
+}
+function bytesToHexString(bytes)
+{
+    if (!bytes)
+        return null;
+
+    bytes = new Uint8Array(bytes);
+    var hexBytes = [];
+
+    for (var i = 0; i < bytes.length; ++i) {
+        var byteString = bytes[i].toString(16);
+        if (byteString.length < 2)
+            byteString = "0" + byteString;
+        hexBytes.push(byteString);
+    }
+
+    return hexBytes.join("");
+}
+function asciiToUint8Array(str)
+{
+    var chars = [];
+    for (var i = 0; i < str.length; ++i)
+        chars.push(str.charCodeAt(i));
+    return new Uint8Array(chars);
+}
+function bytesToASCIIString(bytes)
+{
+    return String.fromCharCode.apply(null, new Uint8Array(bytes));
+}
+function failAndLog(error)
+{
+    console.log(error);
+}