[WebAudio][GStreamer] socketpair leaks
[WebKit-https.git] / Websites / webkit.org / demos / webcrypto / ecdh.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title>WebCrypto API Demo: ECDH</title>
6     <style>
7     table, tr, th
8      {
9          font-weight: normal;
10      }
11     tr
12     {
13         text-align: left;
14     }
15     .th1
16     {
17         overflow: hidden;
18         white-space: nowrap;
19     }
20     </style>
21     <script type="text/javascript" src="common.js"></script>
22     <script type="text/javascript">
23     var rsaKeyGen = {
24         name: "RSA-OAEP",
25         // RsaKeyGenParams
26         modulusLength: 2048,
27         publicExponent: new Uint8Array([0x01, 0x00, 0x01]),  // Equivalent to 65537
28         hash: "sha-256"
29     };
30     var ecKeys = { a: null, b: null };
31     function AES_generate()
32     {
33         crypto.subtle.generateKey({ name: "aes-cbc", length: 128 }, true, ["decrypt", "encrypt"]).then(function(key) {
34             return crypto.subtle.exportKey("raw", key);
35         }, failAndLog).then(function(key) {
36             aesKey = key;
37             document.getElementById("aesKey").innerHTML = bytesToHexString(key);
38         }, failAndLog);
39     }
40     function RSA_generate()
41     {
42         crypto.subtle.generateKey(rsaKeyGen, true, ["decrypt", "encrypt"]).then(function(keyPair) {
43             rsaKeyPair = keyPair;
44             document.getElementById("rsaKey").innerHTML = "Done!";
45         }, failAndLog);
46     }
47     function importKey(id)
48     {
49         document.getElementById(id).innerHTML = "Done!";
50     }
51     function RSA_encrypt()
52     {
53         crypto.subtle.encrypt("rsa-oaep", rsaKeyPair.publicKey, aesKey).then(function(cipherText) {
54             rsaCipher = cipherText;
55             document.getElementById("rsaEncrypt").innerHTML = bytesToHexString(cipherText);
56         }, failAndLog);
57     }
58     function RSA_decrypt()
59     {
60         crypto.subtle.decrypt("rsa-oaep", rsaKeyPair.privateKey, rsaCipher).then(function(plainText) {
61             document.getElementById("rsaDecrypt").innerHTML = bytesToHexString(plainText);
62         }, failAndLog);
63     }
64     function EC_generate(id)
65     {
66         crypto.subtle.generateKey({ name: "ECDH", namedCurve: "P-256"}, true, ["deriveBits"]).then(function(keyPair) {
67             if (id == 'A')
68                 ecKeys.a = keyPair;
69             if (id == 'B')
70                 ecKeys.b = keyPair;
71             document.getElementById("ecKey" + id).innerHTML = "Done!";
72         }, failAndLog);
73     }
74     function EC_sharedSecret(id)
75     {
76         if (id == 'A')
77             crypto.subtle.deriveBits({ name:"ECDH", public:ecKeys.b.publicKey }, ecKeys.a.privateKey, 128).then(function(result) {
78                 document.getElementById("ecSharedSecret" + id).innerHTML = bytesToHexString(result);
79             }, failAndLog);
80         if (id == 'B')
81             crypto.subtle.deriveBits({ name:"ECDH", public:ecKeys.a.publicKey }, ecKeys.b.privateKey, 128).then(function(result) {
82                 document.getElementById("ecSharedSecret" + id).innerHTML = bytesToHexString(result);
83             }, failAndLog);
84     }
85     </script>
86 </head>
87 <body>
88     <h1>ECDH</h1>
89     <p>Click the following buttons step by step to get a rough feeling of how ECDH differs from RSA secret key exchange. The boy is called Bob and the girl is called Alice as they always are. :)</p>
90     <p>RSA secret key exchange:</p>
91     <table>
92         <tr>
93             <th></th>
94             <th>
95                 <img src="./bob.png" style="width:150px;height:150px;">
96             </th>
97             <th>
98                 <img src="./alice.png" style="width:200px;height:150px;">
99             </th>
100         </tr>
101         <tr>
102             <th class="th1">Step 1:</th>
103             <th>
104                 <button type="button" onclick="RSA_generate()">generateKeyRSA</button>
105                 <div id="rsaKey"></div>
106             </th>
107             <th>
108                 <button type="button" onclick="AES_generate()">generateKeyAES</button>
109                 <div id="aesKey"></div>
110             </th>
111         </tr>
112         <tr>
113             <th>Step 2:</th>
114             <td>
115                 wait
116             </td>
117             <td>
118                 <button type="button" onclick="importKey('importKey1')">getBobsPublicKey</button>
119                 <div id="importKey1"></div>
120             </td>
121         </tr>
122         <tr>
123             <th>Step 3:</th>
124             <td>
125                 wait
126             </td>
127             <td>
128                 <button type="button" onclick="RSA_encrypt()">encryptRSA</button>
129                 <div id="rsaEncrypt">
130             </td>
131         </tr>
132         <tr>
133             <th>Step 4:</th>
134             <td>
135                 <button type="button" onclick="RSA_decrypt()" class="inner">decryptRSA</button>
136                 <div id="rsaDecrypt" class="inner">
137             </td>
138             <td>
139                 wait
140             </td>
141         </tr>
142         <tr>
143             <th>ECDH:</th>
144         </tr>
145         <tr>
146             <th>Step 1:</th>
147             <th>
148                 <button type="button" onclick="EC_generate('B')">generateKeyEC</button>
149                 <div id="ecKeyB"></div>
150             </th>
151             <th>
152                 <button type="button" onclick="EC_generate('A')">generateKeyEC</button>
153                 <div id="ecKeyA"></div>
154             </th>
155         </tr>
156         <tr>
157             <th>Step 2:</th>
158             <td>
159                 <button type="button" onclick="importKey('importKey2')">getAlicesPublicKey</button>
160                 <div id="importKey2"></div>
161             </td>
162             <td>
163                 <button type="button" onclick="importKey('importKey3')">getBobsPublicKey</button>
164                 <div id="importKey3"></div>
165             </td>
166         </tr>
167         <tr>
168             <th>Step 3:</th>
169             <td>
170                 <button type="button" onclick="EC_sharedSecret('B')">computeSharedSecret</button>
171                 <div id="ecSharedSecretB"></div>
172             </td>
173             <td>
174                 <button type="button" onclick="EC_sharedSecret('A')">computeSharedSecret</button>
175                 <div id="ecSharedSecretA"></div>
176             </td>
177         </tr>
178     </table>
179 </body>
180 </html>