Unreviewed, add a 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 14:25:34 +0000 (14:25 +0000)
committerjiewen_tan@apple.com <jiewen_tan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 20 Jul 2017 14:25:34 +0000 (14:25 +0000)
* demos/webcrypto/asynchronous-execution-worker.js: Added.
* demos/webcrypto/asynchronous-execution.html: Added.

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

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

index f14c616..55bc75c 100644 (file)
@@ -1,3 +1,10 @@
+2017-07-19  Jiewen Tan  <jiewen_tan@apple.com>
+
+        Unreviewed, add a demo page for a WebCrypto API blog post
+
+        * demos/webcrypto/asynchronous-execution-worker.js: Added.
+        * demos/webcrypto/asynchronous-execution.html: Added.
+
 2017-06-30  Jon Lee  <jonlee@apple.com>
 
         Add a WebRTC example for a blog post
diff --git a/Websites/webkit.org/demos/webcrypto/asynchronous-execution-worker.js b/Websites/webkit.org/demos/webcrypto/asynchronous-execution-worker.js
new file mode 100644 (file)
index 0000000..c722aa7
--- /dev/null
@@ -0,0 +1,18 @@
+var aesCbcParams = {
+    name: "aes-cbc",
+    iv: new Uint8Array([0x6a, 0x6e, 0x4f, 0x77, 0x39, 0x39, 0x6f, 0x4f, 0x5a, 0x46, 0x4c, 0x49, 0x45, 0x50, 0x4d, 0x72]),
+}
+var plainText = new Uint8Array(104857600); // 100MB
+var times = 10;
+
+onmessage = function(evt)
+{
+    var key = evt.data;
+
+    var array = [ ];
+    for (var i = 0; i < times; i++)
+        array.push(crypto.subtle.encrypt(aesCbcParams, key, plainText));
+    Promise.all(array).then(function() {
+        postMessage(true);
+    });
+}
diff --git a/Websites/webkit.org/demos/webcrypto/asynchronous-execution.html b/Websites/webkit.org/demos/webcrypto/asynchronous-execution.html
new file mode 100644 (file)
index 0000000..fbc9b91
--- /dev/null
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+    .inner
+    {
+        display: inline-block;
+    }
+    .hidden
+    {
+        display: none;
+    }
+    .loader {
+        border: 4px solid #f3f3f3; /* Light grey */
+        border-top: 4px solid #3498db; /* Blue */
+        border-radius: 50%;
+        width: 8px;
+        height: 8px;
+        animation: spin 2s linear infinite;
+        display: inline-block;
+    }
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    </style>
+    <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");
+    var times = 10;
+    function webkitAES_CBC()
+    {
+        document.getElementById("webkitAES_CBC").classList.add("hidden");
+        document.getElementById("webkitAES_CBC_loader").classList.remove("hidden");
+        document.getElementById("webkitAES_CBC_loader").classList.add("loader");
+        crypto.webkitSubtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
+            var array = [ ];
+            for (var i = 0; i < times; i++)
+                array.push(crypto.webkitSubtle.encrypt({name: "aes-cbc", iv: iv}, key, plainText));
+            Promise.all(array).then(function() {
+                document.getElementById("webkitAES_CBC").classList.remove("hidden");
+                document.getElementById("webkitAES_CBC_loader").classList.remove("loader");
+                document.getElementById("webkitAES_CBC_loader").classList.add("hidden");
+            }, failAndLog);
+        }, failAndLog);
+    }
+    function AES_CBC()
+    {
+        document.getElementById("AES_CBC").classList.add("hidden");
+        document.getElementById("AES_CBC_loader").classList.remove("hidden");
+        document.getElementById("AES_CBC_loader").classList.add("loader");
+        crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
+            var array = [ ];
+            for (var i = 0; i < times; i++)
+                array.push(crypto.subtle.encrypt({name: "aes-cbc", iv: iv}, key, plainText));
+            Promise.all(array).then(function() {
+                document.getElementById("AES_CBC").classList.remove("hidden");
+                document.getElementById("AES_CBC_loader").classList.remove("loader");
+                document.getElementById("AES_CBC_loader").classList.add("hidden");
+            }, failAndLog);
+        }, failAndLog);
+    }
+    function worker()
+    {
+        document.getElementById("worker").classList.add("hidden");
+        document.getElementById("worker_loader").classList.remove("hidden");
+        document.getElementById("worker_loader").classList.add("loader");
+        crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
+            var worker = new Worker("asynchronous-execution-worker.js");
+            worker.onmessage = function(result) {
+                document.getElementById("worker").classList.remove("hidden");
+                document.getElementById("worker_loader").classList.remove("loader");
+                document.getElementById("worker_loader").classList.add("hidden");
+            }
+            worker.postMessage(key);
+        }, failAndLog);
+    }
+    </script>
+</head>
+<body>
+    <div>
+        <h1>Asynchronous executions</h1>
+        <p>
+            Click the following buttons to see how asynchronous executions could help to improve responsiveness of a website.
+            To magnify the effect, a very large file <b>~100MB</b> will be encrypted <b>TEN</b> times. Be aware of your hardware limits.
+        </p>
+        <div>
+            <p>WebKitSubtleCrypto:</p>
+            <button type="button" onclick="webkitAES_CBC()" class="inner">AES-CBC Encryption</button>
+            <div id="webkitAES_CBC_loader" class="hidden"></div>
+            <div id="webkitAES_CBC" class="inner hidden">Done!</div>
+        </div>
+        <div>
+            <p>SubtleCrypto:</p>
+            <button type="button" onclick="AES_CBC()" class="inner">AES-CBC Encryption</button>
+            <div id="AES_CBC_loader" class="hidden"></div>
+            <div id="AES_CBC" class="inner hidden">Done!</div>
+        </div>
+        <div>
+            <p>WebWorkers:</p>
+            <button type="button" onclick="worker()" class="inner">AES-CBC Encryption</button>
+            <div id="worker_loader" class="hidden"></div>
+            <div id="worker" class="inner hidden">Done!</div>
+        </div>
+    </div>
+</body>
+</html>