feat: improve redaction screenshot ux

Author: neonwatty

.github/workflows/ci.yml

@@ -197,6 +197,12 @@ jobs:
         env:
           VERCEL_AUTOMATION_BYPASS_SECRET: ${{ secrets.VERCEL_AUTOMATION_BYPASS_SECRET }}
 
+      - name: Record expected preview widget asset
+        run: |
+          VERSION=$(git describe --tags --abbrev=0) npm run build:widget
+          echo "EXPECTED_WIDGET_ORIGIN=https://bugdrop-preview.neonwatty.workers.dev" >> "$GITHUB_ENV"
+          echo "EXPECTED_WIDGET_SHA256=$(shasum -a 256 public/widget.js | awk '{print $1}')" >> "$GITHUB_ENV"
+
       - name: Run live E2E tests
         run: npx playwright test --project=chromium-live --workers=1
         env:

.github/workflows/live-tests.yml

@@ -64,6 +64,16 @@ jobs:
         env:
           VERCEL_AUTOMATION_BYPASS_SECRET: ${{ secrets.VERCEL_AUTOMATION_BYPASS_SECRET }}
 
+      - name: Record expected widget asset
+        run: |
+          if [ "$LIVE_TARGET" = "preview" ]; then
+            VERSION=$(git describe --tags --abbrev=0) npm run build:widget
+            echo "EXPECTED_WIDGET_ORIGIN=https://bugdrop-preview.neonwatty.workers.dev" >> "$GITHUB_ENV"
+            echo "EXPECTED_WIDGET_SHA256=$(shasum -a 256 public/widget.js | awk '{print $1}')" >> "$GITHUB_ENV"
+          else
+            echo "EXPECTED_WIDGET_ORIGIN=https://bugdrop.neonwatty.workers.dev" >> "$GITHUB_ENV"
+          fi
+
       - name: Run live E2E tests
         run: npx playwright test --project=chromium-live --workers=1
         env:

README.md

@@ -31,15 +31,15 @@ That's it! Users can now click the bug button to submit feedback as GitHub Issue
 
 > **Important:** Do not add `async` or `defer` to the script tag — the widget needs synchronous loading to read its configuration.
 
-> **CSP note:** If your site uses a Content Security Policy, add `https://cdn.jsdelivr.net` to your `script-src` directive to enable screenshot capture.
+> **CSP note:** If your site uses a Content Security Policy, add `https://bugdrop.neonwatty.workers.dev` to your `script-src` directive to enable the widget.
 
 > **Branch protection:** BugDrop works with repos that have branch protection rules (required PRs, merge queues). Screenshots are stored on a dedicated `bugdrop-screenshots` branch that is auto-created on first use — no manual setup needed.
 
 > **Security note:** BugDrop is not a spam or malware filtering service. Treat feedback and screenshots as unauthenticated user-generated content. Exclude `bugdrop-screenshots` from CI/deploy workflows, and self-host behind your own WAF/CAPTCHA/content controls for stricter environments.
 
 ## Features
 
-- 🔒 **Privacy masking** — tag sensitive elements with `data-bugdrop-mask` and BugDrop covers them in the screenshot before it's submitted. Passwords and credit-card inputs are masked automatically.
+- 🔒 **Privacy masking** — tag sensitive elements with `data-bugdrop-mask` and BugDrop visually covers them in supported screenshot modes before submission. Passwords and credit-card inputs are masked automatically.
 
 ## Widget Options
 
