WebCrypt/examples/combined.html at main · putervision/WebCrypt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>WebCrypt — Combined Example</title>
  </head>
  <body>
    <h1>WebCrypt + WebCryptAsym — Combined Demo</h1>
    <p>
      This page demonstrates deriving an AES key (via <code>WebCryptAsym.deriveKeySHA3</code>),
      encrypting with AES-GCM, and HMACing the ciphertext with <code>WebCrypt</code>.
    </p>

    <button id="run">Run Demo</button>
    <pre id="out"></pre>

    <script type="module">
      // For npm users:
      // import { WebCrypt } from 'webcrypt';
      // import { WebCryptAsym } from 'webcrypt';
      import { WebCrypt } from "../src/WebCrypt.js";
      import { WebCryptAsym } from "../src/WebCryptAsym.js";

      const crypt = new WebCrypt();
      const asym = new WebCryptAsym();
      const out = document.getElementById("out");

      function toBase64(buf) {
        return btoa(String.fromCharCode(...new Uint8Array(buf)));
      }

      document.getElementById("run").addEventListener("click", async () => {
        out.textContent = "Deriving AES key (fast demo)...";
        const aesKey = await asym.deriveKeySHA3("demo-password", 10, "SHA3-256");

        out.textContent += "\nEncrypting plaintext...";
        const iv = crypto.getRandomValues(new Uint8Array(12));
        const plaintext = new TextEncoder().encode("Top secret message");
        const ciphertext = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, aesKey, plaintext);

        out.textContent += `\nCiphertext (base64): ${toBase64(ciphertext)}`;

        out.textContent += "\nGenerating HMAC of ciphertext...";
        const hmacKey = await crypt.generateHmacKeySHA3();
        const tag = await crypt.computeHmacSHA3(new Uint8Array(ciphertext), hmacKey);

        out.textContent += `\nHMAC: ${tag}`;

        out.textContent += "\nVerifying HMAC...";
        const ok = await crypt.verifyHmacSHA3(new Uint8Array(ciphertext), tag, hmacKey);
        out.textContent += ok ? " OK" : " FAIL";
      });
    </script>
  </body>
</html>