@1shotapi/ows-signer 0.3.4 → 0.4.1

package/README.md

@@ -88,6 +88,7 @@ Ceremony UI params (optional on WebAuthn-triggering methods): `explanationHeader
 
 ```
 html/index.html           Entry document
+html/signer.css           Ceremony / reveal UI styles (linked; no inline CSS)
 src/main.js               Bootstrap + message listener
 src/handlers.js           RPC dispatch
 src/webauthn.js           Passkey ceremonies
@@ -96,6 +97,20 @@ src/crypto/vendor/        Vendored @noble/secp256k1 + ed25519 (MIT)
 reference/                1ShotPay reference (not published)
 ```
 
+## Content Security Policy
+
+Serve the Signing Layer document (and its `/src/*` modules) with a **fail-closed** CSP. The signer has no legitimate network I/O — only same-origin scripts/styles and `postMessage` / WebAuthn / WebCrypto.
+
+Canonical header (single line in production):
+
+```http
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self'; connect-src 'none'; img-src 'none'; font-src 'none'; media-src 'none'; object-src 'none'; child-src 'none'; frame-src 'none'; worker-src 'none'; manifest-src 'none'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests
+```
+
+- Apply on the **Signing Layer origin path** (e.g. nginx `location /signer/`), not on the Branding Layer SPA.
+- **Omit `frame-ancestors`** so arbitrary Branding Layers may embed the signer. Nesting safety remains in JS (`event.source === window.parent`, `window.parent !== window.top`).
+- Keep iframe Permissions Policy `allow` for WebAuthn / clipboard (set before `src` in `createSignerIframe`) — that is not CSP.
+
 ## On-chain
 
 See `@1shotapi/ows-onchain`.

package/html/index.html

@@ -4,105 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>OWS Custody Signer</title>
-  <style>
-    :root {
-      color-scheme: light dark;
-      font-family: system-ui, sans-serif;
-    }
-    html,
-    body {
-      height: 100%;
-      margin: 0;
-      overflow: hidden;
-    }
-    body {
-      box-sizing: border-box;
-    }
-    .ows-signer-ui {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      max-width: 100%;
-      padding: 12px;
-      overflow: hidden;
-    }
-    .ows-signer-ui--ceremony {
-      gap: 0;
-    }
-    .ows-key {
-      margin: 0;
-      padding: 8px;
-      border: 1px solid #8884;
-      border-radius: 4px;
-      font-family: ui-monospace, monospace;
-      font-size: 12px;
-      word-break: break-all;
-      white-space: pre-wrap;
-      overflow: auto;
-      flex: 1 1 auto;
-      min-height: 0;
-    }
-    .ows-password {
-      padding: 8px;
-      border: 1px solid #8884;
-      border-radius: 4px;
-      font: inherit;
-    }
-    .ows-ceremony-header {
-      flex: 0 0 auto;
-      margin: 0 0 8px;
-      font-size: 1.1rem;
-      font-weight: 700;
-      line-height: 1.3;
-    }
-    .ows-ceremony-body {
-      flex: 1 1 auto;
-      min-height: 0;
-      overflow-x: hidden;
-      overflow-y: auto;
-      margin: 0 0 12px;
-    }
-    .ows-ceremony-text {
-      margin: 0;
-      font-size: 0.95rem;
-      line-height: 1.4;
-      opacity: 0.9;
-    }
-    .ows-ceremony-actions {
-      flex: 0 0 auto;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-    .ows-actions {
-      flex: 0 0 auto;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-    .ows-copy,
-    .ows-confirm,
-    .ows-deny {
-      padding: 8px 12px;
-      border: 1px solid #8884;
-      border-radius: 4px;
-      background: transparent;
-      font: inherit;
-      cursor: pointer;
-      align-self: flex-start;
-    }
-    .ows-confirm {
-      font-weight: 600;
-    }
-    .ows-confirm:disabled,
-    .ows-deny:disabled {
-      opacity: 0.45;
-      cursor: default;
-    }
-  </style>
+  <link rel="stylesheet" href="./signer.css" />
 </head>
 <body>
   <div id="ows-signer-root"></div>

package/html/signer.css

@@ -0,0 +1,190 @@
+:root {
+  color-scheme: light;
+  --ows-bg: #f3f4f6;
+  --ows-surface: #ffffff;
+  --ows-border: #e5e7eb;
+  --ows-text: #111827;
+  --ows-text-muted: #6b7280;
+  --ows-primary: #2a9aa8;
+  --ows-primary-hover: #238a97;
+  --ows-radius-card: 20px;
+  --ows-radius-control: 10px;
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+body {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ows-bg);
+  color: var(--ows-text);
+}
+
+.ows-signer-ui {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  box-sizing: border-box;
+  align-items: stretch;
+  justify-content: center;
+  margin: auto;
+  width: calc(100% - 24px);
+  max-width: 360px;
+  height: auto;
+  max-height: calc(100% - 24px);
+  padding: 28px 24px;
+  overflow: auto;
+  background: var(--ows-surface);
+  border: 1px solid var(--ows-border);
+  border-radius: var(--ows-radius-card);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+  text-align: center;
+}
+
+.ows-signer-ui--ceremony {
+  gap: 0;
+}
+
+.ows-signer-ui:empty {
+  display: none;
+}
+
+.ows-key {
+  margin: 0;
+  padding: 12px;
+  border: 1px solid var(--ows-border);
+  border-radius: var(--ows-radius-control);
+  background: var(--ows-surface);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--ows-text);
+  word-break: break-all;
+  white-space: pre-wrap;
+  overflow: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+  text-align: left;
+}
+
+.ows-password {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid var(--ows-border);
+  border-radius: var(--ows-radius-control);
+  background: var(--ows-surface);
+  color: var(--ows-text);
+  font: inherit;
+}
+
+.ows-password:focus {
+  outline: 2px solid color-mix(in srgb, var(--ows-primary) 45%, transparent);
+  outline-offset: 1px;
+}
+
+.ows-ceremony-header {
+  flex: 0 0 auto;
+  margin: 0 0 8px;
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--ows-text);
+}
+
+.ows-ceremony-body {
+  flex: 0 1 auto;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0 0 24px;
+}
+
+.ows-ceremony-text {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.45;
+  color: var(--ows-text-muted);
+}
+
+.ows-ceremony-actions,
+.ows-actions {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 12px;
+  width: 100%;
+}
+
+.ows-copy,
+.ows-confirm,
+.ows-deny {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 44px;
+  padding: 12px 16px;
+  border-radius: var(--ows-radius-control);
+  font: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+  cursor: pointer;
+  align-self: stretch;
+}
+
+.ows-confirm {
+  border: none;
+  background: var(--ows-primary);
+  color: #ffffff;
+}
+
+.ows-confirm:hover:not(:disabled) {
+  background: var(--ows-primary-hover);
+}
+
+.ows-confirm:focus-visible {
+  outline: 2px solid var(--ows-primary);
+  outline-offset: 2px;
+}
+
+.ows-deny,
+.ows-copy {
+  border: 1px solid var(--ows-border);
+  background: var(--ows-surface);
+  color: #4b5563;
+  font-weight: 500;
+}
+
+.ows-deny:hover:not(:disabled),
+.ows-copy:hover:not(:disabled) {
+  background: #f9fafb;
+}
+
+.ows-deny:focus-visible,
+.ows-copy:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--ows-primary) 50%, transparent);
+  outline-offset: 2px;
+}
+
+.ows-confirm:disabled,
+.ows-deny:disabled,
+.ows-copy:disabled {
+  opacity: 0.45;
+  cursor: default;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1shotapi/ows-signer",
-  "version": "0.3.4",
+  "version": "0.4.1",
   "description": "OWS Signing Layer — plain JavaScript WebAuthn PRF key custody with curve-based signing (on-chain via EIP-8244)",
   "type": "module",
   "files": [
@@ -10,6 +10,7 @@
   ],
   "exports": {
     "./html": "./html/index.html",
+    "./html/signer.css": "./html/signer.css",
     "./src/*": "./src/*"
   },
   "scripts": {

package/src/handlers.js

@@ -41,7 +41,7 @@ import {
 } from "./ui.js";
 import {
   createPasskeyCredential,
-  getAssertionSignatureBase64Url,
+  getAssertionFieldsBase64Url,
   getCredentialId,
   getPasskeyAssertion,
   getCosePublicKeyBase64Url,
@@ -885,8 +885,8 @@ async function handleGetPublicKey(params, correlationId, targetOrigin) {
     });
 
     if (challenge) {
-      const signature = getAssertionSignatureBase64Url(credential);
-      if (signature) {
+      const assertion = getAssertionFieldsBase64Url(credential);
+      if (assertion) {
         emitEvent(
           window.parent,
           targetOrigin,
@@ -894,7 +894,7 @@ async function handleGetPublicKey(params, correlationId, targetOrigin) {
           correlationId,
           {
             challenge: to0xHex(challenge),
-            signature,
+            assertion,
           },
         );
       }
@@ -1014,9 +1014,9 @@ async function handleExecuteBatch(params, correlationId, targetOrigin) {
       };
     }
     if (challenge && credential) {
-      const signature = getAssertionSignatureBase64Url(credential);
-      if (signature) {
-        data.challengeSignature = signature;
+      const assertion = getAssertionFieldsBase64Url(credential);
+      if (assertion) {
+        data.assertion = assertion;
       }
     }
 
@@ -1096,6 +1096,13 @@ function handleError(error, correlationId, targetOrigin) {
     return;
   }
 
+  if (name === "AbortError" || message === "ceremonyCancelled") {
+    emitEvent(window.parent, targetOrigin, "SignDenied", correlationId, {
+      reason: "ceremonyCancelled",
+    });
+    return;
+  }
+
   if (name === "NotAllowedError" || message.includes("NotAllowed")) {
     emitEvent(window.parent, targetOrigin, "NotAllowed", correlationId, {
       reason: message || "notAllowed",
@@ -1105,7 +1112,7 @@ function handleError(error, correlationId, targetOrigin) {
 
   if (message === "ceremonyInProgress") {
     emitEvent(window.parent, targetOrigin, "InvalidRequest", correlationId, {
-      reason: "ceremonyInProgress",
+      reason: "A request is already pending.",
     });
     return;
   }

package/src/main.js

@@ -2,6 +2,7 @@ import { handleRequest } from "./handlers.js";
 import {
   abandonCeremony,
   isValidNesting,
+  setCancelConfirmHook,
   setTrustedParentOrigin,
 } from "./state.js";
 import { cancelPendingCeremonyConfirm, initUi } from "./ui.js";
@@ -13,13 +14,14 @@ function bootstrap() {
     throw new Error("OWS signer root element missing");
   }
   initUi(root);
+  setCancelConfirmHook(cancelPendingCeremonyConfirm);
 
   if (!isValidNesting()) {
     console.error("[ows-signer] Must be embedded in a wallet iframe (double iframe).");
     return;
   }
 
-  window.addEventListener("message", async (event) => {
+  window.addEventListener("message", (event) => {
     if (!isValidParentMessage(event)) return;
 
     const data = event.data;
@@ -29,7 +31,9 @@ function bootstrap() {
       /** @type {{ kind?: unknown }} */ (data).kind === "cancel"
     ) {
       setTrustedParentOrigin(event.origin);
-      await abandonCeremony(cancelPendingCeremonyConfirm);
+      // Do not await — parent timeout must unlock immediately even if a prior
+      // handleRequest is still suspended on credentials.get.
+      void abandonCeremony(cancelPendingCeremonyConfirm);
       return;
     }
 