@@ -75,7 +75,7 @@ User clicks bug button → Widget captures screenshot → Worker authenticates v
 ```
 
 1. **Widget** loads in a Shadow DOM (isolated from your page styles)
-2. **Screenshot** captured client-side using html2canvas
+2. **Screenshot** captured client-side using html-to-image
 3. **Worker** (Cloudflare) exchanges GitHub App credentials for an installation token
 4. **GitHub API** creates the issue with the screenshot stored in `.bugdrop/` on a dedicated `bugdrop-screenshots` branch (auto-created on first use)
 

docs/website/configuration.mdx

@@ -218,7 +218,27 @@ Control how screenshots are collected during the feedback flow.
 - **`auto`** -- Automatically captures a full-page screenshot after the form is submitted, without showing the manual screenshot picker or redaction step.
 - **`required`** -- Requires a screenshot before submission. Users can choose full page, element, or area, then annotate or redact before submitting.
 
-Manual redaction is controlled by the person submitting feedback. Use developer-configured masking for fields that should never appear in screenshots, especially with automatic screenshots.
+Manual redaction is controlled by the person submitting feedback. Use developer-configured masking for fields that should be visually covered in supported screenshot modes, especially with automatic screenshots. Auto mode warns users that a full-page screenshot will be attached, but it does not show the manual picker or annotation review step.
+
+### Developer-configured screenshot masking
+
+BugDrop can visually mask fields that your app marks as private before a screenshot is uploaded:
+
+```html
+<input data-bugdrop-redact value="sk_live_..." />
+<section data-bugdrop-mask>Private account details</section>
+```
+
+Supported attributes:
+
+- `data-bugdrop-redact`
+- `data-bd-redact`
+- `data-bugdrop-redacted`
+- `data-bugdrop-mask`
+
+This is best-effort visual masking, not a data-loss-prevention or security boundary. BugDrop can only mask content it can measure in the page DOM. Unmarked sensitive information can still appear, and browser rendering limits can apply to canvas, image, video, iframe, SVG, shadow DOM, pseudo-element, and highly custom control content.
+
+Selected-area screenshots are rendered to the selected dimensions and masks are translated into that crop, but the capture still runs client-side against the page DOM. Avoid screenshots entirely for pages where client-side screenshot rendering is unacceptable.
 
 ```html
 <!-- Automatically attach a full-page screenshot -->

docs/website/faq.mdx

@@ -42,9 +42,9 @@ Since BugDrop uses Shadow DOM for isolation, it does not conflict with any frame
 
 ### How does BugDrop handle screenshots?
 
