Diff
Modified: trunk/Websites/webkit.org/ChangeLog (219681 => 219682)
--- trunk/Websites/webkit.org/ChangeLog 2017-07-20 13:07:01 UTC (rev 219681)
+++ trunk/Websites/webkit.org/ChangeLog 2017-07-20 14:25:34 UTC (rev 219682)
@@ -1,3 +1,10 @@
+2017-07-19 Jiewen Tan <jiewen_...@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 <jon...@apple.com>
Add a WebRTC example for a blog post
Added: trunk/Websites/webkit.org/demos/webcrypto/asynchronous-execution-worker.js (0 => 219682)
--- trunk/Websites/webkit.org/demos/webcrypto/asynchronous-execution-worker.js (rev 0)
+++ trunk/Websites/webkit.org/demos/webcrypto/asynchronous-execution-worker.js 2017-07-20 14:25:34 UTC (rev 219682)
@@ -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);
+ });
+}
Added: trunk/Websites/webkit.org/demos/webcrypto/asynchronous-execution.html (0 => 219682)
--- trunk/Websites/webkit.org/demos/webcrypto/asynchronous-execution.html (rev 0)
+++ trunk/Websites/webkit.org/demos/webcrypto/asynchronous-execution.html 2017-07-20 14:25:34 UTC (rev 219682)
@@ -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>
