@dfosco/storyboard 0.11.8 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dfosco/storyboard",
-    "version": "0.11.8",
+    "version": "0.12.0",
     "type": "module",
     "license": "MIT",
     "description": "Storyboard prototyping framework — core engine, React integration, and canvas",
@@ -114,9 +114,12 @@
         "iconoir": "^7.11.0",
         "jsonc-parser": "^3.3.1",
         "lucide-react": "^1.8.0",
-        "remark": "^15.0.1",
+        "rehype-raw": "^7.0.0",
+        "rehype-sanitize": "^6.0.0",
+        "rehype-stringify": "^10.0.1",
         "remark-gfm": "^4.0.1",
-        "remark-html": "^16.0.1",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.1.2",
         "tailwind-merge": "^3.5.0",
         "ws": "^8.21.0",
         "zod": "^3.23.8"
@@ -200,4 +203,4 @@
     "optionalDependencies": {
         "node-pty": "^1.0.0"
     }
-}
+}

package/src/core/data/dotPath.js

@@ -41,6 +41,11 @@ export function deepClone(val) {
  */
 export function setByPath(obj, path, value) {
   const segments = path.split('.')
+  // Guard against prototype pollution: refuse paths that traverse into
+  // special object internals. Override params can come from the URL.
+  if (segments.some((seg) => seg === '__proto__' || seg === 'constructor' || seg === 'prototype')) {
+    return
+  }
   let current = obj
   for (let i = 0; i < segments.length - 1; i++) {
     const seg = segments[i]

package/src/core/devtools/sceneDebug.js

@@ -11,6 +11,16 @@
  */
 import { loadFlow } from '../data/loader.js'
 
+/** Escape a string for safe interpolation into HTML text/attribute contexts. */
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
 const STYLES = `
 .sb-scene-debug {
   padding: 16px;
@@ -89,7 +99,7 @@ export function mountFlowDebug(container, flowName) {
     el.innerHTML = `
       <div class="sb-scene-debug-error">
         <div class="sb-scene-debug-error-title">Error loading flow</div>
-        <p class="sb-scene-debug-error-message">${error}</p>
+        <p class="sb-scene-debug-error-message">${escapeHtml(error)}</p>
       </div>`
   } else {
     const title = document.createElement('h2')

package/src/core/mountStoryboardCore.js

@@ -827,9 +827,10 @@ function showToast(message, route, basePath, filePath) {
   })
 
   const href = route?.startsWith('/') ? (basePath.replace(/\/$/, '') + route) : route
+  const escAttr = (v) => String(v).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
   let html = `<span style="font-weight:500">✓ ${message.replace(/</g, '&lt;')}</span>`
   if (href) {
-    html += `<a href="${href}" style="color:var(--color-primary, #0969da);text-decoration:underline;font-size:0.8125rem">Open canvas</a>`
+    html += `<a href="${escAttr(href)}" style="color:var(--color-primary, #0969da);text-decoration:underline;font-size:0.8125rem">Open canvas</a>`
   }
   if (filePath) {
     html += `<span style="font-size:0.75rem;color:var(--color-muted, #64748b)">To edit your component, go to <code style="background:var(--color-muted, #f1f5f9);padding:1px 4px;border-radius:3px;font-size:0.75rem">${filePath.replace(/</g, '&lt;')}</code></span>`

package/src/internals/canvas/widgets/LinkPreview.jsx

@@ -1,7 +1,4 @@
 import { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from 'react'
-import { remark } from 'remark'
-import remarkGfm from 'remark-gfm'
-import remarkHtml from 'remark-html'
 import { GitBranchIcon, GitMergeIcon, GitPullRequestClosedIcon, GitPullRequestDraftIcon, GitPullRequestIcon, MarkGithubIcon } from '@primer/octicons-react'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
@@ -9,6 +6,7 @@ import { readProp, linkPreviewSchema } from './widgetProps.js'
 import ExpandedPane from './ExpandedPane.jsx'
 import { findAllConnectedSplitTargets, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
 import { useExpandOverride } from './useExpandOverride.js'
+import { markdownToSafeHtml } from './markdown/markdownSanitize.js'
 import styles from './LinkPreview.module.css'
 
 const VIDEO_URL_LINE_RE = /^<p>\s*(https?:\/\/[^\s<]+\.(mp4|mov|webm|ogg)(?:\?[^\s<]*)?)\s*<\/p>$/gim
@@ -69,11 +67,7 @@ function postProcessHtml(html) {
 
 function renderMarkdown(text) {
   if (!text) return ''
-  const result = remark()
-    .use(remarkGfm)
-    .use(remarkHtml, { sanitize: false })
-    .processSync(text)
-  return postProcessHtml(String(result))
+  return postProcessHtml(markdownToSafeHtml(text))
 }
 
 function timeAgo(dateStr) {

package/src/internals/canvas/widgets/markdown/markdownRender.js

@@ -5,17 +5,11 @@
  * Split from `MarkdownEditor.jsx` so the latter only exports React
  * components — keeping Fast Refresh happy and the surface area minimal.
  */
-import { remark } from 'remark'
-import remarkGfm from 'remark-gfm'
-import remarkHtml from 'remark-html'
+import { markdownToSafeHtml } from './markdownSanitize.js'
 
 export function renderMarkdown(text) {
   if (!text) return ''
-  const result = remark()
-    .use(remarkGfm)
-    .use(remarkHtml, { sanitize: false })
-    .processSync(text)
-  return String(result).replace(/<a\s/g, '<a target="_blank" rel="noopener noreferrer" ')
+  return markdownToSafeHtml(text).replace(/<a\s/g, '<a target="_blank" rel="noopener noreferrer" ')
 }
 
 let hljsPromise = null

package/src/internals/canvas/widgets/markdown/markdownSanitize.js

@@ -0,0 +1,60 @@
+/**
+ * Shared markdown → safe-HTML pipeline.
+ *
+ * Renders markdown (with GFM) to HTML while preserving inline HTML that
+ * users legitimately embed in markdown widgets and GitHub issue/PR bodies
+ * (`<video>`, `<audio>`, `<details>`, …), but runs every node through a
+ * trusted allow-list sanitizer (`rehype-sanitize` / `hast-util-sanitize`).
+ *
+ * Because the sanitizer is allow-list based, anything not explicitly
+ * permitted is dropped: `<script>`/`<iframe>`, every `on*` event handler,
+ * and dangerous URL protocols (`javascript:`, `data:`) are statically
+ * removed. The extra tags re-admitted below are all *inert* elements, and
+ * only safe attributes (no event handlers) with `http(s)`-only `src`/`poster`
+ * are allowed.
+ */
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkGfm from 'remark-gfm'
+import remarkRehype from 'remark-rehype'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'
+import rehypeStringify from 'rehype-stringify'
+
+const schema = {
+  ...defaultSchema,
+  // `details`/`summary` are already in the default allow-list; add the inert
+  // media elements consumers embed in markdown.
+  tagNames: [...new Set([...(defaultSchema.tagNames || []), 'video', 'audio', 'track'])],
+  attributes: {
+    ...defaultSchema.attributes,
+    video: ['src', 'poster', 'controls', 'loop', 'muted', 'autoPlay', 'playsInline', 'preload', 'width', 'height'],
+    audio: ['src', 'controls', 'loop', 'muted', 'autoPlay', 'preload'],
+    source: [...(defaultSchema.attributes?.source || []), 'src', 'type'],
+    track: ['src', 'kind', 'srcLang', 'label', 'default'],
+  },
+  protocols: {
+    ...defaultSchema.protocols,
+    // Restrict media sources to http(s) — blocks `javascript:`/`data:` URLs.
+    src: ['http', 'https'],
+    poster: ['http', 'https'],
+  },
+}
+
+const processor = unified()
+  .use(remarkParse)
+  .use(remarkGfm)
+  .use(remarkRehype, { allowDangerousHtml: true })
+  .use(rehypeRaw)
+  .use(rehypeSanitize, schema)
+  .use(rehypeStringify)
+
+/**
+ * Render markdown to sanitized HTML.
+ * @param {string} text Raw markdown.
+ * @returns {string} Safe HTML string.
+ */
+export function markdownToSafeHtml(text) {
+  if (!text) return ''
+  return String(processor.processSync(text))
+}

package/src/internals/vite/data-plugin.js

@@ -1341,12 +1341,13 @@ export default function storyboardDataPlugin() {
       return {
         optimizeDeps: {
           // @dfosco/storyboard is excluded (virtual module), so Vite
-          // can't trace into its deps. Include the remark entry points so
-          // Vite pre-bundles the full chain — covers all transitive CJS
-          // packages (debug, extend, etc.) without whack-a-mole.
+          // can't trace into its deps. Include the markdown pipeline entry
+          // points so Vite pre-bundles the full chain — covers all transitive
+          // CJS packages (debug, extend, etc.) without whack-a-mole.
           include: [
             'cmdk',
-            'remark', 'remark-gfm', 'remark-html',
+            'remark-parse', 'remark-gfm', 'remark-rehype',
+            'rehype-raw', 'rehype-sanitize', 'rehype-stringify',
             'use-sync-external-store/shim', 'use-sync-external-store/shim/with-selector',
             'feather-icons', '@primer/octicons', 'ansi-to-html',
             // @primer/react ≥38 ships pre-compiled with React Compiler and

package/src/internals/vite/data-plugin.test.js

@@ -53,12 +53,12 @@ describe('storyboardDataPlugin', () => {
     expect(config.optimizeDeps.exclude).toContain('@dfosco/storyboard')
   })
 
-  it('config() includes remark stack in optimizeDeps so Vite pre-bundles transitive CJS deps', () => {
+  it('config() includes markdown pipeline stack in optimizeDeps so Vite pre-bundles transitive CJS deps', () => {
     const plugin = storyboardDataPlugin()
     const config = plugin.config()
-    expect(config.optimizeDeps.include).toContain('remark')
+    expect(config.optimizeDeps.include).toContain('remark-parse')
     expect(config.optimizeDeps.include).toContain('remark-gfm')
-    expect(config.optimizeDeps.include).toContain('remark-html')
+    expect(config.optimizeDeps.include).toContain('rehype-sanitize')
   })
 
   it("resolveId returns resolved ID for 'virtual:storyboard-data-index'", () => {