feat: add user screenshot redaction

Author: neonwatty

docs/website/configuration.mdx

@@ -147,9 +147,11 @@ Control how screenshots are collected during the feedback flow.
 
 ### Screenshot Modes
 
-- **`optional`** -- Shows the screenshot checkbox checked by default. Users can choose full page, element, area, annotate, or skip.
-- **`auto`** -- Automatically captures a full-page screenshot after the form is submitted, without showing the manual screenshot picker.
-- **`required`** -- Requires a screenshot before submission. Users can choose full page, element, or area, but cannot skip the screenshot step.
+- **`optional`** -- Shows the screenshot checkbox checked by default. Users can choose full page, element, area, annotate, redact, or skip.
+- **`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.
 
 ```html
 <!-- Automatically attach a full-page screenshot -->

docs/website/faq.mdx

@@ -45,12 +45,13 @@ Since BugDrop uses Shadow DOM for isolation, it does not conflict with any frame
 BugDrop uses [html2canvas](https://html2canvas.hertzen.com/) 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
-2. The canvas is converted to a PNG image
-3. The image is sent to the BugDrop API along with the form submission
-4. The API commits the image to the `bugdrop-screenshots` branch in your GitHub repository
-5. A link to the screenshot is included in the GitHub Issue
+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
+5. The API commits the image to the `bugdrop-screenshots` branch in your GitHub repository
+6. A link to the screenshot is included in the GitHub Issue
 
-No server-side rendering or page access is involved. The screenshot captures exactly what the user sees in their browser at the time of submission.
+No server-side rendering or page access is involved. The initial capture is rendered from the current page in the user's browser. In manual flows, the submitted PNG may include user annotations or opaque redaction blocks. Auto screenshots upload without a user redaction step.
 
 ### Are screenshots stored securely?
 

docs/website/security.mdx

@@ -55,9 +55,12 @@ Treat screenshots as unauthenticated user-generated content. The hosted service
 
 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:
 
-- The screenshot captures what the user actually sees
+- 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.
 
 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.
 

e2e/widget.live.spec.ts

@@ -82,6 +82,19 @@ async function openScreenshotOptions(page: Page, title: string) {
   return host;
 }
 
+async function trackLiveFeedbackPayloads(page: Page) {
+  const payloads: Array<Record<string, unknown>> = [];
+  await page.route('**/feedback', async route => {
+    payloads.push(route.request().postDataJSON());
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ success: true, issueNumber: 1, issueUrl: '#', isPublic: false }),
+    });
+  });
+  return payloads;
+}
+
 async function countRedPixelsInRegion(
   canvas: Locator,
   region: { left: number; top: number; right: number; bottom: number }
@@ -118,6 +131,93 @@ async function countRedPixelsInRegion(
   }, region);
 }
 
+async function countBlackPixelsInRegion(
+  canvas: Locator,
+  region: { left: number; top: number; right: number; bottom: number }
+) {
+  return canvas.evaluate((el, targetRegion) => {
+    const source = el as HTMLCanvasElement;
+    const ctx = source.getContext('2d');
+    if (!ctx) {
+      throw new Error('Missing canvas context');
+    }
+
+    const xStart = Math.floor(source.width * targetRegion.left);
+    const xEnd = Math.ceil(source.width * targetRegion.right);
+    const yStart = Math.floor(source.height * targetRegion.top);
+    const yEnd = Math.ceil(source.height * targetRegion.bottom);
+    const { data, width } = ctx.getImageData(xStart, yStart, xEnd - xStart, yEnd - yStart);
+    let black = 0;
+
+    for (let y = 0; y < yEnd - yStart; y++) {
+      for (let x = 0; x < width; x++) {
+        const i = (y * width + x) * 4;
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const a = data[i + 3];
+
+        if (a > 200 && r < 20 && g < 20 && b < 20) {
+          black++;
+        }
+      }
+    }
+
+    return black;
+  }, region);
+}
+
+async function countBlackPixelsInDataUrl(
+  page: Page,
+  dataUrl: string,
+  region: { left: number; top: number; right: number; bottom: number }
+) {
+  return page.evaluate(
+    async target => {
+      const img = new Image();
+      await new Promise<void>((resolve, reject) => {
+        img.onload = () => resolve();
+        img.onerror = () => reject(new Error('Failed to load screenshot payload'));
+        img.src = target.dataUrl;
+      });
+
+      const source = document.createElement('canvas');
+      source.width = img.width;
+      source.height = img.height;
+      const ctx = source.getContext('2d');
+      if (!ctx) {
+        throw new Error('Missing canvas context');
+      }
+
+      ctx.drawImage(img, 0, 0);
+
+      const xStart = Math.floor(source.width * target.region.left);
+      const xEnd = Math.ceil(source.width * target.region.right);
+      const yStart = Math.floor(source.height * target.region.top);
+      const yEnd = Math.ceil(source.height * target.region.bottom);
+      const { data, width } = ctx.getImageData(xStart, yStart, xEnd - xStart, yEnd - yStart);
+      let black = 0;
+
+      for (let y = 0; y < yEnd - yStart; y++) {
+        for (let x = 0; x < width; x++) {
+          const i = (y * width + x) * 4;
+          const r = data[i];
+          const g = data[i + 1];
+          const b = data[i + 2];
+          const a = data[i + 3];
+
+          if (a > 200 && r < 20 && g < 20 && b < 20) {
+            black++;
+          }
+        }
+      }
+
+      return black;
+    },
+    { dataUrl, region }
+  );
+}
+
 async function dragOnCanvas(
   page: Page,
   canvas: Locator,
@@ -422,6 +522,49 @@ test.describe('Screenshot Capture (Live)', () => {
     expect(await countRedPixelsInRegion(canvas, firstRegion)).toBeGreaterThan(20);
     expect(await countRedPixelsInRegion(canvas, latestRegion)).toBeLessThan(5);
   });
+
+  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"]');
+    await expect(captureBtn).toBeVisible({ timeout: 5_000 });
+    await captureBtn.click();
+
+    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 host.locator('css=[data-tool="redact"]').click();
+    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 });
+
+    const firstRegion = { left: 0.1, top: 0.18, right: 0.48, bottom: 0.78 };
+    const latestRegion = { left: 0.52, top: 0.18, right: 0.9, bottom: 0.78 };
+
+    expect(await countBlackPixelsInRegion(canvas, firstRegion)).toBeGreaterThan(1000);
+    expect(await countBlackPixelsInRegion(canvas, latestRegion)).toBeGreaterThan(1000);
+
+    await host.locator('css=[data-action="undo"]').click();
+
+    expect(await countBlackPixelsInRegion(canvas, firstRegion)).toBeGreaterThan(1000);
+    expect(await countBlackPixelsInRegion(canvas, latestRegion)).toBeLessThan(20);
+
+    await host.locator('css=[data-action="done"]').click();
+    await expect(host.locator('css=.bd-success-icon')).toBeVisible({ timeout: 10_000 });
+
+    expect(payloads).toHaveLength(1);
+    const submittedScreenshot = payloads[0].screenshot;
+    expect(typeof submittedScreenshot).toBe('string');
+    expect(
+      await countBlackPixelsInDataUrl(page, submittedScreenshot as string, firstRegion)
+    ).toBeGreaterThan(1000);
+    expect(
+      await countBlackPixelsInDataUrl(page, submittedScreenshot as string, latestRegion)
+    ).toBeLessThan(20);
+  });
 });
 
 test.describe('Feedback Submission (Live)', () => {