Unreviewed, add another demo page for a WebCrypto API blog post
[WebKit-https.git] / Websites / webkit.org / demos / webcrypto / aes-gcm.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title>WebCrypto API Demo: AES-GCM</title>
6     <script type="text/javascript" src="common.js"></script>
7     <script type="text/javascript">
8     var keyData = hexStringToUint8Array("2b7e151628aed2a6abf7158809cf4f3c2b7e151628aed2a6abf7158809cf4f3c");
9     var iv = hexStringToUint8Array("000102030405060708090a0b0c0d0e0f");
10
11     function AES_GCM_encrypt()
12     {
13         crypto.subtle.importKey("raw", keyData, "aes-gcm", false, ["encrypt"]).then(function(key) {
14             var plainText = document.getElementById("plainTextGCM").value;
15             return crypto.subtle.encrypt({name: "aes-gcm", iv: iv}, key, asciiToUint8Array(plainText));
16         }, failAndLog).then(function(cipherText) {
17             document.getElementById("cipherTextGCM").value = bytesToHexString(cipherText);
18         }, failAndLog);
19     }
20     function AES_GCM_decrypt()
21     {
22         crypto.subtle.importKey("raw", keyData, "aes-gcm", false, ["decrypt"]).then(function(key) {
23             var cipherText = document.getElementById("cipherTextGCM").value;
24             return crypto.subtle.decrypt({name: "aes-gcm", iv: iv}, key, hexStringToUint8Array(cipherText));
25         }, failAndLog).then(function(plainText) {
26             document.getElementById("resultGCM").innerHTML = "Result: " + bytesToASCIIString(plainText);
27         }, function(result) {
28             document.getElementById("resultGCM").innerHTML = "Result: " + result;
29         });
30     }
31     function AES_CBC_encrypt()
32     {
33         crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
34             var plainText = document.getElementById("plainTextGCM").value;
35             return crypto.subtle.encrypt({name: "aes-cbc", iv: iv}, key, asciiToUint8Array(plainText));
36         }, failAndLog).then(function(cipherText) {
37             document.getElementById("cipherTextGCM").value = bytesToHexString(cipherText);
38         }, failAndLog);
39     }
40     function AES_CBC_decrypt()
41     {
42         crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["decrypt"]).then(function(key) {
43             var cipherText = document.getElementById("cipherTextGCM").value;
44             return crypto.subtle.decrypt({name: "aes-cbc", iv: iv}, key, hexStringToUint8Array(cipherText));
45         }, failAndLog).then(function(plainText) {
46             document.getElementById("resultGCM").innerHTML = "Result: " + bytesToASCIIString(plainText);
47         }, failAndLog);
48     }
49     </script>
50 </head>
51 <body>
52     <h1>AES-GCM</h1>
53     <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>
54     <div>
55         Plain Text: <input type="text" id="plainTextGCM" value="Hello, World!">
56         <button type="button" onclick="AES_GCM_encrypt()">encryptGCM</button>
57         <button type="button" onclick="AES_CBC_encrypt()">encryptCBC</button>
58     </div>
59     <div>
60         Cipher Text: <input type="text" id="cipherTextGCM" size="50">
61         <button type="button" onclick="AES_GCM_decrypt()">decryptGCM</button>
62         <button type="button" onclick="AES_CBC_decrypt()">decryptCBC</button>
63     </div>
64     <div id="resultGCM">
65         Result:
66     </div>
67 </body>
68 </html>