fbc9b91336335914097b335c9ab35beec12a090d
[WebKit-https.git] / 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>