-BugDrop uses [html2canvas](https://html2canvas.hertzen.com/) to capture screenshots entirely on the client side. When a user clicks the screenshot button:
+BugDrop uses [html-to-image](https://github.com/bubkoo/html-to-image) to capture screenshots entirely on the client side. When a user clicks the screenshot button:
 
-1. html2canvas renders the current page to an HTML Canvas element in the user's browser
+1. html-to-image renders the current page to an HTML Canvas element in the user's browser
 2. In optional and required manual screenshot flows, the user can annotate the screenshot and cover sensitive regions with opaque blocks
 3. The canvas is converted to a PNG image
 4. The image is sent to the BugDrop API along with the form submission
@@ -198,7 +198,7 @@ Check the following:
 
 1. **Verify the script tag** -- Make sure it does not have `async` or `defer` attributes
 2. **Check the console** -- Open your browser's developer console and look for `[BugDrop]` messages or errors
-3. **Check CSP** -- If your site uses a Content Security Policy, make sure `https://bugdrop.neonwatty.workers.dev` and `https://cdn.jsdelivr.net` are allowed in `script-src`
+3. **Check CSP** -- If your site uses a Content Security Policy, make sure `https://bugdrop.neonwatty.workers.dev` is allowed in `script-src`
 4. **Check the repo** -- Ensure `data-repo` matches your GitHub repository path exactly (case-sensitive)
 5. **Check app installation** -- Verify the BugDrop GitHub App is installed on the repository
 
@@ -216,8 +216,8 @@ If the widget appears but submissions fail:
 If issues are created but without screenshots:
 
 1. **Check branch protection** -- The GitHub App needs permission to push to the `bugdrop-screenshots` branch. See the [Installation](/docs/installation) page for details on branch protection configuration.
-2. **Check CSP** -- The html2canvas library is loaded from `cdn.jsdelivr.net`. Make sure it is allowed by your Content Security Policy.
-3. **Cross-origin content** -- html2canvas cannot capture cross-origin iframes or images loaded without CORS headers. These elements may appear blank in the screenshot.
+2. **Check CSP** -- Make sure your Content Security Policy allows the BugDrop widget script.
+3. **Cross-origin content** -- Browser screenshot rendering cannot capture cross-origin iframes or images loaded without CORS headers. These elements may appear blank in the screenshot.
 
 ### Can I use BugDrop on a static site?
 

docs/website/installation.mdx

@@ -73,16 +73,17 @@ See the [Configuration](/docs/configuration) and [Styling](/docs/styling) docs f
 
 ## Protecting sensitive data
 
-If your page renders customer data, billing details, or any other content you do not
-want to appear in submitted screenshots, mark those elements with `data-bugdrop-mask`:
+If your page renders customer data, billing details, or any other content you want
+BugDrop to visually cover in supported screenshot modes, mark those elements with
+`data-bugdrop-mask`:
 
 ```html
 <div class="customer-row" data-bugdrop-mask>
   Jane Doe — jane@acme.com
 </div>
 ```
 
-BugDrop covers each marked element with an opaque rectangle on the captured screenshot.
+BugDrop covers each marked element with an opaque rectangle on supported captured screenshots.
 Password inputs and credit-card autocomplete fields are masked automatically. See
 [Screenshot masking](/security#screenshot-masking) on the Security page for details.
 
@@ -107,13 +108,13 @@ The BugDrop script tag should **not** include the `async` or `defer` attributes.
 
 ### Content Security Policy (CSP)
 
-If your site uses a Content Security Policy, you will need to allow `cdn.jsdelivr.net` in your CSP directives. BugDrop loads the html2canvas library from jsDelivr for screenshot functionality:
+If your site uses a Content Security Policy, allow the BugDrop worker domain in your CSP directives:
 
 ```
-Content-Security-Policy: script-src 'self' https://bugdrop.neonwatty.workers.dev https://cdn.jsdelivr.net;
+Content-Security-Policy: script-src 'self' https://bugdrop.neonwatty.workers.dev;
 ```
 
-If you have a strict CSP, make sure both the BugDrop worker domain and jsDelivr are included in your `script-src` directive.
+If you have a strict CSP, make sure the BugDrop worker domain is included in your `script-src` directive.
 
 ### Branch Protection and the Screenshots Branch
 

docs/website/security.mdx

@@ -53,14 +53,14 @@ Treat screenshots as unauthenticated user-generated content. The hosted service
 
 ### Screenshot Format
 
-Screenshots are captured client-side using [html2canvas](https://html2canvas.hertzen.com/), which renders the current page to a canvas element in the user's browser. The canvas is then converted to a PNG image and uploaded. This means:
+Screenshots are captured client-side using [html-to-image](https://github.com/bubkoo/html-to-image), which renders the current page to a canvas element in the user's browser. The canvas is then converted to a PNG image and uploaded. This means:
 
 - The initial screenshot capture is rendered from what the user actually sees
 - No server-side rendering or page access is required
 - The screenshot is generated entirely in the user's browser before being sent to the API
 - Users can redact additional screenshot regions before submitting when using the manual screenshot flow
 
-Manual redaction is user-driven and does not automatically detect sensitive content. It complements, but does not replace, developer-configured masking for fields that should never appear in screenshots, especially when using automatic screenshots.
+Manual redaction is user-driven and does not automatically detect sensitive content. It complements, but does not replace, developer-configured masking for fields that should be visually covered in supported screenshot modes, especially when using automatic screenshots.
 
 Because clients are untrusted, the API validates screenshot uploads server-side before storing them. BugDrop currently accepts PNG data URLs only and rejects SVG, malformed base64, oversized payloads, and data that does not have a PNG file signature.
 
@@ -78,8 +78,7 @@ BugDrop is built with a privacy-first approach:
 
 ### Screenshot masking
 
-You can mark sensitive elements so they never appear in submitted screenshots. Add the
-`data-bugdrop-mask` attribute to any element you want covered:
+You can mark sensitive elements so BugDrop visually covers them in supported screenshot modes. Add the `data-bugdrop-mask` attribute to any element you want covered:
 
 ```html
 <input type="email" data-bugdrop-mask />
@@ -94,6 +93,10 @@ When a user submits feedback, BugDrop paints an opaque rectangle over each tagge
 element's bounding box on the captured PNG before showing the user the annotator
 preview. The user sees what is masked and can audit it before submitting.
 
+Masking is best-effort visual coverage, not a data-loss-prevention or security
+boundary. Users should still review screenshots before submitting when the manual
+screenshot flow is enabled.
+
 **Inheritance.** When an ancestor has `data-bugdrop-mask`, the entire ancestor box is
 masked as a single rectangle. Descendants do not get individual rectangles — this
 prevents gaps from CSS `gap` or non-masked siblings inside a masked container.
@@ -121,8 +124,7 @@ prevents gaps from CSS `gap` or non-masked siblings inside a masked container.
 The only network requests BugDrop makes are:
 
 1. Loading the widget script from Cloudflare Workers
-2. Loading html2canvas from cdn.jsdelivr.net (for screenshot functionality)
-3. Submitting the feedback form to the BugDrop Cloudflare Worker API
+2. Submitting the feedback form to the BugDrop Cloudflare Worker API
 
 The API acts as a pass-through to the GitHub API -- it receives the form data, creates the issue and uploads the screenshot, and discards the data. Nothing is persisted on the Cloudflare Worker.
 

e2e/widget.live.spec.ts

@@ -1,3 +1,4 @@
+import { createHash } from 'node:crypto';
 import { test, expect, type Locator, type Page } from '@playwright/test';
 
 /**
@@ -13,6 +14,13 @@ import { test, expect, type Locator, type Page } from '@playwright/test';
 // Add Vercel deployment protection bypass headers only to Vercel requests
 // (not globally, which would cause CORS preflight failures on cross-origin APIs)
 const bypassSecret = process.env.VERCEL_AUTOMATION_BYPASS_SECRET;
+const expectedWidgetOrigin =
+  process.env.EXPECTED_WIDGET_ORIGIN ||
+  (process.env.LIVE_TARGET === 'preview'
+    ? 'https://bugdrop-preview.neonwatty.workers.dev'
+    : 'https://bugdrop.neonwatty.workers.dev');
+const expectedWidgetSha256 = process.env.EXPECTED_WIDGET_SHA256;
+
 if (bypassSecret) {
   test.beforeEach(async ({ context }) => {
     await context.route('**/*.vercel.app/**', async route => {
@@ -25,27 +33,8 @@ if (bypassSecret) {
   });
 }
 
-async function mockLiveScreenshotCapture(page: Page) {
-  await page.addInitScript(`window.__bugdropMockToPng = function(el, opts) {
-    window.__captureOpts = opts;
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d');
-    canvas.width = 600;
-    canvas.height = 300;
-    ctx.fillStyle = '#ffffff';
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = '#111827';
-    ctx.font = '600 18px Arial';
-    ctx.fillText('Live preview undo canvas', 24, 38);
-    ctx.fillStyle = '#e5e7eb';
-    ctx.fillRect(36, 82, 210, 128);
-    ctx.fillRect(354, 82, 210, 128);
-    ctx.fillStyle = '#6b7280';
-    ctx.font = '14px Arial';
-    ctx.fillText('First annotation area', 58, 150);
-    ctx.fillText('Latest annotation area', 374, 150);
-    return Promise.resolve(canvas.toDataURL('image/png'));
-  };`);
+function sha256(buffer: Buffer): string {
+  return createHash('sha256').update(buffer).digest('hex');
 }
 
 async function mockInstalledRepo(page: Page) {
@@ -254,6 +243,15 @@ async function dragOnCanvas(
   await page.mouse.up();
 }
 
+async function expectUsableCanvas(canvas: Locator) {
+  await expect
+    .poll(() => canvas.evaluate(el => (el as HTMLCanvasElement).width))
+    .toBeGreaterThan(0);
+  await expect
+    .poll(() => canvas.evaluate(el => (el as HTMLCanvasElement).height))
+    .toBeGreaterThan(0);
+}
+
 test.describe('Widget Loading (Live)', () => {
   test('widget loads and renders on cross-origin site', async ({ page }) => {
     const errors: string[] = [];
@@ -285,17 +283,26 @@ test.describe('Widget Loading (Live)', () => {
     expect(unexpectedErrors).toHaveLength(0);
   });
 
-  test('widget.js is served from the preview worker', async ({ request }) => {
-    const headers: Record<string, string> = {};
-    if (bypassSecret) {
-      headers['x-vercel-protection-bypass'] = bypassSecret;
-    }
-    const response = await request.get('/', { headers });
+  test('venue loads the expected deployed widget asset', async ({ page, request }) => {
+    await page.goto(process.env.LIVE_TARGET === 'preview' ? '/' : '/test/');
+
+    const widgetSrc = await page.evaluate(() => {
+      return (
+        Array.from(document.scripts)
+          .map(script => script.src)
+          .find(src => src.includes('/widget.js')) || ''
+      );
+    });
+
+    expect(widgetSrc).toContain(`${expectedWidgetOrigin}/widget.js`);
+
+    const response = await request.get(widgetSrc);
     expect(response.ok()).toBeTruthy();
 
-    const html = await response.text();
-    // The page should contain a script tag pointing to the bugdrop widget
-    expect(html).toContain('widget.js');
+    if (expectedWidgetSha256) {
+      const body = await response.body();
+      expect(sha256(body)).toBe(expectedWidgetSha256);
+    }
   });
 });
 
@@ -375,9 +382,9 @@ test.describe('Cross-Origin API (Live)', () => {
     // At least one API call should have been made
     expect(apiCalls.length).toBeGreaterThan(0);
 
-    // All API calls should go to the workers.dev domain (not the Vercel domain)
+    // All API calls should go to the expected worker origin (not the Vercel domain)
     for (const url of apiCalls) {
-      expect(url).toContain('workers.dev');
+      expect(url).toContain(expectedWidgetOrigin);
     }
   });
 
@@ -529,7 +536,6 @@ test.describe('Screenshot Capture (Live)', () => {
   });
 
   test('annotation undo works on the deployed preview widget', async ({ page }) => {
-    await mockLiveScreenshotCapture(page);
     const host = await openScreenshotOptions(page, 'Live preview annotation undo');
 
     const captureBtn = host.locator('css=[data-action="capture"]');
@@ -539,7 +545,7 @@ test.describe('Screenshot Capture (Live)', () => {
     const canvas = host.locator('css=#annotation-canvas canvas');
     await expect(host.locator('css=.bd-modal--annotator')).toBeVisible({ timeout: 10_000 });
     await expect(canvas).toBeVisible({ timeout: 10_000 });
-    await expect.poll(() => canvas.evaluate(el => (el as HTMLCanvasElement).width)).toBe(600);
+    await expectUsableCanvas(canvas);
 
     await dragOnCanvas(page, canvas, { x: 0.18, y: 0.28 }, { x: 0.42, y: 0.68 });
     await dragOnCanvas(page, canvas, { x: 0.58, y: 0.28 }, { x: 0.82, y: 0.68 });
@@ -558,7 +564,6 @@ test.describe('Screenshot Capture (Live)', () => {
 
   test('redaction works on the deployed preview widget', async ({ page }) => {
     const payloads = await trackLiveFeedbackPayloads(page);
-    await mockLiveScreenshotCapture(page);
     const host = await openScreenshotOptions(page, 'Live preview redaction');
 
     const captureBtn = host.locator('css=[data-action="capture"]');
@@ -568,7 +573,7 @@ test.describe('Screenshot Capture (Live)', () => {
     const canvas = host.locator('css=#annotation-canvas canvas');
     await expect(host.locator('css=.bd-modal--annotator')).toBeVisible({ timeout: 10_000 });
     await expect(canvas).toBeVisible({ timeout: 10_000 });
-    await expect.poll(() => canvas.evaluate(el => (el as HTMLCanvasElement).width)).toBe(600);
+    await expectUsableCanvas(canvas);
 
     await host.locator('css=[data-tool="redact"]').click();
     await dragOnCanvas(page, canvas, { x: 0.18, y: 0.28 }, { x: 0.42, y: 0.68 });