@1shotapi/ows-signer 0.3.4 → 0.4.0

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.0",
   "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;
       }
     }
 

package/src/webauthn.js

@@ -245,3 +245,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),
+  };
+}