From d07417524b5126dd9bd77c2cf1d8e3a5f1af702c Mon Sep 17 00:00:00 2001
From: sovITxyz <git@sovit.xyz>
Date: Fri, 17 Jul 2026 19:49:39 -0600
Subject: [PATCH 1/3] feat: Blossom image uploads in the editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds public/js/blossom.js — click the image button, drag, or paste an
image and it uploads to public Blossom servers (blossom.band primary +
BUD-04 mirror to blossom.nostr.build / nostr.download / cdn.nostrcheck.me)
and inserts the markdown. Auth is a NbreadSigner-signed kind-24242 event;
the returned URL is validated as a clean https:// destination before it's
spliced into the post (rejects markdown-breakout chars). Uploads reuse the
in-page signers (extension / NIP-46 / pasted key); the Amber NIP-55
redirect signer falls back to the URL template. All inserts go through the
existing execCommand undo seam.
---
 public/js/blossom.js        | 329 ++++++++++++++++++++++++++++++++++++
 public/js/editor-toolbar.js | 217 +++++++++++++++++++++++-
 src/views/main/editor.tsx   |  10 +-
 test/unit/blossom.spec.ts   | 203 ++++++++++++++++++++++
 4 files changed, 752 insertions(+), 7 deletions(-)
 create mode 100644 public/js/blossom.js
 create mode 100644 test/unit/blossom.spec.ts

