fix(security): sanitize URL schemes in block payloads, preview, and editors (#46)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: zhawtof

.github/workflows/dependabot-automerge.yml

@@ -17,16 +17,53 @@ jobs:
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
 
+      # Security-sensitive packages are excluded from auto-merge so a
+      # compromised upstream release cannot ship to consumers without a
+      # human eyeballing the diff. These are the packages whose code
+      # directly renders or sanitizes user-controlled content (links,
+      # markdown, block payloads) — a malicious minor release here is
+      # the worst case for our supply-chain posture.
+      - name: Check exclusion list
+        id: excluded
+        env:
+          PACKAGE_NAMES: ${{ steps.metadata.outputs.dependency-names }}
+        run: |
+          set -euo pipefail
+          excluded=false
+          IFS=', ' read -r -a names <<< "$PACKAGE_NAMES"
+          for pkg in "${names[@]}"; do
+            case "$pkg" in
+              slack-blocks-to-jsx|react-markdown|remark-gfm|@tiptap/extension-link|@tiptap/starter-kit|@tiptap/core|@tiptap/react|@tiptap/pm|@tightknitai/slack-block-kit-validator|ajv|ajv-formats|slack-web-api-client)
+                excluded=true
+                ;;
+            esac
+          done
+          echo "excluded=$excluded" >> "$GITHUB_OUTPUT"
+
       - name: Enable auto-merge for minor/patch updates
-        if: steps.metadata.outputs.update-type != 'version-update:semver-major'
+        if: |
+          steps.metadata.outputs.update-type != 'version-update:semver-major' &&
+          steps.excluded.outputs.excluded != 'true'
         run: gh pr merge --auto --squash "$PR_URL"
         env:
           PR_URL: ${{ github.event.pull_request.html_url }}
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Approve PR
-        if: steps.metadata.outputs.update-type != 'version-update:semver-major'
+        if: |
+          steps.metadata.outputs.update-type != 'version-update:semver-major' &&
+          steps.excluded.outputs.excluded != 'true'
         run: gh pr review --approve "$PR_URL"
         env:
           PR_URL: ${{ github.event.pull_request.html_url }}
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Comment when held for manual review
+        if: |
+          steps.metadata.outputs.update-type != 'version-update:semver-major' &&
+          steps.excluded.outputs.excluded == 'true'
+        run: |
+          gh pr comment "$PR_URL" --body "Held for manual review: \`${{ steps.metadata.outputs.dependency-names }}\` is on the security-sensitive auto-merge exclusion list. Verify the changelog and source diff before merging."
+        env:
+          PR_URL: ${{ github.event.pull_request.html_url }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/publish.yml

@@ -18,11 +18,14 @@ jobs:
     steps:
       - uses: actions/checkout@v6
       - uses: ./.github/actions/setup
+      # Publish-side gating is intentionally minimal: lint + typecheck +
+      # build. The full test suite (incl. Playwright) already ran in CI
+      # against the same commit before release-please merged it to main,
+      # and re-installing Chromium on the npm-token-bearing job widens
+      # the supply-chain surface for no security gain. Anything that
+      # would fail here would have failed CI first.
       - run: pnpm run lint
       - run: pnpm run typecheck
-      - name: Install Playwright Chromium
-        run: pnpm exec playwright install --with-deps chromium
-      - run: pnpm test
       - run: pnpm run build:clean
       - run: pnpm publish --provenance --access public --no-git-checks
         env:

SECURITY-REVIEW.md

@@ -27,6 +27,7 @@ import { Button } from '../../lib/ui/button';
 import { Input } from '../../lib/ui/input';
 import { Label } from '../../lib/ui/label';
 import { Popover, PopoverContent, PopoverTrigger } from '../../lib/ui/popover';
+import { isSafeHref } from '../../lib/url-safety';
 import { RichTextStructuredEditor } from './rich-text-structured-editor';
 import type { BlockEditorProps } from './types';
 
@@ -106,6 +107,15 @@ function RichTextWysiwygEditor({ block, onChange }: { block: RichTextBlock; onCh
         openOnClick: false,
         autolink: true,
         defaultProtocol: 'https',
+        // Pin TipTap's link allowlist to the same set as our shared
+        // `isSafeHref` helper. The upstream default also includes
+        // ftp/cid/callto which we don't expect inside Slack content.
+        protocols: ['http', 'https', 'mailto', 'tel', 'sms', 'xmpp'],
+        // Belt-and-suspenders: even if a downstream contributor widens
+        // `protocols` later, our isSafeHref guard rejects everything
+        // outside the safe-link set. setLink and toggleLink both gate
+        // on this hook before applying the mark.
+        isAllowedUri: (url) => isSafeHref(url),
         HTMLAttributes: { rel: 'noreferrer noopener', target: '_blank' }
       })
     ],
