diff --git a/components/profile-modal.html b/components/profile-modal.html index a677f88d..fd9bb6e3 100644 --- a/components/profile-modal.html +++ b/components/profile-modal.html @@ -973,7 +973,7 @@ - @@ -1875,10 +1875,8 @@

- Backblaze B2's web console CORS presets ("Share everything…") only allow - downloads. Uploading from your browser uses an S3 - PUT/POST, which needs the custom - rules below. Backblaze can only apply custom rules via its command-line tool. + Uploading from your browser uses an S3 PUT/POST, + which your bucket must allow via CORS.

@@ -1897,7 +1895,7 @@
- Apply it (B2 command-line tool) + Apply it @@ -1905,18 +1903,7 @@
-
    -
  1. Install Backblaze's B2 CLI (pip install b2) on your computer.
    2. -
  2. Run the command above (it authorizes with your key, then sets the rules).
    3. -
  3. Wait ~1 minute, then retry your upload in bitvid.
    4. -
- -

- Prefer the web console? Its presets are fine for playback of - already-uploaded files — only browser uploads need the custom - rules above. (Tip: a B2 application key with the writeBucketCors - capability lets bitvid set this for you automatically when you Save.) -

+

diff --git a/js/ui/profileModal/ProfileStorageController.js b/js/ui/profileModal/ProfileStorageController.js index 65e47d10..000c6b9c 100644 --- a/js/ui/profileModal/ProfileStorageController.js +++ b/js/ui/profileModal/ProfileStorageController.js @@ -35,9 +35,12 @@ export class ProfileStorageController { this.storageR2Helper = null; this.storageB2Helper = null; this.storageS3Helper = null; - // CORS setup helper modal (B2 / Custom S3) — owns its own DOM + behavior. + // Provider-aware CORS setup helper modal — owns its own DOM + behavior. this.corsHelp = new StorageCorsHelp({ + getProvider: () => this.storageProviderInput?.value || "cloudflare_r2", getBucket: () => this.storageBucketInput?.value?.trim() || "", + getRegion: () => this.storageRegionInput?.value?.trim() || "", + getEndpoint: () => this.storageEndpointInput?.value?.trim() || "", }); this.storageForcePathStyleInput = null; this.storageForcePathStyleLabel = null; @@ -447,7 +450,6 @@ export class ProfileStorageController { } } - // Region matters for B2 (drives the endpoint) and AWS-style S3; nudge the example. if (this.storageRegionInput && isB2) { this.storageRegionInput.placeholder = "us-west-004"; } else if (this.storageRegionInput) { @@ -480,8 +482,7 @@ export class ProfileStorageController { ); } - // Manual CORS helper is for S3-compatible providers (B2 / Custom S3), not R2. - this.corsHelp.setVisible(!isR2); + this.corsHelp.setVisible(true); // provider-aware; useful for all bucket providers } getStorageUnlockFailureMessage(error) { @@ -814,8 +815,7 @@ export class ProfileStorageController { secretAccessKey, bucket, forcePathStyle, - // Honor an explicit Public Access URL (custom domain / CDN); when blank, - // validateS3Connection derives it from the endpoint + bucket. + // Explicit Public Access URL (custom domain/CDN); blank → derived. publicBaseUrl: prefix || undefined, origins: getCorsOrigins(), }); diff --git a/js/ui/profileModal/storageCorsHelp.js b/js/ui/profileModal/storageCorsHelp.js index b62b8aca..616dab06 100644 --- a/js/ui/profileModal/storageCorsHelp.js +++ b/js/ui/profileModal/storageCorsHelp.js @@ -1,17 +1,19 @@ -// Storage CORS setup helper (B2 / S3-compatible providers). +// Storage CORS setup helper (all bucket providers). // // Browser uploads to a bucket use an S3 PUT/POST, which the bucket must allow via -// CORS. Backblaze B2's web-console presets only "share" (download) files, so uploads -// stay CORS-blocked until custom rules are applied with B2's CLI. This module renders -// a small modal with the exact rules (origins pre-filled) + the command to apply them. +// CORS. bitvid tries to set this for you on Save, but that needs a key with CORS-write +// permission and a provider that allows it (Backblaze B2's web presets, for example, +// only "share" downloads). This module renders a small, PROVIDER-AWARE modal with the +// exact rules (origins pre-filled) + how to apply them for the selected provider. import { devLogger } from "../../utils/logger.js"; -import { getCorsOrigins } from "../../services/s3Service.js"; +import { deriveB2Endpoint, getCorsOrigins } from "../../services/s3Service.js"; -// The CORS rules bitvid needs for in-browser uploads + ranged playback, in B2's -// native rules shape. Mirrors ensureBucketCors (GET/HEAD/PUT/POST/DELETE + ranged- -// playback expose headers) but adds the upload operations the B2 web-console presets -// omit (they only share downloads). +const PROVIDER_B2 = "backblaze_b2"; +const PROVIDER_R2 = "cloudflare_r2"; + +// Backblaze B2 native rules (corsRuleName + allowedOperations). The web-console +// presets omit the upload operations (s3_put/s3_post), which is why uploads fail. export function buildBucketCorsRules(origins) { const allowedOrigins = Array.isArray(origins) && origins.length ? origins : ["*"]; @@ -27,21 +29,102 @@ export function buildBucketCorsRules(origins) { ]; } -// The exact B2 CLI command that applies the rules (the path B2's web console points -// custom-rule users to). Compact JSON so it pastes as one line. +// Standard S3 CORSConfiguration — accepted by the AWS CLI, S3-compatible provider +// dashboards, and Cloudflare R2's CORS-policy editor. (OPTIONS is implicit in S3 CORS +// and not a valid AllowedMethod, so it's omitted on purpose.) +export function buildS3CorsConfig(origins) { + const allowedOrigins = + Array.isArray(origins) && origins.length ? origins : ["*"]; + return { + CORSRules: [ + { + AllowedOrigins: allowedOrigins, + AllowedMethods: ["GET", "HEAD", "PUT", "POST", "DELETE"], + AllowedHeaders: ["*"], + ExposeHeaders: ["ETag", "Content-Length", "Content-Range", "Accept-Ranges"], + MaxAgeSeconds: 3600, + }, + ], + }; +} + +// B2 CLI command (the path B2's web console points custom-rule users to). export function buildB2CorsCommand(bucket, rules) { const bucketName = (bucket && bucket.trim()) || "YOUR_BUCKET"; - const compact = JSON.stringify(rules); - return `b2 update-bucket --corsRules '${compact}' ${bucketName} allPublic`; + return `b2 update-bucket --corsRules '${JSON.stringify(rules)}' ${bucketName} allPublic`; +} + +// AWS CLI command against the provider's S3 endpoint (works for Custom S3 and R2). +export function buildAwsCorsCommand(bucket, endpoint, config) { + const bucketName = (bucket && bucket.trim()) || "YOUR_BUCKET"; + const ep = endpoint && endpoint.trim() ? ` --endpoint-url ${endpoint.trim()}` : ""; + return `aws s3api put-bucket-cors --bucket ${bucketName}${ep} --cors-configuration '${JSON.stringify(config)}'`; +} + +function resolveEndpointForCors(provider, region, rawEndpoint) { + if (provider === PROVIDER_B2) { + return deriveB2Endpoint(region); + } + if (provider === PROVIDER_R2) { + return rawEndpoint ? `https://${rawEndpoint}.r2.cloudflarestorage.com` : ""; + } + return rawEndpoint || ""; +} + +// Build the provider-specific modal content (intro / JSON / command + label / notes). +export function buildCorsHelpContent({ provider, origins, bucket, endpoint } = {}) { + if (provider === PROVIDER_B2) { + const rules = buildBucketCorsRules(origins); + return { + intro: + "Backblaze B2's web-console CORS presets (\"Share everything…\") only allow " + + "downloads. Uploading from your browser needs the custom rules below, applied " + + "with B2's command-line tool.", + json: JSON.stringify(rules, null, 2), + cmdLabel: "Apply it (B2 command-line tool)", + cmd: buildB2CorsCommand(bucket, rules), + notes: + "1. Install the B2 CLI (pip install b2).\n" + + "2. Run the command above (it authorizes, then sets the rules).\n" + + "3. Wait ~1 minute, then retry your upload.\n" + + "Tip: a B2 application key with the writeBucketCors capability lets bitvid set " + + "this for you automatically on Save.", + }; + } + + const isR2 = provider === PROVIDER_R2; + const config = buildS3CorsConfig(origins); + return { + intro: + "bitvid tries to set CORS for you when you Save. If uploads still fail (the key " + + "lacks CORS-write permission, or your provider needs it set manually), apply the " + + "rules below.", + json: JSON.stringify(config, null, 2), + cmdLabel: isR2 + ? "Apply it (Cloudflare dashboard, or AWS CLI)" + : "Apply it (provider dashboard, or AWS CLI)", + cmd: buildAwsCorsCommand(bucket, endpoint, config), + notes: isR2 + ? "Cloudflare dashboard: R2 → your bucket → Settings → CORS Policy → paste the JSON.\n" + + "Or run the AWS CLI command above (it targets your R2 endpoint)." + : "Paste the JSON into your provider's bucket CORS settings, or run the AWS CLI " + + "command above against your endpoint.", + }; } export class StorageCorsHelp { - constructor({ getBucket } = {}) { + constructor({ getProvider, getBucket, getRegion, getEndpoint } = {}) { + this.getProvider = typeof getProvider === "function" ? getProvider : () => ""; this.getBucket = typeof getBucket === "function" ? getBucket : () => ""; + this.getRegion = typeof getRegion === "function" ? getRegion : () => ""; + this.getEndpoint = typeof getEndpoint === "function" ? getEndpoint : () => ""; this.helpBtn = null; this.modal = null; + this.introEl = null; this.jsonEl = null; this.cliEl = null; + this.cmdLabelEl = null; + this.notesEl = null; this.copyJsonBtn = null; this.copyCmdBtn = null; } @@ -49,8 +132,11 @@ export class StorageCorsHelp { cacheDom(doc = document) { this.helpBtn = doc.getElementById("storageCorsHelpBtn") || null; this.modal = doc.getElementById("storageCorsModal") || null; + this.introEl = doc.getElementById("storageCorsModalIntro") || null; this.jsonEl = doc.getElementById("storageCorsJson") || null; this.cliEl = doc.getElementById("storageCorsCli") || null; + this.cmdLabelEl = doc.getElementById("storageCorsCmdLabel") || null; + this.notesEl = doc.getElementById("storageCorsNotes") || null; this.copyJsonBtn = doc.getElementById("storageCorsCopyJsonBtn") || null; this.copyCmdBtn = doc.getElementById("storageCorsCopyCmdBtn") || null; } @@ -81,8 +167,6 @@ export class StorageCorsHelp { } } - // R2 auto-applies CORS via its own flow; the manual helper is for the S3-compatible - // providers (B2 / Custom S3) where the bucket owner sets it. setVisible(show) { if (this.helpBtn instanceof HTMLElement) { this.helpBtn.classList.toggle("hidden", !show); @@ -99,13 +183,20 @@ export class StorageCorsHelp { } catch (error) { origins = []; } - const rules = buildBucketCorsRules(origins); - if (this.jsonEl) { - this.jsonEl.textContent = JSON.stringify(rules, null, 2); - } - if (this.cliEl) { - this.cliEl.textContent = buildB2CorsCommand(this.getBucket(), rules); - } + const provider = this.getProvider(); + const content = buildCorsHelpContent({ + provider, + origins, + bucket: this.getBucket(), + endpoint: resolveEndpointForCors(provider, this.getRegion(), this.getEndpoint()), + }); + + if (this.introEl) this.introEl.textContent = content.intro; + if (this.jsonEl) this.jsonEl.textContent = content.json; + if (this.cmdLabelEl) this.cmdLabelEl.textContent = content.cmdLabel; + if (this.cliEl) this.cliEl.textContent = content.cmd; + if (this.notesEl) this.notesEl.textContent = content.notes; + this.modal.classList.remove("hidden"); const sheet = this.modal.querySelector(".modal-sheet"); if (sheet instanceof HTMLElement) { diff --git a/tests/storage-cors-help.test.mjs b/tests/storage-cors-help.test.mjs index 8750d5b6..fb77e210 100644 --- a/tests/storage-cors-help.test.mjs +++ b/tests/storage-cors-help.test.mjs @@ -1,29 +1,35 @@ -// Storage CORS setup helper (B2 / S3-compatible): the rules + command bitvid shows a -// user so in-browser uploads work. The crucial property: the rules include the UPLOAD -// operations (s3_put / s3_post) that B2's web-console "share" presets omit — that gap -// is exactly why uploads CORS-fail until these custom rules are applied. +// Provider-aware storage CORS setup helper. The helper must give the RIGHT rules + +// apply-command for each provider: B2-native rules + the b2 CLI for Backblaze B2, and +// standard S3 CORS + AWS CLI / dashboard guidance for Custom S3 and Cloudflare R2. +// The invariant across all of them: the rules allow browser uploads (PUT/POST), which +// is what makes uploads stop CORS-failing. import test, { beforeEach, afterEach } from "node:test"; import { strict as assert } from "node:assert"; import { JSDOM } from "jsdom"; import { buildBucketCorsRules, + buildS3CorsConfig, buildB2CorsCommand, + buildAwsCorsCommand, + buildCorsHelpContent, StorageCorsHelp, } from "../js/ui/profileModal/storageCorsHelp.js"; -test("CORS rules include the upload operations the B2 presets omit", () => { +test("B2-native rules include the upload operations the B2 presets omit", () => { const [rule] = buildBucketCorsRules(["https://bitvid.network"]); - for (const op of ["s3_put", "s3_post"]) { - assert.ok( - rule.allowedOperations.includes(op), - `rule must allow ${op} (browser upload) — the whole point of this helper`, - ); - } - // ...and still allow ranged playback reads. + assert.ok(rule.allowedOperations.includes("s3_put")); + assert.ok(rule.allowedOperations.includes("s3_post")); assert.ok(rule.allowedOperations.includes("s3_get")); - assert.ok(rule.allowedOperations.includes("s3_head")); - assert.deepEqual(rule.exposeHeaders, [ +}); + +test("standard S3 CORS config allows upload + ranged playback methods", () => { + const cfg = buildS3CorsConfig(["https://bitvid.network"]); + const rule = cfg.CORSRules[0]; + assert.deepEqual(rule.AllowedMethods, ["GET", "HEAD", "PUT", "POST", "DELETE"]); + // OPTIONS is not a valid S3 AllowedMethod and must not be present. + assert.ok(!rule.AllowedMethods.includes("OPTIONS")); + assert.deepEqual(rule.ExposeHeaders, [ "ETag", "Content-Length", "Content-Range", @@ -31,41 +37,83 @@ test("CORS rules include the upload operations the B2 presets omit", () => { ]); }); -test("CORS rules use the given origins, and fall back to every-origin when none", () => { - assert.deepEqual( - buildBucketCorsRules(["https://a.example", "https://b.example"])[0] - .allowedOrigins, - ["https://a.example", "https://b.example"], - ); +test("origins fall back to every-origin when none are provided", () => { assert.deepEqual(buildBucketCorsRules([])[0].allowedOrigins, ["*"]); - assert.deepEqual(buildBucketCorsRules(undefined)[0].allowedOrigins, ["*"]); + assert.deepEqual(buildS3CorsConfig(undefined).CORSRules[0].AllowedOrigins, ["*"]); }); -test("the B2 CLI command targets the bucket as allPublic with compact one-line JSON", () => { - const rules = buildBucketCorsRules(["https://bitvid.network"]); - const cmd = buildB2CorsCommand("bitvid", rules); +test("B2 command targets the bucket allPublic with compact one-line JSON", () => { + const cmd = buildB2CorsCommand("bitvid", buildBucketCorsRules(["https://x"])); assert.match(cmd, /^b2 update-bucket --corsRules '.*' bitvid allPublic$/); - assert.ok(!cmd.includes("\n"), "command must be a single pasteable line"); - // The embedded JSON is valid and carries the upload op. - const json = cmd.slice(cmd.indexOf("'") + 1, cmd.lastIndexOf("'")); - assert.ok(JSON.parse(json)[0].allowedOperations.includes("s3_put")); + assert.ok(!cmd.includes("\n")); }); -test("a missing bucket name degrades to an obvious placeholder (not an empty arg)", () => { - assert.match(buildB2CorsCommand("", buildBucketCorsRules([])), /YOUR_BUCKET allPublic$/); +test("AWS command includes the endpoint + bucket, one line", () => { + const cmd = buildAwsCorsCommand( + "vids", + "https://s3.example.com", + buildS3CorsConfig(["https://x"]), + ); + assert.match( + cmd, + /^aws s3api put-bucket-cors --bucket vids --endpoint-url https:\/\/s3\.example\.com --cors-configuration '.*'$/, + ); }); -// --- DOM behavior --- +test("content for Backblaze B2 uses B2-native rules + the b2 CLI", () => { + const c = buildCorsHelpContent({ + provider: "backblaze_b2", + origins: ["https://bitvid.network"], + bucket: "bitvid", + endpoint: "https://s3.us-west-004.backblazeb2.com", + }); + assert.match(c.cmd, /^b2 update-bucket /); + assert.match(c.cmdLabel, /B2 command-line/i); + assert.ok(JSON.parse(c.json)[0].allowedOperations.includes("s3_put")); + assert.match(c.notes, /b2 CLI|pip install b2/i); +}); + +test("content for Custom S3 uses standard S3 CORS + the AWS CLI", () => { + const c = buildCorsHelpContent({ + provider: "generic_s3", + origins: ["https://bitvid.network"], + bucket: "vids", + endpoint: "https://s3.example.com", + }); + assert.match(c.cmd, /^aws s3api put-bucket-cors /); + assert.match(c.cmd, /--endpoint-url https:\/\/s3\.example\.com/); + assert.ok(JSON.parse(c.json).CORSRules[0].AllowedMethods.includes("PUT")); + assert.doesNotMatch(c.cmd, /backblaze|b2 update-bucket/i); +}); + +test("content for Cloudflare R2 uses S3 CORS and points at the R2 dashboard", () => { + const c = buildCorsHelpContent({ + provider: "cloudflare_r2", + origins: ["https://bitvid.network"], + bucket: "vids", + endpoint: "https://acct.r2.cloudflarestorage.com", + }); + assert.match(c.cmd, /^aws s3api put-bucket-cors /); + assert.match(c.notes, /Cloudflare dashboard/i); + assert.match(c.cmdLabel, /Cloudflare/i); + assert.ok(JSON.parse(c.json).CORSRules); +}); + +// --- DOM behavior (provider switch reflected in the modal) --- let dom; beforeEach(() => { dom = new JSDOM( ` - + + @@ -82,30 +130,33 @@ afterEach(() => { delete globalThis.window; }); -test("open() fills the JSON + command from the current origin and reveals the modal", () => { - const help = new StorageCorsHelp({ getBucket: () => "bitvid" }); +test("open() renders provider-specific content and pre-fills the current origin", () => { + let provider = "backblaze_b2"; + const help = new StorageCorsHelp({ + getProvider: () => provider, + getBucket: () => "bitvid", + getRegion: () => "us-west-004", + getEndpoint: () => "", + }); help.cacheDom(dom.window.document); help.registerEventListeners(); help.open(); + const doc = dom.window.document; + assert.ok(!doc.getElementById("storageCorsModal").classList.contains("hidden")); + assert.match(doc.getElementById("storageCorsCli").textContent, /^b2 update-bucket /); + const b2Rule = JSON.parse(doc.getElementById("storageCorsJson").textContent)[0]; + assert.deepEqual(b2Rule.allowedOrigins, ["https://unstable.bitvid.network"]); - const modal = dom.window.document.getElementById("storageCorsModal"); - assert.ok(!modal.classList.contains("hidden"), "modal is shown"); - - const json = dom.window.document.getElementById("storageCorsJson").textContent; - const rule = JSON.parse(json)[0]; - assert.deepEqual( - rule.allowedOrigins, - ["https://unstable.bitvid.network"], - "origins pre-filled from getCorsOrigins()", - ); - - const cli = dom.window.document.getElementById("storageCorsCli").textContent; - assert.match(cli, /bitvid allPublic$/); + // Switch provider → reopening yields the AWS-CLI form. + provider = "generic_s3"; + help.open(); + assert.match(doc.getElementById("storageCorsCli").textContent, /^aws s3api put-bucket-cors /); + assert.ok(JSON.parse(doc.getElementById("storageCorsJson").textContent).CORSRules); }); test("dismiss controls hide the modal again", () => { - const help = new StorageCorsHelp({ getBucket: () => "bitvid" }); + const help = new StorageCorsHelp({ getProvider: () => "generic_s3" }); help.cacheDom(dom.window.document); help.registerEventListeners(); help.open(); @@ -114,13 +165,3 @@ test("dismiss controls hide the modal again", () => { dom.window.document.getElementById("storageCorsModal").classList.contains("hidden"), ); }); - -test("setVisible toggles the help button for S3-compatible vs R2", () => { - const help = new StorageCorsHelp({ getBucket: () => "" }); - help.cacheDom(dom.window.document); - const btn = dom.window.document.getElementById("storageCorsHelpBtn"); - help.setVisible(true); - assert.ok(!btn.classList.contains("hidden")); - help.setVisible(false); - assert.ok(btn.classList.contains("hidden")); -}); diff --git a/todo/TODO_2026-06-20_pre-launch.md b/todo/TODO_2026-06-20_pre-launch.md index 41eb44ed..e2e52fcc 100644 --- a/todo/TODO_2026-06-20_pre-launch.md +++ b/todo/TODO_2026-06-20_pre-launch.md @@ -865,16 +865,24 @@ Reported 2026-06-25. Relates to #17 (NIP-71 interop) / the bitvid→NIP-71 mirro `s3ApiUrl` = `https://s3.us-west-004.backblazeb2.com` = `deriveB2Endpoint("us-west-004")`; bucket is `allPublic` → S3-style playback URL works. Key file caps (read/write/list/delete) ✓. -- [x] **CORS helper modal — DONE 2026-06-30.** Empirically confirmed the gotcha: B2's - web-console "Share everything…" presets write DOWNLOAD-only CORS (`s3_get/s3_head`, - `b2_download_*`) — **no `s3_put/s3_post`** — so browser uploads CORS-fail. Added a - "CORS setup help" button (shown for B2 / Custom S3) opening a modal that shows the - exact B2-native CORS rules JSON (upload + ranged-playback ops, origins pre-filled - from `getCorsOrigins()`) + the `b2 update-bucket --corsRules …` command to apply - them, with copy buttons and step-by-step (incl. the "use a key with - `writeBucketCors` and bitvid sets it for you" tip). Extracted to - `js/ui/profileModal/storageCorsHelp.js` (keeps the controller <1000 lines). Tests: - `tests/storage-cors-help.test.mjs` (8). Build + lint clean. +- [x] **CORS helper modal (provider-aware) — DONE 2026-06-30.** Empirically confirmed + the gotcha: B2's web-console "Share everything…" presets write DOWNLOAD-only CORS + (`s3_get/s3_head`, `b2_download_*`) — **no `s3_put/s3_post`** — so browser uploads + CORS-fail. Added a "CORS setup help" button (shown for **all** bucket providers) + opening a **provider-aware** modal: + - **Backblaze B2** → B2-native rules JSON (upload + ranged-playback ops) + the + `b2 update-bucket --corsRules …` command. + - **Custom S3** → standard S3 `CORSConfiguration` JSON + `aws s3api put-bucket-cors + --endpoint-url …`. + - **Cloudflare R2** → standard S3 JSON + Cloudflare-dashboard guidance (R2 → bucket + → Settings → CORS Policy) and the AWS-CLI command against the derived R2 endpoint. + Origins pre-filled from `getCorsOrigins()`; copy buttons for JSON + command. bitvid + still auto-applies CORS on Save (R2/S3 via `ensureBucketCors`) — this is the manual + fallback for when the key lacks CORS-write permission. Logic in + `js/ui/profileModal/storageCorsHelp.js` (`buildCorsHelpContent` switches on + provider; keeps the controller <1000 lines). Tests: + `tests/storage-cors-help.test.mjs` (10 — per-provider rules/command + DOM switch). + Build + lint clean. - [ ] **VERIFY live** on unstable: pick Backblaze B2, enter region (`us-west-004`) + bucket + key/secret, Test → passes; apply the CORS helper's rules; upload a video → plays from `https://.s3..backblazeb2.com/...`.