Add Ed25519 sign-verify example

web-crypto/sign-verify/ed25519.js

@@ -0,0 +1,88 @@
+(() => {
+
+  /*
+  Store the calculated signature here, so we can verify it later.
+  */
+  let signature;
+
+  /*
+  Fetch the contents of the "message" textbox, and encode it
+  in a form we can use for sign operation.
+  */
+  function getMessageEncoding() {
+    const messageBox = document.querySelector("#ed25519-message");
+    let message = messageBox.value;
+    let enc = new TextEncoder();
+    return enc.encode(message);
+  }
+
+  /*
+  Get the encoded message-to-sign, sign it and display a representation
+  of the first part of it in the "signature" element.
+  */
+  async function signMessage(privateKey) {
+    const signatureValue = document.querySelector(".ed25519 .signature-value");
+    signatureValue.classList.remove("valid", "invalid");
+
+    let encoded = getMessageEncoding();
+    signature = await window.crypto.subtle.sign(
+      {
+        name: "Ed25519"
+      },
+      privateKey,
+      encoded
+    );
+
+    signatureValue.classList.add('fade-in');
+    signatureValue.addEventListener('animationend', () => {
+      signatureValue.classList.remove('fade-in');
+    });
+    let buffer = new Uint8Array(signature, 0, 5);
+    signatureValue.textContent = `${buffer}...[${signature.byteLength} bytes total]`;
+  }
+
+  /*
+  Fetch the encoded message-to-sign and verify it against the stored signature.
+  * If it checks out, set the "valid" class on the signature.
+  * Otherwise set the "invalid" class.
+  */
+  async function verifyMessage(publicKey) {
+    const signatureValue = document.querySelector(".ed25519 .signature-value");
+    signatureValue.classList.remove("valid", "invalid");
+
+    let encoded = getMessageEncoding();
+    let result = await window.crypto.subtle.verify(
+      {
+        name: "Ed25519",
+      },
+      publicKey,
+      signature,
+      encoded
+    );
+
+    signatureValue.classList.add(result ? "valid" : "invalid");
+  }
+
+  /*
+  Generate a sign/verify key, then set up event listeners
+  on the "Sign" and "Verify" buttons.
+  */
+  window.crypto.subtle.generateKey(
+    {
+      name: "Ed25519",
+    },
+    true,
+    ["sign", "verify"]
+  ).then((keyPair) => {
+    const signButton = document.querySelector(".ed25519 .sign-button");
+    signButton.addEventListener("click", () => {
+      signMessage(keyPair.privateKey);
+    });
+
+    const verifyButton = document.querySelector(".ed25519 .verify-button");
+    verifyButton.addEventListener("click", () => {
+      verifyMessage(keyPair.publicKey);
+    });
+  });
+
+})();

web-crypto/sign-verify/index.html

@@ -17,6 +17,7 @@ <h1>Web Crypto: sign/verify</h1>
           <li>"RSA-PSS"</li>
           <li>"ECDSA"</li>
           <li>"HMAC"</li>
+          <li>"ED25519" (See <a href="https://blogs.igalia.com/jfernandez/2023/06/20/secure-curves-in-the-web-cryptography-api/">Secure Curves in the Web Cryptography API</a>; launch Chrome or Chromium with <a href="https://peter.sh/experiments/chromium-command-line-switches/#enable-experimental-web-platform-features"><code>--enable-experimental-web-platform-features</code></a> command-line switch)</li>
         </ul>
         <hr/>
         <p>Each example has four components:</p>
@@ -91,6 +92,20 @@ <h2 class="sign-verify-heading">HMAC</h2>
             <input class="verify-button" type="button" value="Verify">
           </section>
         </section>
+
+        <section class="sign-verify ed25519">
+          <h2 class="sign-verify-heading">ED25519</h2>
+          <section class="sign-verify-controls">
+            <div class="message-control">
+              <label for="ed25519-message">Enter a message to sign:</label>
+              <input type="text" id="ed25519-message" name="message" size="25"
+                     value="The lion roars near dawn">
+            </div>
+            <div class="signature">Signature:<span class="signature-value"></span></div>
+            <input class="sign-button" type="button" value="Sign">
+            <input class="verify-button" type="button" value="Verify">
+          </section>
+        </section>
       </section>
     </main>
 
@@ -99,4 +114,5 @@ <h2 class="sign-verify-heading">HMAC</h2>
   <script src="rsa-pss.js"></script>
   <script src="ecdsa.js"></script>
   <script src="hmac.js"></script>
+  <script src="ed25519.js"></script>
 </html>