@@ -284,20 +294,27 @@ function LinkPopover({ editor }: { editor: Editor }) {
   const currentHref = (editor.getAttributes('link').href as string | undefined) ?? '';
   const [open, setOpen] = useState(false);
   const [url, setUrl] = useState(currentHref);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     if (open) {
       setUrl(currentHref);
+      setError(null);
     }
   }, [open, currentHref]);
 
   const apply = () => {
     const trimmed = url.trim();
     if (!trimmed) {
       editor.chain().focus().unsetLink().run();
-    } else {
-      editor.chain().focus().extendMarkRange('link').setLink({ href: trimmed }).run();
+      setOpen(false);
+      return;
+    }
+    if (!isSafeHref(trimmed)) {
+      setError('Only http(s), mailto, tel, sms, and xmpp links are allowed.');
+      return;
     }
+    editor.chain().focus().extendMarkRange('link').setLink({ href: trimmed }).run();
     setOpen(false);
   };
 
@@ -325,14 +342,20 @@ function LinkPopover({ editor }: { editor: Editor }) {
             id="rt-link-url"
             value={url}
             placeholder="https://example.com"
-            onChange={(e) => setUrl(e.target.value)}
+            onChange={(e) => {
+              setUrl(e.target.value);
+              if (error) {
+                setError(null);
+              }
+            }}
             onKeyDown={(e) => {
               if (e.key === 'Enter') {
                 e.preventDefault();
                 apply();
               }
             }}
           />
+          {error && <p className="text-[11px] text-destructive">{error}</p>}
           <div className="flex justify-between">
             {active ? (
               <Button

src/components/editors/rich-text-editor.tsx

@@ -16,6 +16,7 @@ import { Button } from '../../lib/ui/button';
 import { Input } from '../../lib/ui/input';
 import { Label } from '../../lib/ui/label';
 import { RadioGroup, RadioGroupItem } from '../../lib/ui/radio-group';
+import { isSafeHref } from '../../lib/url-safety';
 import { EditorField } from './field';
 import type { BlockEditorProps } from './types';
 
@@ -454,16 +455,25 @@ function InlineFields({
 
   if (kind === 'link') {
     const link = element as RichTextSectionLink;
+    const urlValue = link.url ?? '';
+    const urlIsUnsafe = urlValue.length > 0 && !isSafeHref(urlValue);
     return (
       <div className="flex flex-col gap-2">
         <EditorField label="URL" htmlFor={`${idPrefix}-url`}>
           <Input
             id={`${idPrefix}-url`}
             type="url"
-            value={link.url ?? ''}
+            value={urlValue}
             placeholder="e.g. https://slack.com"
             onChange={(e) => onChange({ ...link, url: e.target.value })}
+            aria-invalid={urlIsUnsafe || undefined}
           />
+          {urlIsUnsafe && (
+            <p className="mt-1 text-[11px] text-destructive">
+              Only http(s), mailto, tel, sms, and xmpp links are allowed. This URL will be stripped before send and
+              preview.
+            </p>
+          )}
         </EditorField>
         <EditorField
           label="Display text"

src/components/editors/rich-text-structured-editor.tsx

@@ -3,6 +3,15 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from '../lib/ui/sheet';
 import type { SupportedBlock } from '../types';
 
+/**
+ * Upper bound on the JSON textarea we accept. A pasted multi-megabyte
+ * payload would freeze the tab inside `JSON.parse` before the validator
+ * gets a look; 1 MiB is well above any realistic Slack Block Kit message
+ * (Slack itself caps blocks at 50 per message and ~3000 chars per text
+ * field).
+ */
+const MAX_JSON_BYTES = 1024 * 1024;
+
 /**
  * Side drawer that exposes the current draft as raw JSON in a full-height
  * code-editor-style textarea. Edits flow live: every valid parse updates
@@ -59,6 +68,11 @@ export function JsonDrawer({
 
   const handleChange = (next: string) => {
     setValue(next);
+    if (next.length > MAX_JSON_BYTES) {
+      setParseError(`JSON exceeds the ${Math.round(MAX_JSON_BYTES / 1024)} KiB editor limit.`);
+      setValidationErrors([]);
+      return;
+    }
     let parsed: unknown;
     try {
       parsed = JSON.parse(next);

src/components/json-drawer.tsx

@@ -1,8 +1,10 @@
 import 'slack-blocks-to-jsx/dist/style.css';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import type { Block } from 'slack-blocks-to-jsx';
 import { Message } from 'slack-blocks-to-jsx';
+import { sanitizeBlock } from '../../lib/sanitize-blocks';
+import { isSafeHref, isSafeImageSrc } from '../../lib/url-safety';
 import type { PreviewHooks, PreviewTheme, SupportedBlock } from '../../types';
 
 /**
@@ -33,10 +35,28 @@ export function SlackBlockPreview({
 }) {
   const rootRef = useRef<HTMLDivElement>(null);
 
+  // Strip dangerous URI schemes (`javascript:`, `data:text/html`, etc.)
+  // from every `url`/`image_url` field in the block before handing it
+  // to slack-blocks-to-jsx, which renders rich-text links, button URLs,
+  // and image sources directly into `<a href>` / `<img src>` without
+  // its own scheme filter. Memoized so an unchanged block keeps the
+  // same reference and doesn't churn the renderer.
+  const safeBlock = useMemo(() => sanitizeBlock(block), [block]);
+
   // slack-blocks-to-jsx renders an SVG-only collapse toggle in image and
   // video blocks without an aria-label, which violates axe's `button-name`
   // rule and is unreachable to screen readers. Post-mount we add a label
-  // to any such buttons we find under our wrapper.
+  // to any such buttons we find under our wrapper. We also do a final
+  // pass to neutralize any `<a href>` or `<img src>` that carries a
+  // disallowed URI scheme — the block-payload sanitizer catches URLs
+  // that live in structured fields (`url`, `image_url`), but mrkdwn /
+  // rich-text content can encode link URLs inside text strings
+  // (`[label](javascript:...)` or `<javascript:...|label>`) that
+  // `slack-blocks-to-jsx`'s own parser hands straight to `<a href>`
+  // without filtering. React 19 also blocks `javascript:` URLs at
+  // setAttribute time, but we don't rely on that — this loop applies
+  // our allowlist (which is tighter and covers `data:`/`vbscript:`/`file:`
+  // as well) and replaces unsafe values with `#`.
   useEffect(() => {
     const root = rootRef.current;
     if (!root) return;
@@ -48,6 +68,20 @@ export function SlackBlockPreview({
         btn.setAttribute('aria-label', title ? `Toggle ${title}` : 'Toggle media');
       }
     }
+    for (const a of root.querySelectorAll<HTMLAnchorElement>('a[href]')) {
+      const href = a.getAttribute('href');
+      if (!isSafeHref(href)) {
+        a.setAttribute('href', '#');
+        a.setAttribute('data-bk-blocked-href', '1');
+      }
+    }
+    for (const img of root.querySelectorAll<HTMLImageElement>('img[src]')) {
+      const src = img.getAttribute('src');
+      if (!isSafeImageSrc(src)) {
+        img.removeAttribute('src');
+        img.setAttribute('data-bk-blocked-src', '1');
+      }
+    }
   });
 
   return (
@@ -64,7 +98,7 @@ export function SlackBlockPreview({
         logo=""
         withoutWrapper
         theme={theme}
-        blocks={[block as unknown as Block]}
+        blocks={[safeBlock as unknown as Block]}
         hooks={hooks as Record<string, unknown> | undefined}
       />
     </div>

src/components/preview/slack-block-preview.tsx

@@ -4,6 +4,7 @@ import { toSlackBlocks } from '../lib/to-slack-blocks';
 import { Button } from '../lib/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../lib/ui/dialog';
 import { Label } from '../lib/ui/label';
+import { isSafeHref } from '../lib/url-safety';
 import type { ChannelOption, SendAsUserStatus, SendPayload, SupportedBlock } from '../types';
 
 type SendStatus = { kind: 'idle' } | { kind: 'sending' } | { kind: 'success' } | { kind: 'error'; error: string };
@@ -190,12 +191,12 @@ export function SendDialog({
                 {userStatus && !userStatus.canSendAsUser ? ' (Slack sign-in required)' : ''}
               </option>
             </select>
-            {userStatus && !userStatus.canSendAsUser && userStatus.oauthUrl && (
+            {userStatus && !userStatus.canSendAsUser && userStatus.oauthUrl && isSafeHref(userStatus.oauthUrl) && (
               <p className="text-xs text-muted-foreground">
                 <a
                   href={userStatus.oauthUrl}
                   target="_blank"
-                  rel="noreferrer"
+                  rel="noopener noreferrer"
                   className="inline-flex items-center gap-1 text-primary hover:underline"
                 >
                   Sign in with Slack <ExternalLink className="h-3 w-3" />

src/components/send-dialog.tsx

@@ -5,6 +5,7 @@ import type {
   RichTextSectionElementStyleWithCode,
   RichTextSectionLink
 } from 'slack-web-api-client';
+import { sanitizeHref } from './url-safety';
 
 type RichStyle = RichTextSectionElementStyleWithCode;
 
@@ -415,7 +416,12 @@ function proseMirrorInlinesToRichTextElements(nodes: PMNode[]): AnyRichTextSecti
     const linkMark = node.marks?.find((m) => m.type === 'link');
     const style = marksToStyle(node.marks ?? []);
     if (linkMark) {
-      const url = String(linkMark.attrs?.href ?? '');
+      // TipTap's setLink/toggleLink already gate on isAllowedUri, but
+      // a link mark can also enter the editor via setContent() (used
+      // when seeding from a payload). Sanitize once more here so a
+      // crafted Slack rich_text payload that already contains an unsafe
+      // href cannot round-trip back out unchanged.
+      const url = sanitizeHref(String(linkMark.attrs?.href ?? ''));
       const link: RichTextSectionLink = {
         type: 'link',
         url,