diff --git a/public/js/blossom.js b/public/js/blossom.js
new file mode 100644
index 0000000..93f38ea
--- /dev/null
+++ b/public/js/blossom.js
@@ -0,0 +1,329 @@
+// NbreadBlossom — direct-from-browser image uploads to Blossom media servers
+// (Nostr blob storage, BUD-01/02/04). The editor toolbar (editor-toolbar.js)
+// calls uploadBlob() when the user drops, pastes, or picks an image; the file
+// bytes go straight to the server over an authenticated PUT and never touch
+// our Worker.
+//
+// Flow: hash the blob (SHA-256) -> sign a kind-24242 "Upload Blob" auth event
+// with NbreadSigner -> PUT the raw bytes to the PRIMARY server's /upload ->
+// validate the returned descriptor (https URL + sha match) -> best-effort
+// mirror the URL (BUD-04, no re-upload) to the remaining servers. On a
+// network/5xx/429/timeout failure the next server is promoted to primary.
+//
+// Load order (classic <script> includes, no modules):
+//   vendor/nostr-crypto.js -> signer stack -> blossom.js -> editor-toolbar.js
+//
+// SECURITY: a hostile server could answer with a javascript:/data:/relative
+// URL; every descriptor URL is validated as an absolute https:// URL before
+// it can reach the editor, and its sha256 is checked against the bytes we
+// hashed so a swapped blob is rejected.
+//
+// Pure helpers (buildAuthEvent/encodeAuthHeader/validateFile/isHttpsUrl/
+// extForType/BLOSSOM_SERVERS) touch no network or DOM and are unit-tested;
+// uploadBlob() is the network entry point.
+(function () {
+  "use strict";
+
+  // PRIMARY leads; the rest are redundancy mirrors. All four are public,
+  // CORS-open, and accept anonymous signed uploads.
+  var BLOSSOM_SERVERS = [
+    "https://blossom.band", // primary — indefinite retention, most battle-tested
+    "https://blossom.nostr.build",
+    "https://nostr.download",
+    "https://cdn.nostrcheck.me",
+  ];
+
+  var DEFAULT_TYPES = ["image/png", "image/jpeg", "image/webp", "image/gif"];
+  var DEFAULT_MAX_BYTES = 20 * 1024 * 1024; // 20 MiB
+  var AUTH_TTL_SEC = 300; // expiration window on the signed auth event
+  var REQUEST_TIMEOUT_MS = 30000;
+
+  function cryptoApi() {
+    return globalThis.NbreadCrypto;
+  }
+  function nowSec() {
+    return Math.floor(Date.now() / 1000);
+  }
+
+  // --- Pure helpers -------------------------------------------------------------
+
+  // The unsigned BUD-02 auth template. created_at MUST be now (seconds) and
+  // MUST NOT be in the future; the "x" tag is the lowercase-hex SHA-256 of the
+  // exact blob bytes, and the event expires AUTH_TTL_SEC later.
+  function buildAuthEvent(shaHex, sec) {
+    return {
+      kind: 24242,
+      created_at: sec,
+      content: "Upload Blob",
+      tags: [
+        ["t", "upload"],
+        ["x", shaHex],
+        ["expiration", String(sec + AUTH_TTL_SEC)],
+      ],
+    };
+  }
+
+  // base64url with NO padding: btoa-equivalent, then +/ -> -_, strip '='.
+  function base64Url(bytes) {
+    return cryptoApi()
+      .base64Encode(bytes)
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_")
+      .replace(/=+$/, "");
+  }
+
+  // "Nostr <base64url(JSON.stringify(signedEvent))>" — exactly one space.
+  function encodeAuthHeader(signedEvent) {
+    var bytes = cryptoApi().utf8Encode(JSON.stringify(signedEvent));
+    return "Nostr " + base64Url(bytes);
+  }
+
+  // Duck-typed so it works on real File objects and plain {type,size} stubs.
+  function validateFile(file, opts) {
+    opts = opts || {};
+    var types = opts.types || DEFAULT_TYPES;
+    var maxBytes =
+      typeof opts.maxBytes === "number" ? opts.maxBytes : DEFAULT_MAX_BYTES;
+    if (
+      !file ||
+      typeof file !== "object" ||
+      typeof file.size !== "number" ||
+      typeof file.type !== "string"
+    ) {
+      return { ok: false, reason: "That is not a file." };
+    }
+    if (types.indexOf(file.type) === -1) {
+      return {
+        ok: false,
+        reason: "Unsupported image type (" + (file.type || "unknown") + ").",
+      };
+    }
+    if (file.size <= 0) {
+      return { ok: false, reason: "That image is empty." };
+    }
+    if (file.size > maxBytes) {
+      return {
+        ok: false,
+        reason:
+          "Image is too large (max " +
+          Math.round(maxBytes / (1024 * 1024)) +
+          " MB).",
+      };
+    }
+    return { ok: true };
+  }
+
+  // Absolute https:// URL only. Rejects http/javascript/data/relative/empty
+  // (new URL() with no base throws on a relative string).
+  //
+  // Protocol alone is NOT enough: new URL() happily parses
+  // "https://evil/x.png) [phish](https://evil)" or "...x.png\n\n# Injected"
+  // as protocol "https:", and that raw string is later spliced into a
+  // "![](<url>)" markdown image — the first ')' / newline terminates the
+  // destination and everything after it renders as live attacker markdown.
+  // So we also reject any char that can break out of the markdown
+  // destination: whitespace/control chars and ()<>"'` (backtick). A genuine
+  // Blossom URL (https://host/<sha256>.<ext>) never contains these.
+  function isHttpsUrl(u) {
+    if (typeof u !== "string" || u === "") return false;
+    if (/[\s()<>"'`]/.test(u)) return false;
+    var parsed;
+    try {
+      parsed = new URL(u);
+    } catch (_) {
+      return false;
+    }
+    return parsed.protocol === "https:";
+  }
+
+  function extForType(mime) {
+    switch (mime) {
+      case "image/png":
+        return "png";
+      case "image/jpeg":
+        return "jpg";
+      case "image/webp":
+        return "webp";
+      case "image/gif":
+        return "gif";
+      default:
+        return "bin";
+    }
+  }
+
+  // --- Network ------------------------------------------------------------------
+
+  function sha256Hex(arrayBuffer) {
+    return crypto.subtle.digest("SHA-256", arrayBuffer).then(function (digest) {
+      return cryptoApi().bytesToHex(new Uint8Array(digest));
+    });
+  }
+
+  // A single PUT with a ~30s abort timeout. Resolves to the parsed descriptor
+  // on 200/201; throws with .status set on any other HTTP status; network
+  // errors / aborts throw without a .status (treated as "advance to next").
+  function putBlob(server, file, authHeader) {
+    var controller = new AbortController();
+    var timer = setTimeout(function () {
+      controller.abort();
+    }, REQUEST_TIMEOUT_MS);
+    return fetch(server + "/upload", {
+      method: "PUT",
+      body: file,
+      headers: {
+        Authorization: authHeader,
+        "Content-Type": file.type || "application/octet-stream",
+      },
+      signal: controller.signal,
+    })
+      .then(function (res) {
+        clearTimeout(timer);
+        if (res.status !== 200 && res.status !== 201) {
+          var err = new Error("Upload failed (HTTP " + res.status + ").");
+          err.status = res.status;
+          throw err;
+        }
+        return res.json();
+      })
+      .catch(function (e) {
+        clearTimeout(timer);
+        throw e;
+      });
+  }
+
+  // BUD-04 mirror: hand the successful upload's URL to another server so it
+  // fetches the blob itself. Reuses the SAME auth header (still fresh — the
+  // 24242 event covers this blob's hash and hasn't expired), so no extra
+  // signer prompt. Best-effort: every failure is swallowed.
+  function mirrorTo(server, url, authHeader) {
+    var controller = new AbortController();
+    var timer = setTimeout(function () {
+      controller.abort();
+    }, REQUEST_TIMEOUT_MS);
+    return fetch(server + "/mirror", {
+      method: "PUT",
+      body: JSON.stringify({ url: url }),
+      headers: {
+        Authorization: authHeader,
+        "Content-Type": "application/json",
+      },
+      signal: controller.signal,
+    })
+      .then(function () {
+        clearTimeout(timer);
+      })
+      .catch(function () {
+        clearTimeout(timer);
+      });
+  }
+
+  // Upload a File/Blob and return { url, sha256 } (the final markdown image
+  // URL + the verified content hash). Throws a user-facing Error on failure.
+  function uploadBlob(file, opts) {
+    opts = opts || {};
+    var signer = opts.signer;
+    var servers = opts.servers || BLOSSOM_SERVERS;
+
+    var check = validateFile(file, {
+      maxBytes: opts.maxBytes,
+      types: opts.types,
+    });
+    if (!check.ok) return Promise.reject(new Error(check.reason));
+
+    if (!signer || typeof signer.signEvent !== "function") {
+      return Promise.reject(
+        new Error("No signer configured — image upload needs a signing key."),
+      );
+    }
+    if (
+      typeof signer.isRedirectSigner === "function" &&
+      signer.isRedirectSigner()
+    ) {
+      return Promise.reject(
+        new Error(
+          "Image upload isn't supported with this signer (Amber redirect); paste an image URL instead.",
+        ),
+      );
+    }
+
+    return Promise.resolve(file.arrayBuffer())
+      .then(function (buf) {
+        return sha256Hex(buf).then(function (shaHex) {
+          return uploadToServers(file, shaHex, signer, servers);
+        });
+      });
+  }
+
+  // Try each server in turn as primary. On success, fire the mirrors and
+  // resolve; a 4xx (auth/permission, not 429) surfaces immediately.
+  function uploadToServers(file, shaHex, signer, servers) {
+    var lastErr = null;
+
+    function attempt(i) {
+      if (i >= servers.length) {
+        return Promise.reject(
+          lastErr || new Error("Image upload failed on every server."),
+        );
+      }
+      var server = servers[i];
+      // Re-sign per server: the auth is bound to created_at freshness, and a
+      // fresh signature per attempt sidesteps any clock skew on retries.
+      var unsigned = buildAuthEvent(shaHex, nowSec());
+      return Promise.resolve(signer.signEvent(unsigned)).then(function (signed) {
+        var header = encodeAuthHeader(signed);
+        return putBlob(server, file, header).then(
+          function (descriptor) {
+            if (!descriptor || !isHttpsUrl(descriptor.url)) {
+              lastErr = new Error("Server returned an unusable image URL.");
+              return attempt(i + 1);
+            }
+            if (
+              typeof descriptor.sha256 === "string" &&
+              descriptor.sha256.toLowerCase() !== shaHex
+            ) {
+              lastErr = new Error("Uploaded image failed its integrity check.");
+              return attempt(i + 1);
+            }
+            // Mirror to the rest, best-effort, without blocking the return.
+            for (var m = 0; m < servers.length; m++) {
+              if (servers[m] !== server) {
+                mirrorTo(servers[m], descriptor.url, header);
+              }
+            }
+            return { url: descriptor.url, sha256: shaHex };
+          },
+          function (err) {
+            lastErr = err;
+            // 4xx (except 429) is an auth/permission problem — surface it.
+            if (
+              err &&
+              typeof err.status === "number" &&
+              err.status >= 400 &&
+              err.status < 500 &&
+              err.status !== 429
+            ) {
+              throw err;
+            }
+            // network error / 5xx / 429 / timeout: promote the next server.
+            return attempt(i + 1);
+          },
+        );
+      });
+    }
+
+    return attempt(0);
+  }
+
+  var api = {
+    BLOSSOM_SERVERS: BLOSSOM_SERVERS,
+    buildAuthEvent: buildAuthEvent,
+    encodeAuthHeader: encodeAuthHeader,
+    validateFile: validateFile,
+    isHttpsUrl: isHttpsUrl,
+    extForType: extForType,
+    uploadBlob: uploadBlob,
+  };
+
+  Object.freeze(api);
+  globalThis.NbreadBlossom = api;
+})();
diff --git a/public/js/editor-toolbar.js b/public/js/editor-toolbar.js
index 2311aa8..9f2225b 100644
--- a/public/js/editor-toolbar.js
+++ b/public/js/editor-toolbar.js
@@ -1,7 +1,9 @@
-// Editor toolbar + Write/Preview tabs + counter + localStorage autosave.
+// Editor toolbar + Write/Preview tabs + counter + localStorage autosave +
+// Blossom image uploads (toolbar button / drag-drop / paste).
 // Pure DOM wiring: all text math lives in editor-md.js (NbreadEditorMd)
 // and EVERY textarea mutation goes through replaceRange() below, whose
-// execCommand seam keeps each action a single native undo step.
+// execCommand seam keeps each action a single native undo step — including
+// the async placeholder->URL swap that an image upload lands.
 //
 // Preview seam: activating the Preview tab dispatches a
 // "nbread:preview-requested" CustomEvent on document; editor.js listens
@@ -40,8 +42,20 @@
   // so the whole replacement lands on the native undo stack as one step.
   // When it is unavailable/refused, fall back to setRangeText plus a
   // synthetic input event (undo degrades, behavior does not).
-  function replaceRange(instr) {
+  function replaceRange(instr, preserveFocus) {
     if (!instr) return;
+    // Async swaps (the upload placeholder->URL replacement) can land seconds
+    // later, while the user has moved on to the Title/Slug/Summary field.
+    // execCommand requires focusing the textarea, which would yank focus and
+    // the caret away from where they're typing. When preserveFocus is set and
+    // the textarea isn't the active element, edit through setRangeText (no
+    // focus grab, no selection change) — undo granularity degrades for this
+    // one case, but the user's typing elsewhere is not hijacked.
+    if (preserveFocus && document.activeElement !== contentEl) {
+      contentEl.setRangeText(instr.text, instr.start, instr.end, "preserve");
+      contentEl.dispatchEvent(new Event("input", { bubbles: true }));
+      return;
+    }
     contentEl.focus();
     contentEl.setSelectionRange(instr.start, instr.end);
     var ok = false;
@@ -107,6 +121,10 @@
       applyFootnote();
       return true;
     }
+    if (name === "image") {
+      runImageAction();
+      return true;
+    }
     var fn = actions[name];
     if (!fn) return false;
     replaceRange(
@@ -115,6 +133,186 @@
     return true;
   }
 
+  // --- Image uploads (Blossom) ------------------------------------------------------
+  // Three entry points — the toolbar button, drag-and-drop, and paste — all
+  // funnel through uploadAndInsert(): drop an "![uploading…]()" placeholder at
+  // the caret, PUT the bytes to Blossom, then swap the EXACT placeholder text
+  // for the final "![](<url>)". Matching on the placeholder text (not a caret
+  // offset) keeps the swap correct even if the user keeps typing mid-upload;
+  // if they delete it, the result is silently dropped.
+
+  var blossom = globalThis.NbreadBlossom;
+  var signer = globalThis.NbreadSigner;
+  var statusEl = document.getElementById("editor-status");
+  var ACCEPT_IMAGES = "image/png,image/jpeg,image/webp,image/gif";
+  var uploadSeq = 0;
+  var fileInput = null;
+
+  function setStatus(msg) {
+    if (statusEl) statusEl.textContent = msg;
+  }
+
+  // Synchronous readiness gate (a file picker must open in the user gesture,
+  // so we can't await signer.ready()): an upload is possible when Blossom is
+  // loaded, a signer method is configured, and it is NOT the Amber redirect
+  // signer (whose signEvent navigates away and never resolves).
+  function canUpload() {
+    return !!(
+      blossom &&
+      signer &&
+      typeof signer.method === "function" &&
+      signer.method() &&
+      !(typeof signer.isRedirectSigner === "function" && signer.isRedirectSigner())
+    );
+  }
+
+  function imageFilesFrom(fileList) {
+    var out = [];
+    if (!fileList) return out;
+    for (var i = 0; i < fileList.length; i++) {
+      var f = fileList[i];
+      if (f && typeof f.type === "string" && f.type.indexOf("image/") === 0) {
+        out.push(f);
+      }
+    }
+    return out;
+  }
+
+  // clipboardData exposes pasted images via files on modern browsers and via
+  // items elsewhere — check both.
+  function imageFilesFromClipboard(cd) {
+    var out = imageFilesFrom(cd.files);
+    if (out.length === 0 && cd.items) {
+      for (var i = 0; i < cd.items.length; i++) {
+        var it = cd.items[i];
+        if (it.kind === "file" && it.type && it.type.indexOf("image/") === 0) {
+          var f = it.getAsFile();
+          if (f) out.push(f);
+        }
+      }
+    }
+    return out;
+  }
+
+  function dragHasImage(dt) {
+    if (!dt) return false;
+    if (dt.items && dt.items.length) {
+      for (var i = 0; i < dt.items.length; i++) {
+        if (
+          dt.items[i].kind === "file" &&
+          dt.items[i].type &&
+          dt.items[i].type.indexOf("image/") === 0
+        ) {
+          return true;
+        }
+      }
+      return false;
+    }
+    if (dt.types) {
+      for (var j = 0; j < dt.types.length; j++) {
+        if (dt.types[j] === "Files") return true;
+      }
+    }
+    return false;
+  }
+
+  function insertPlaceholder(placeholder) {
+    var s = contentEl.selectionStart;
+    var e = contentEl.selectionEnd;
+    replaceRange({
+      start: s,
+      end: e,
+      text: placeholder,
+      selStart: s + placeholder.length,
+      selEnd: s + placeholder.length,
+    });
+  }
+
+  // Swap the first occurrence of `placeholder` for `replacement`, through the
+  // undo-safe seam. Returns false when the placeholder is gone (user deleted).
+  function replacePlaceholder(placeholder, replacement) {
+    var idx = contentEl.value.indexOf(placeholder);
+    if (idx === -1) return false;
+    // preserveFocus: this is an async swap that may fire while the user is
+    // typing in another field — don't steal focus back to the textarea.
+    replaceRange(
+      {
+        start: idx,
+        end: idx + placeholder.length,
+        text: replacement,
+        selStart: idx + replacement.length,
+        selEnd: idx + replacement.length,
+      },
+      true,
+    );
+    return true;
+  }
+
+  function uploadAndInsert(file) {
+    if (!blossom) return;
+    var id = ++uploadSeq;
+    var placeholder = "![uploading… #" + id + "]()";
+    insertPlaceholder(placeholder);
+    setStatus("Uploading image…");
+    blossom.uploadBlob(file, { signer: signer }).then(
+      function (res) {
+        replacePlaceholder(placeholder, "![](" + res.url + ")");
+        setStatus("Image uploaded.");
+      },
+      function (err) {
+        // Pull the placeholder back out on failure so no broken token remains.
+        replacePlaceholder(placeholder, "");
+        setStatus(
+          (err && err.message) || "Image upload failed. Please try again.",
+        );
+      },
+    );
+  }
+
+  function ensureFileInput() {
+    if (fileInput) return fileInput;
+    fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.accept = ACCEPT_IMAGES;
+    fileInput.style.display = "none";
+    fileInput.addEventListener("change", function () {
+      var f = fileInput.files && fileInput.files[0];
+      fileInput.value = ""; // let the same file be re-picked later
+      if (f) uploadAndInsert(f);
+    });
+    document.body.appendChild(fileInput);
+    return fileInput;
+  }
+
+  // Toolbar "image" button: open the picker when uploads are possible; else
+  // fall back to the classic URL-template insert so the button still works.
+  function runImageAction() {
+    if (canUpload()) {
+      ensureFileInput().click();
+      return;
+    }
+    replaceRange(
+      md.makeImage(contentEl.value, contentEl.selectionStart, contentEl.selectionEnd),
+    );
+  }
+
+  // Drag-and-drop image files onto the textarea.
+  contentEl.addEventListener("dragover", function (e) {
+    if (dragHasImage(e.dataTransfer)) e.preventDefault();
+  });
+  contentEl.addEventListener("drop", function (e) {
+    var files = e.dataTransfer ? imageFilesFrom(e.dataTransfer.files) : [];
+    if (files.length === 0) return; // let native drop (e.g. text) proceed
+    e.preventDefault();
+    if (!canUpload()) {
+      setStatus(
+        "Configure a signing key (not Amber) to upload images, or paste an image URL.",
+      );
+      return;
+    }
+    for (var i = 0; i < files.length; i++) uploadAndInsert(files[i]);
+  });
+
   // --- Toolbar: click delegation + roving tabindex ----------------------------------
 
   var toolbar = document.querySelector(".editor-toolbar");
@@ -223,6 +421,19 @@
   // of overwriting the selected text.
   contentEl.addEventListener("paste", function (e) {
     if (!e.clipboardData) return;
+    // A pasted image takes priority over the text-URL-to-link behavior below.
+    var imgFiles = imageFilesFromClipboard(e.clipboardData);
+    if (imgFiles.length > 0) {
+      e.preventDefault();
+      if (!canUpload()) {
+        setStatus(
+          "Configure a signing key (not Amber) to upload images, or paste an image URL.",
+        );
+        return;
+      }
+      for (var pi = 0; pi < imgFiles.length; pi++) uploadAndInsert(imgFiles[pi]);
+      return;
+    }
     var pasted = (e.clipboardData.getData("text/plain") || "").trim();
     if (!URL_RE.test(pasted)) return;
     var s = contentEl.selectionStart;
diff --git a/src/views/main/editor.tsx b/src/views/main/editor.tsx
index e52aba2..ba1f31a 100644
--- a/src/views/main/editor.tsx
+++ b/src/views/main/editor.tsx
@@ -7,10 +7,11 @@ import { SiteHeader, SiteFooter } from "./chrome";
  * public/js/editor.js through the NbreadSigner abstraction (NIP-07 extension,
  * NIP-46 remote bunker, NIP-55/Amber redirect, or a stored local key); this
  * page only ships the form plus a JSON config blob the scripts read. The
- * markdown toolbar, Write/Preview tabs, counter, and draft autosave are wired
- * by public/js/editor-toolbar.js on top of the DOM-free text core in
- * public/js/editor-md.js — script order at the bottom matters (signer stack
- * first, then the editor scripts).
+ * markdown toolbar, Write/Preview tabs, counter, draft autosave, and image
+ * upload (drag/drop/paste/toolbar → Blossom media servers via
+ * public/js/blossom.js) are wired by public/js/editor-toolbar.js on top of the
+ * DOM-free text core in public/js/editor-md.js — script order at the bottom
+ * matters (signer stack + blossom first, then the editor scripts).
  *
  * XSS notes: every field value renders through hono/jsx auto-escaping (post
  * titles/summaries/content are relay-sourced and hostile by assumption). The
@@ -273,6 +274,7 @@ export function EditorPage(props: {
         <script src="/js/signer-core.js"></script>
         <script src="/js/signer.js"></script>
         <script src="/js/signer-nip46.js"></script>
+        <script src="/js/blossom.js"></script>
         <script src="/js/editor-md.js"></script>
         <script src="/js/editor-toolbar.js"></script>
         <script src="/js/editor.js"></script>
diff --git a/test/unit/blossom.spec.ts b/test/unit/blossom.spec.ts
new file mode 100644
index 0000000..fb0f97a
--- /dev/null
+++ b/test/unit/blossom.spec.ts
@@ -0,0 +1,203 @@
+// Blossom uploader — PURE helper coverage. The two IIFEs are imported for
+// their side effect (nostr-crypto assigns globalThis.NbreadCrypto, which
+// blossom.js's base64url encoder depends on; blossom assigns
+// globalThis.NbreadBlossom). Only the network-free helpers are exercised
+// here — uploadBlob() (fetch + crypto.subtle) is covered by the integration
+// surface, never unit-tested.
+import { describe, expect, it } from "vitest";
+// @ts-ignore — plain browser IIFE, intentionally shipped without types
+import "../../public/js/vendor/nostr-crypto.js";
+// @ts-ignore — plain browser IIFE, intentionally shipped without types
+import "../../public/js/blossom.js";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const crypto = (globalThis as any).NbreadCrypto as {
+  base64Decode: (s: string) => Uint8Array;
+  utf8Decode: (b: Uint8Array) => string;
+};
+
+const blossom = (globalThis as any).NbreadBlossom as {
+  BLOSSOM_SERVERS: string[];
+  buildAuthEvent: (
+    shaHex: string,
+    sec: number,
+  ) => { kind: number; created_at: number; content: string; tags: string[][] };
+  encodeAuthHeader: (signed: unknown) => string;
+  validateFile: (
+    file: unknown,
+    opts?: { maxBytes?: number; types?: string[] },
+  ) => { ok: boolean; reason?: string };
+  isHttpsUrl: (u: unknown) => boolean;
+  extForType: (mime: string) => string;
+  uploadBlob: (file: unknown, opts?: unknown) => Promise<unknown>;
+};
+
+/** Reverse of blossom's base64url(no-pad) so we can round-trip the header. */
+function fromBase64Url(s: string): string {
+  const pad = s.length % 4 === 0 ? "" : "=".repeat(4 - (s.length % 4));
+  const b64 = s.replace(/-/g, "+").replace(/_/g, "/") + pad;
+  return crypto.utf8Decode(crypto.base64Decode(b64));
+}
+
+describe("blossom is loaded", () => {
+  it("assigns the API to globalThis", () => {
+    expect(blossom).toBeDefined();
+    expect(typeof blossom.uploadBlob).toBe("function");
+    expect(typeof blossom.buildAuthEvent).toBe("function");
+  });
+
+  it("exposes the four Blossom servers, primary first", () => {
+    expect(blossom.BLOSSOM_SERVERS).toEqual([
+      "https://blossom.band",
+      "https://blossom.nostr.build",
+      "https://nostr.download",
+      "https://cdn.nostrcheck.me",
+    ]);
+  });
+});
+
+describe("buildAuthEvent", () => {
+  const sha = "ab".repeat(32); // 64 lowercase hex chars
+
+  it("builds the kind-24242 'Upload Blob' template with the right tags", () => {
+    const now = 1_700_000_000;
+    const ev = blossom.buildAuthEvent(sha, now);
+    expect(ev.kind).toBe(24242);
+    expect(ev.created_at).toBe(now);
+    expect(ev.content).toBe("Upload Blob");
+    expect(ev.tags).toContainEqual(["t", "upload"]);
+    expect(ev.tags).toContainEqual(["x", sha]);
+    expect(ev.tags).toContainEqual(["expiration", String(now + 300)]);
+  });
+
+  it("stamps created_at at the given second and never in the future", () => {
+    const now = Math.floor(Date.now() / 1000);
+    const ev = blossom.buildAuthEvent(sha, now);
+    expect(ev.created_at).toBe(now);
+    expect(ev.created_at).toBeLessThanOrEqual(Math.floor(Date.now() / 1000));
+    // expiration is strictly after created_at.
+    const exp = ev.tags.find((t) => t[0] === "expiration")!;
+    expect(Number(exp[1])).toBeGreaterThan(ev.created_at);
+  });
+});
+
+describe("encodeAuthHeader", () => {
+  it("produces 'Nostr <base64url-no-pad>' that decodes back to the event", () => {
+    const signed = {
+      id: "f".repeat(64),
+      pubkey: "0".repeat(64),
+      kind: 24242,
+      created_at: 1_700_000_000,
+      content: "Upload Blob",
+      tags: [["t", "upload"]],
+      sig: "1".repeat(128),
+    };
+    const header = blossom.encodeAuthHeader(signed);
+    expect(header.slice(0, 6)).toBe("Nostr ");
+    // Exactly one space after "Nostr".
+    expect(header[6]).not.toBe(" ");
+    const b64url = header.slice(6);
+    // base64url alphabet, no padding.
+    expect(b64url).not.toMatch(/[+/=]/);
+    expect(JSON.parse(fromBase64Url(b64url))).toEqual(signed);
+  });
+});
+
+describe("validateFile", () => {
+  const allowed = ["image/png", "image/jpeg", "image/webp", "image/gif"];
+
+  it("accepts each allowed image type under the cap", () => {
+    for (const type of allowed) {
+      expect(blossom.validateFile({ type, size: 1024 }).ok).toBe(true);
+    }
+  });
+
+  it("rejects an oversized file", () => {
+    const res = blossom.validateFile({
+      type: "image/png",
+      size: 21 * 1024 * 1024,
+    });
+    expect(res.ok).toBe(false);
+    expect(res.reason).toMatch(/large/i);
+  });
+
+  it("honors a custom maxBytes", () => {
+    expect(
+      blossom.validateFile({ type: "image/png", size: 100 }, { maxBytes: 50 })
+        .ok,
+    ).toBe(false);
+    expect(
+      blossom.validateFile({ type: "image/png", size: 40 }, { maxBytes: 50 }).ok,
+    ).toBe(true);
+  });
+
+  it("rejects a disallowed type (incl. svg, which is an XSS vector)", () => {
+    expect(blossom.validateFile({ type: "image/svg+xml", size: 10 }).ok).toBe(
+      false,
+    );
+    expect(blossom.validateFile({ type: "application/pdf", size: 10 }).ok).toBe(
+      false,
+    );
+  });
+
+  it("rejects empty and zero-size files", () => {
+    expect(blossom.validateFile({ type: "image/png", size: 0 }).ok).toBe(false);
+  });
+
+  it("rejects non-file inputs", () => {
+    expect(blossom.validateFile(null).ok).toBe(false);
+    expect(blossom.validateFile(undefined).ok).toBe(false);
+    expect(blossom.validateFile("not a file").ok).toBe(false);
+    expect(blossom.validateFile({}).ok).toBe(false);
+    expect(blossom.validateFile({ type: "image/png" }).ok).toBe(false);
+    expect(blossom.validateFile({ size: 100 }).ok).toBe(false);
+  });
+});
+
+describe("isHttpsUrl", () => {
+  it("accepts absolute https URLs", () => {
+    expect(blossom.isHttpsUrl("https://blossom.band/abcd.png")).toBe(true);
+    expect(blossom.isHttpsUrl("https://cdn.nostrcheck.me/x")).toBe(true);
+  });
+
+  it("rejects http, javascript:, data:, relative, and empty", () => {
+    expect(blossom.isHttpsUrl("http://blossom.band/x.png")).toBe(false);
+    expect(blossom.isHttpsUrl("javascript:alert(1)")).toBe(false);
+    expect(blossom.isHttpsUrl("data:image/png;base64,AAAA")).toBe(false);
+    expect(blossom.isHttpsUrl("/relative/path.png")).toBe(false);
+    expect(blossom.isHttpsUrl("blossom.band/x.png")).toBe(false);
+    expect(blossom.isHttpsUrl("")).toBe(false);
+    expect(blossom.isHttpsUrl(null)).toBe(false);
+    expect(blossom.isHttpsUrl(undefined)).toBe(false);
+  });
+
+  it("rejects https URLs that would break out of the markdown destination", () => {
+    // A hostile/compromised server can return a string that new URL() parses
+    // as protocol https: but whose ')'/whitespace/newline terminates the
+    // "![](url)" image and injects live attacker markdown after it.
+    expect(
+      blossom.isHttpsUrl("https://evil.com/x.png) [phish](https://evil.com)"),
+    ).toBe(false);
+    expect(blossom.isHttpsUrl("https://evil.com/x.png)\n\n# Injected")).toBe(
+      false,
+    );
+    expect(blossom.isHttpsUrl("https://evil.com/x.png (title)")).toBe(false);
+    expect(blossom.isHttpsUrl("https://evil.com/a b.png")).toBe(false);
+    expect(blossom.isHttpsUrl('https://evil.com/x"y.png')).toBe(false);
+    expect(blossom.isHttpsUrl("https://evil.com/x`y.png")).toBe(false);
+  });
+});
+
+describe("extForType", () => {
+  it("maps known image MIME types to extensions", () => {
+    expect(blossom.extForType("image/png")).toBe("png");
+    expect(blossom.extForType("image/jpeg")).toBe("jpg");
+    expect(blossom.extForType("image/webp")).toBe("webp");
+    expect(blossom.extForType("image/gif")).toBe("gif");
+  });
+
+  it("falls back to 'bin' for anything else", () => {
+    expect(blossom.extForType("application/octet-stream")).toBe("bin");
+    expect(blossom.extForType("")).toBe("bin");
+  });
+});

From bd0295d418a1067f31a79d2019c97036824c76b1 Mon Sep 17 00:00:00 2001
From: sovITxyz <git@sovit.xyz>
Date: Fri, 17 Jul 2026 19:49:39 -0600
Subject: [PATCH 2/3] feat: allow Blossom media servers in the apex connect-src
 CSP

Opens connect-src to the four Blossom origins so browser uploads reach
them; script-src and every other directive are unchanged, and BLOG_CSP
(blog subdomains, JS-free) is untouched. img-src * already covered
displaying the results.
---
 src/middleware/headers.ts        | 10 +++++++++-
 test/integration/headers.spec.ts |  8 ++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/middleware/headers.ts b/src/middleware/headers.ts
index 39b1674..5ae516f 100644
--- a/src/middleware/headers.ts
+++ b/src/middleware/headers.ts
@@ -75,7 +75,15 @@ export const BLOG_CSP =
 export const APEX_CSP =
   "default-src 'none'; script-src 'self' https://challenges.cloudflare.com; " +
   "style-src 'self' 'unsafe-inline'; img-src * data:; media-src *; " +
-  "connect-src 'self' wss:; frame-src https://challenges.cloudflare.com; " +
+  // connect-src: 'self' (login/preview/mirror fetches) + wss: (client-side
+  // relay broadcast to user-chosen relays) + the four Blossom media servers
+  // the editor uploads images to via browser PUT (BUD-02 /upload, BUD-04
+  // /mirror). These are XHR/fetch destinations only, NOT script sources
+  // (script-src is untouched); img-src * already covers displaying the
+  // resulting image URLs on any host.
+  "connect-src 'self' wss: https://blossom.band https://blossom.nostr.build " +
+  "https://nostr.download https://cdn.nostrcheck.me; " +
+  "frame-src https://challenges.cloudflare.com; " +
   "form-action 'self'; base-uri 'none'; frame-ancestors 'none'";
 
 /** Referrer policy applied to every response (both host classes). */
diff --git a/test/integration/headers.spec.ts b/test/integration/headers.spec.ts
index c4719ee..75d6d35 100644
--- a/test/integration/headers.spec.ts
+++ b/test/integration/headers.spec.ts
@@ -85,8 +85,12 @@ describe("apex class", () => {
     // The CSP must actually permit what the page uses: same-origin scripts.
     expect(await res.text()).toContain('src="/js/login.js"');
     expect(APEX_CSP).toContain("script-src 'self'");
-    // …and the editor's relay broadcast (wss:) + same-origin fetches.
-    expect(APEX_CSP).toContain("connect-src 'self' wss:");
+    // …and the editor's relay broadcast (wss:) + same-origin fetches + the
+    // four Blossom media servers the editor uploads images to (browser PUT).
+    expect(APEX_CSP).toContain(
+      "connect-src 'self' wss: https://blossom.band https://blossom.nostr.build " +
+        "https://nostr.download https://cdn.nostrcheck.me;",
+    );
     // …and the Turnstile script + iframe on the dashboard claim form.
     expect(APEX_CSP).toContain("https://challenges.cloudflare.com");
   });

From a9b4f21bf625803c51d2c04c465c8e74a4b14a73 Mon Sep 17 00:00:00 2001
From: sovITxyz <git@sovit.xyz>
Date: Fri, 17 Jul 2026 19:49:39 -0600
Subject: [PATCH 3/3] docs: document editor image upload (Blossom)

---
 docs/manual-signer-tests.md | 27 +++++++++++++++++++++++++++
 public/js/README.md         |  7 ++++++-
 src/views/main/docs.tsx     |  7 +++++++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/docs/manual-signer-tests.md b/docs/manual-signer-tests.md
index 67671d0..f28d03b 100644
--- a/docs/manual-signer-tests.md
+++ b/docs/manual-signer-tests.md
@@ -165,3 +165,30 @@ allowlist. Uses [`nak`](https://github.com/fiatjaf/nak) (any NIP-01 CLI works).
       on a third-party long-form reader (e.g. habla.news) configured to include
       `wss://nbread.lol/relay`, and confirm it loads the nbread-hosted 30023 —
       reads are open (no auth) to anyone.
+
+## 9. Image upload (Blossom)
+
+Uploads go direct from the browser to public Blossom servers, authorized
+with a `NbreadSigner`-signed kind 24242 event. Run with an in-page signer
+(NIP-07 extension, NIP-46 remote, or pasted local key) unless noted.
+
+- [ ] **Button upload**: in the editor, click the image button and pick a
+      PNG → it uploads and inserts `![](https://blossom.band/…)`; the Preview
+      tab renders the image, and it renders on the published post too.
+- [ ] **Drag & drop**: drag an image file onto the editor textarea → same
+      insert + render as above.
+- [ ] **Paste**: copy an image to the clipboard and paste into the editor →
+      same insert + render.
+- [ ] **Oversized rejected**: try a file larger than 20 MiB → rejected
+      client-side with an error, nothing inserted, no upload request sent.
+- [ ] **Non-image rejected**: try a `.txt`/`.pdf` → rejected client-side,
+      nothing inserted.
+- [ ] **NIP-55 fallback (Amber on Android)**: with the Amber redirect
+      signer, the image button does NOT attempt an upload (signing would
+      navigate away) — it falls back to prompting for / inserting an image
+      URL instead.
+- [ ] **Devtools audit**: open Network, upload an image, and confirm the
+      `PUT` goes to a Blossom origin (`blossom.band` or a mirror) with an
+      `Authorization: Nostr …` header, and that the strict CSP
+      (`script-src 'self'`) does not block the upload (the connect/img
+      origins are allowed).
diff --git a/public/js/README.md b/public/js/README.md
index 4325bff..ff064df 100644
--- a/public/js/README.md
+++ b/public/js/README.md
@@ -27,6 +27,9 @@ time, no runtime dependencies — every file is a plain IIFE served as-is):
   `nbread:preview-requested` event (dispatched by the Preview tab),
   caches the last previewed value, and calls
   `window.NbreadDraft.clear()` after a successful publish/delete.
+- `blossom.js` — image upload to public Blossom servers (BUD PUT
+  `/upload` + BUD-04 `/mirror`) authorized with an `NbreadSigner`-signed
+  kind-24242 event; loads after `signer.js` and before `editor-toolbar.js`.
 - `editor-md.js` — DOM-free markdown text-manipulation core
   (`globalThis.NbreadEditorMd`): every helper maps
   `(value, selStart, selEnd, ...)` to a
@@ -42,7 +45,9 @@ time, no runtime dependencies — every file is a plain IIFE served as-is):
 Load order matters (classic `<script src>` tags, no modules). The signer
 stack always loads first: `vendor/nostr-crypto.js` → `signer-core.js` →
 `signer.js` → `signer-nip46.js`. The login page then adds `login.js`; the
-editor page adds `editor-md.js` → `editor-toolbar.js` → `editor.js`.
+editor page adds `blossom.js` → `editor-md.js` → `editor-toolbar.js` →
+`editor.js` (`blossom.js` after the signer stack, before
+`editor-toolbar.js`).
 
 ## vendor/
 
diff --git a/src/views/main/docs.tsx b/src/views/main/docs.tsx
index 51adcef..3b27df7 100644
--- a/src/views/main/docs.tsx
+++ b/src/views/main/docs.tsx
@@ -48,6 +48,13 @@ export function DocsPage() {
           Nostr client — the blog syncs from your relays within about 15
           minutes.
         </p>
+        <p>
+          Add images with the editor's image button, or by dragging or pasting
+          one straight into the editor. Images upload to public Blossom servers
+          (blossom.band plus a few mirrors for redundancy) and are inserted as
+          markdown. On the Amber-on-Android signer, uploads can't be signed
+          in-page, so paste an image URL instead.
+        </p>
 
         <h2>Your blog</h2>
         <p>