Websites/webkit.org/demos/webcrypto/asynchronous-execution.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style>
   5     .inner
   6     {
   7         display: inline-block;
   8     }
   9     .hidden
  10     {
  11         display: none;
  12     }
  13     .loader {
  14         border: 4px solid #f3f3f3; /* Light grey */
  15         border-top: 4px solid #3498db; /* Blue */
  16         border-radius: 50%;
  17         width: 8px;
  18         height: 8px;
  19         animation: spin 2s linear infinite;
  20         display: inline-block;
  21     }
  22     @keyframes spin {
  23         0% { transform: rotate(0deg); }
  24         100% { transform: rotate(360deg); }
  25     }
  26     </style>
  27     <script type="text/javascript">
  28     function hexStringToUint8Array(hexString)
  29     {
  30         if (hexString.length % 2 != 0)
  31             throw "Invalid hexString";
  32         var arrayBuffer = new Uint8Array(hexString.length / 2);
  33
  34         for (var i = 0; i < hexString.length; i += 2) {
  35             var byteValue = parseInt(hexString.substr(i, 2), 16);
  36             if (byteValue == NaN)
  37                 throw "Invalid hexString";
  38             arrayBuffer[i/2] = byteValue;
  39         }
  40
  41         return arrayBuffer;
  42     }
  43     function failAndLog(error)
  44     {
  45         console.log(error);
  46     }
  47
  48     var plainText = new Uint8Array(104857600); // 100MB
  49     var keyData = hexStringToUint8Array("2b7e151628aed2a6abf7158809cf4f3c2b7e151628aed2a6abf7158809cf4f3c");
  50     var iv = hexStringToUint8Array("000102030405060708090a0b0c0d0e0f");
  51     var times = 10;
  52     function webkitAES_CBC()
  53     {
  54         document.getElementById("webkitAES_CBC").classList.add("hidden");
  55         document.getElementById("webkitAES_CBC_loader").classList.remove("hidden");
  56         document.getElementById("webkitAES_CBC_loader").classList.add("loader");
  57         crypto.webkitSubtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
  58             var array = [ ];
  59             for (var i = 0; i < times; i++)
  60                 array.push(crypto.webkitSubtle.encrypt({name: "aes-cbc", iv: iv}, key, plainText));
  61             Promise.all(array).then(function() {
  62                 document.getElementById("webkitAES_CBC").classList.remove("hidden");
  63                 document.getElementById("webkitAES_CBC_loader").classList.remove("loader");
  64                 document.getElementById("webkitAES_CBC_loader").classList.add("hidden");
  65             }, failAndLog);
  66         }, failAndLog);
  67     }
  68     function AES_CBC()
  69     {
  70         document.getElementById("AES_CBC").classList.add("hidden");
  71         document.getElementById("AES_CBC_loader").classList.remove("hidden");
  72         document.getElementById("AES_CBC_loader").classList.add("loader");
  73         crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
  74             var array = [ ];
  75             for (var i = 0; i < times; i++)
  76                 array.push(crypto.subtle.encrypt({name: "aes-cbc", iv: iv}, key, plainText));
  77             Promise.all(array).then(function() {
  78                 document.getElementById("AES_CBC").classList.remove("hidden");
  79                 document.getElementById("AES_CBC_loader").classList.remove("loader");
  80                 document.getElementById("AES_CBC_loader").classList.add("hidden");
  81             }, failAndLog);
  82         }, failAndLog);
  83     }
  84     function worker()
  85     {
  86         document.getElementById("worker").classList.add("hidden");
  87         document.getElementById("worker_loader").classList.remove("hidden");
  88         document.getElementById("worker_loader").classList.add("loader");
  89         crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
  90             var worker = new Worker("asynchronous-execution-worker.js");
  91             worker.onmessage = function(result) {
  92                 document.getElementById("worker").classList.remove("hidden");
  93                 document.getElementById("worker_loader").classList.remove("loader");
  94                 document.getElementById("worker_loader").classList.add("hidden");
  95             }
  96             worker.postMessage(key);
  97         }, failAndLog);
  98     }
  99     </script>
 100 </head>
 101 <body>
 102     <div>
 103         <h1>Asynchronous executions</h1>
 104         <p>
 105             Click the following buttons to see how asynchronous executions could help to improve responsiveness of a website.
 106             To magnify the effect, a very large file <b>~100MB</b> will be encrypted <b>TEN</b> times. Be aware of your hardware limits.
 107         </p>
 108         <div>
 109             <p>WebKitSubtleCrypto:</p>
 110             <button type="button" onclick="webkitAES_CBC()" class="inner">AES-CBC Encryption</button>
 111             <div id="webkitAES_CBC_loader" class="hidden"></div>
 112             <div id="webkitAES_CBC" class="inner hidden">Done!</div>
 113         </div>
 114         <div>
 115             <p>SubtleCrypto:</p>
 116             <button type="button" onclick="AES_CBC()" class="inner">AES-CBC Encryption</button>
 117             <div id="AES_CBC_loader" class="hidden"></div>
 118             <div id="AES_CBC" class="inner hidden">Done!</div>
 119         </div>
 120         <div>
 121             <p>WebWorkers:</p>
 122             <button type="button" onclick="worker()" class="inner">AES-CBC Encryption</button>
 123             <div id="worker_loader" class="hidden"></div>
 124             <div id="worker" class="inner hidden">Done!</div>
 125         </div>
 126     </div>
 127 </body>
 128 </html>