@@ -41,15 +45,18 @@ function bootstrap() {
       data
     );
 
-    // Drop a stuck Confirm wait (e.g. parent timed out) before starting anew.
-    await abandonCeremony(cancelPendingCeremonyConfirm);
-
-    await handleRequest(
-      method,
-      /** @type {Record<string, unknown>} */ (params),
-      correlationId,
-      targetOrigin,
-    );
+    void (async () => {
+      // Drop a stuck Confirm wait (e.g. parent timed out) before starting anew.
+      await abandonCeremony(cancelPendingCeremonyConfirm);
+      await handleRequest(
+        method,
+        /** @type {Record<string, unknown>} */ (params),
+        correlationId,
+        targetOrigin,
+      );
+    })().catch((error) => {
+      console.error("[ows-signer] request handler failed", error);
+    });
   });
 }
 

package/src/state.js

@@ -4,6 +4,9 @@ let recoveryPrivateKey = null;
 /** @type {Promise<unknown> | null} */
 let ceremonyPromise = null;
 
+/** @type {AbortController | null} */
+let ceremonyAbortController = null;
+
 /** @type {string | null} */
 let trustedParentOrigin = null;
 
@@ -70,15 +73,65 @@ export function clearRecoveryPrivateKey() {
   }
 }
 
+/**
+ * AbortSignal for the active ceremony (WebAuthn `credentials.get/create`).
+ * @returns {AbortSignal | undefined}
+ */
+export function getCeremonyAbortSignal() {
+  return ceremonyAbortController?.signal;
+}
+
+/** @type {(() => void) | null} */
+let cancelConfirmHook = null;
+
+/**
+ * Branding/UI registers the Confirm-cancel hook so steal / abandon can dismiss
+ * the panel without a circular import on `ui.js`.
+ *
+ * @param {(() => void) | null} hook
+ */
+export function setCancelConfirmHook(hook) {
+  cancelConfirmHook = hook;
+}
+
+/**
+ * Force-drop the ceremony lock and abort in-flight WebAuthn.
+ * Safe to call when no ceremony is active.
+ */
+function forceUnlockCeremony() {
+  try {
+    cancelConfirmHook?.();
+  } catch {
+    // ignore
+  }
+  const abort = ceremonyAbortController;
+  const pending = ceremonyPromise;
+  ceremonyPromise = null;
+  ceremonyAbortController = null;
+  try {
+    abort?.abort();
+  } catch {
+    // ignore
+  }
+  if (pending) {
+    void pending.catch(() => {
+      // Prior ceremony was cancelled, aborted, or failed.
+    });
+  }
+}
+
 /**
  * @param {() => Promise<T>} fn
  * @returns {Promise<T>}
  * @template T
  */
 export async function withCeremony(fn) {
+  // Steal any leftover lock (e.g. hung credentials.get after parent timeout).
+  // Throwing ceremonyInProgress left Branding retries stuck after RPC timeout.
   if (ceremonyPromise) {
-    throw new Error("ceremonyInProgress");
+    forceUnlockCeremony();
   }
+  ceremonyAbortController = new AbortController();
   const promise = fn();
   ceremonyPromise = promise;
   try {
@@ -86,24 +139,27 @@ export async function withCeremony(fn) {
   } finally {
     if (ceremonyPromise === promise) {
       ceremonyPromise = null;
+      ceremonyAbortController = null;
     }
   }
 }
 
 /**
- * Cancel an open Confirm UI and wait for any in-flight ceremony lock to clear.
- * Used when the parent times out or starts a new RPC.
+ * Cancel Confirm UI, abort in-flight WebAuthn, and unlock the ceremony immediately.
+ * Used when the parent times out or starts a new RPC. Must not wait forever on
+ * hung `credentials.get` — that left Branding retries stuck with ceremonyInProgress.
  *
- * @param {() => void} cancelPendingConfirm
+ * @param {() => void} [_cancelPendingConfirm]
  */
-export async function abandonCeremony(cancelPendingConfirm) {
-  cancelPendingConfirm();
-  const pending = ceremonyPromise;
-  if (!pending) return;
-  try {
-    await pending;
-  } catch {
-    // Prior ceremony was cancelled or failed — lock clears in withCeremony finally.
+export async function abandonCeremony(_cancelPendingConfirm) {
+  // Prefer the registered hook (always current); keep the argument for callers.
+  forceUnlockCeremony();
+  if (typeof _cancelPendingConfirm === "function") {
+    try {
+      _cancelPendingConfirm();
+    } catch {
+      // ignore — hook already ran
+    }
   }
 }
 

package/src/webauthn.js

@@ -1,4 +1,4 @@
-import { getRpId } from "./state.js";
+import { getCeremonyAbortSignal, getRpId } from "./state.js";
 import { PRF_LABEL_SECP256K1 } from "./constants.js";
 import { bufferToBase64Url } from "./hex.js";
 import { debugLog, describePrfExtensionResults } from "./debug.js";
@@ -27,6 +27,7 @@ export async function createPasskeyCredential(name, options = {}) {
     ? Uint8Array.from(atob(options.userId), (c) => c.charCodeAt(0))
     : randomUserId();
   const displayName = options.userDisplayName ?? name;
+  const signal = getCeremonyAbortSignal();
 
   debugLog("createPasskeyCredential userActivation.isActive", {
     isActive: navigator.userActivation?.isActive ?? false,
@@ -41,7 +42,12 @@ export async function createPasskeyCredential(name, options = {}) {
         displayName,
       },
       challenge: crypto.getRandomValues(new Uint8Array(32)),
-      pubKeyCredParams: [{ type: "public-key", alg: -7 }],
+      // Chromium warns when ES256 (-7) is present without RS256 (-257).
+      // Prefer ES256 (PRF); RS256 is listed for authenticator compatibility.
+      pubKeyCredParams: [
+        { type: "public-key", alg: -7 },
+        { type: "public-key", alg: -257 },
+      ],
       authenticatorSelection: {
         residentKey: "required",
         requireResidentKey: true,
@@ -55,6 +61,7 @@ export async function createPasskeyCredential(name, options = {}) {
         },
       },
     },
+    ...(signal ? { signal } : {}),
   });
 
   if (!credential || !(credential instanceof PublicKeyCredential)) {
@@ -79,6 +86,7 @@ export async function getPasskeyAssertion(challenge, credentialId) {
         },
       ]
     : undefined;
+  const signal = getCeremonyAbortSignal();
 
   const credential = await navigator.credentials.get({
     publicKey: {
@@ -94,6 +102,7 @@ export async function getPasskeyAssertion(challenge, credentialId) {
         },
       },
     },
+    ...(signal ? { signal } : {}),
   });
 
   if (!credential || !(credential instanceof PublicKeyCredential)) {
@@ -245,3 +254,33 @@ export function getAssertionSignatureBase64Url(credential) {
   }
   return null;
 }
+
+/**
+ * Full WebAuthn assertion fields for host/relayer auth (base64url).
+ * @param {PublicKeyCredential} credential
+ * @returns {{
+ *   authenticatorData: string,
+ *   clientDataJSON: string,
+ *   signature: string,
+ *   credentialId: string,
+ * } | null}
+ */
+export function getAssertionFieldsBase64Url(credential) {
+  const response = credential.response;
+  if (
+    !("authenticatorData" in response) ||
+    !response.authenticatorData ||
+    !("clientDataJSON" in response) ||
+    !response.clientDataJSON ||
+    !("signature" in response) ||
+    !response.signature
+  ) {
+    return null;
+  }
+  return {
+    authenticatorData: bufferToBase64Url(response.authenticatorData),
+    clientDataJSON: bufferToBase64Url(response.clientDataJSON),
+    signature: bufferToBase64Url(response.signature),
+    credentialId: getCredentialId(credential),
+  };
+}