Skip to content

Commit

Permalink
docs(web-crypto): add link to browser compat for ed25519, formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsmth
bsmth committed Feb 26, 2024
1 parent c1ad802 commit 619e3ea
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 100 deletions.
32 changes: 14 additions & 18 deletions web-crypto/sign-verify/ed25519.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
(() => {

/*
Store the calculated signature here, so we can verify it later.
*/
Expand Down Expand Up @@ -27,9 +26,9 @@
let encoded = getMessageEncoding();
signature = await window.crypto.subtle.sign("Ed25519", privateKey, encoded);

signatureValue.classList.add('fade-in');
signatureValue.addEventListener('animationend', () => {
signatureValue.classList.remove('fade-in');
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]`;
Expand Down Expand Up @@ -59,20 +58,17 @@
Generate a sign/verify key, then set up event listeners
on the "Sign" and "Verify" buttons.
*/
window.crypto.subtle.generateKey(
"Ed25519",
true,
["sign", "verify"]
).then((keyPair) => {
const signButton = document.querySelector(".ed25519 .sign-button");
signButton.addEventListener("click", () => {
signMessage(keyPair.privateKey);
});
window.crypto.subtle
.generateKey("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);
const verifyButton = document.querySelector(".ed25519 .verify-button");
verifyButton.addEventListener("click", () => {
verifyMessage(keyPair.publicKey);
});
});
});

})();
145 changes: 110 additions & 35 deletions web-crypto/sign-verify/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="utf-8" />
<title>Web Crypto API example</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css" />
</head>

<body>
<main>
<h1>Web Crypto: sign/verify</h1>

<section class="description">
<p>This page shows the use of the <code>sign()</code> and <code>verify()</code> functions of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a>. It contains four separate examples, one for each signing algorithm supported:</p>
<ul>
<p>
This page shows how to use the <code>sign()</code> and
<code>verify()</code> functions of the
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API"
>Web Crypto API</a
>. It contains examples for the following signing algorithms:
</p>
<ol>
<li>"RSASSA-PKCS1-v1_5"</li>
<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/>
<li>
"Ed25519"
<ul>
<li class="caution-list-item">
<span class="caution">Caution: </span>For information about
Ed25519 support, see
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto#browser_compatibility"
>SubtleCrypto: Browser compatibility</a
>
and
<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
>. Chrome requires the
<code>enable-experimental-web-platform-features</code>
preference to be set via
<a
href="https://peter.sh/experiments/chromium-command-line-switches/#enable-experimental-web-platform-features"
>command-line switch</a
>
or via
<code
>chrome://flags/#enable-experimental-web-platform-features</code
>.
</li>
</ul>
</li>
</ol>
<hr />
<p>Each example has four components:</p>
<ul>
<li>A text box containing a message to sign.</li>
<li>A representation of the signature.</li>
<li>A "Sign" button: this signs the text box contents, displays part of the signature, and stores the complete signature.</li>
<li>A "Verify" button: this verifies the text box contents against the stored signature, and styles the displayed signature according to the result.</li>
<li>
A "Sign" button: this signs the text box contents, displays part of
the signature, and stores the complete signature.
</li>
<li>
A "Verify" button: this verifies the text box contents against the
stored signature, and styles the displayed signature according to
the result.
</li>
</ul>
<p>Try it:</p>
<ul>
Expand All @@ -42,12 +83,19 @@ <h2 class="sign-verify-heading">RSASSA-PKCS1-v1_5</h2>
<section class="sign-verify-controls">
<div class="message-control">
<label for="rsassa-pkcs1-message">Enter a message to sign:</label>
<input type="text" id="rsassa-pkcs1-message" name="message" size="25"
value="The owl hoots at midnight">
<input
type="text"
id="rsassa-pkcs1-message"
name="message"
size="25"
value="The owl hoots at midnight"
/>
</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">
<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>

Expand All @@ -56,12 +104,19 @@ <h2 class="sign-verify-heading">RSA-PSS</h2>
<section class="sign-verify-controls">
<div class="message-control">
<label for="rsa-pss-message">Enter a message to sign:</label>
<input type="text" id="rsa-pss-message" name="message" size="25"
value="The tiger prowls at dawn">
<input
type="text"
id="rsa-pss-message"
name="message"
size="25"
value="The tiger prowls at dawn"
/>
</div>
<div class="signature">
Signature:<span class="signature-value"></span>
</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">
<input class="sign-button" type="button" value="Sign" />
<input class="verify-button" type="button" value="Verify" />
</section>
</section>

Expand All @@ -70,12 +125,19 @@ <h2 class="sign-verify-heading">ECDSA</h2>
<section class="sign-verify-controls">
<div class="message-control">
<label for="ecdsa-message">Enter a message to sign:</label>
<input type="text" id="ecdsa-message" name="message" size="25"
value="The eagle flies at twilight">
<input
type="text"
id="ecdsa-message"
name="message"
size="25"
value="The eagle flies at twilight"
/>
</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">
<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>

Expand All @@ -84,12 +146,19 @@ <h2 class="sign-verify-heading">HMAC</h2>
<section class="sign-verify-controls">
<div class="message-control">
<label for="hmac-message">Enter a message to sign:</label>
<input type="text" id="hmac-message" name="message" size="25"
value="The bunny hops at teatime">
<input
type="text"
id="hmac-message"
name="message"
size="25"
value="The bunny hops at teatime"
/>
</div>
<div class="signature">
Signature:<span class="signature-value"></span>
</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">
<input class="sign-button" type="button" value="Sign" />
<input class="verify-button" type="button" value="Verify" />
</section>
</section>

Expand All @@ -98,17 +167,23 @@ <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">
<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">
<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>

</body>
<script src="rsassa-pkcs1.js"></script>
<script src="rsa-pss.js"></script>
Expand Down
Loading

0 comments on commit 619e3ea

Please sign in to comment.