From 8dd6c7abe6348e60d49eed5d5894333082820d56 Mon Sep 17 00:00:00 2001
From: LinYu <lin26580@163.com>
Date: Fri, 4 Sep 2026 09:17:02 +0800
Subject: [PATCH] fix(markdown): resolve media links in the rehype ast

Media in a markdown file was handled by two string/DOM hacks stacked on
each other: a regex on the raw source rewrote relative urls into
`${api}/d/...`, and a post-render pass parsed that link back into a
storage path to look up a signed raw url. Both directions were
heuristics, and the second one made every media element fire a request
that was expected to fail.

Move the structural work into a rehype plugin that runs after
`rehype-raw` and before `rehype-sanitize`:

- resolve every media url to a storage path once, then build the link
  with getLinkByDirAndObj(), so the share prefix (/sd + pwd), the sign
  and path encoding match the rest of the app; the sign of a sibling is
  already in the folder listing, which costs no extra request
- replace an <img> whose target is a video with a <video> node, instead
  of emitting raw html into the markdown source
- handle poster, srcset, <source> and <track> too
- only /fs/get a raw url, per element, when the link actually failed to
  load (a path outside the listing, an encrypted meta); cached with a
  ttl, retried once

This also fixes: rewriting inside fenced code blocks, urls with parens
or a title, attribute injection through a crafted filename, and a
missing max-width for video. While there, the sanitize whitelist uses
hast property names now (playsInline, crossOrigin were no-ops) and
inline base64 pictures survive filtering.
---
 src/components/Markdown.tsx               | 131 +++++++++------
 src/components/markdown.css               |  12 ++
 src/components/markdown/media-fallback.ts |  78 +++++++++
 src/components/markdown/rehype-media.ts   | 185 ++++++++++++++++++++++
 4 files changed, 360 insertions(+), 46 deletions(-)
 create mode 100644 src/components/markdown/media-fallback.ts
 create mode 100644 src/components/markdown/rehype-media.ts

diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
index 97a446884..e027506ce 100644
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -7,24 +7,27 @@ import rehypeStringify from "rehype-stringify"
 import remarkGfm from "remark-gfm"
 import remarkParse from "remark-parse"
 import remarkRehype from "remark-rehype"
-import { For, Show, createEffect, createMemo, createSignal, on } from "solid-js"
+import {
+  For,
+  Show,
+  createEffect,
+  createMemo,
+  createSignal,
+  on,
+  untrack,
+} from "solid-js"
 import { Motion } from "solid-motionone"
 import { unified } from "unified"
 import { useCDN, useParseText, useRouter } from "~/hooks"
 import { useScrollListener } from "~/pages/home/toolbar/BackTop.jsx"
-import { getMainColor, getSettingBool, me } from "~/store"
-import {
-  api,
-  loadCSS,
-  loadScriptIIFE,
-  notify,
-  pathDir,
-  pathJoin,
-  pathResolve,
-} from "~/utils"
+import { getMainColor, getSettingBool, objStore } from "~/store"
+import { loadCSS, loadScriptIIFE, notify, pathDir, pathJoin } from "~/utils"
 import { isMobile } from "~/utils/compatibility.js"
 import hljs from "highlight.js"
 import { EncodingSelect } from "."
+import { watchMediaSrc } from "./markdown/media-fallback"
+import { rehypeMedia } from "./markdown/rehype-media"
+import type { HastNode, MediaContext } from "./markdown/rehype-media"
 import "./markdown.css"
 
 type TocItem = { indent: number; text: string; tagName: string; key: string }
@@ -157,7 +160,7 @@ const { katexCSSPath, mermaidJSPath } = useCDN()
 
 async function renderMarkdown(
   content: string,
-  sanitize: boolean,
+  ctx: { sanitize: boolean } & MediaContext,
 ): Promise<{ html: string; hasMermaid: boolean }> {
   let processor = unified()
 
@@ -181,17 +184,60 @@ async function renderMarkdown(
   }
 
   processor.use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw)
-
-  if (sanitize)
+  // resolve media urls and render the image syntax of a video as a player
+  processor.use(() => (tree: unknown) => rehypeMedia(tree as HastNode, ctx))
+
+  if (ctx.sanitize) {
+    const attrs = defaultSchema.attributes ?? {}
+    const allow = (tag: string, ...names: string[]) => [
+      ...(attrs[tag] ?? []),
+      ...names,
+    ]
     processor.use(rehypeSanitize, {
       ...defaultSchema,
+      // video/audio/track are not in the default element whitelist and
+      // would be stripped entirely, breaking markdown video previews
+      tagNames: [...(defaultSchema.tagNames ?? []), "video", "audio", "track"],
+      // the default only allows http/https, which drops inline base64 pictures
+      protocols: {
+        ...defaultSchema.protocols,
+        src: [...(defaultSchema.protocols?.src ?? []), "data"],
+      },
       attributes: {
-        ...defaultSchema.attributes,
+        ...attrs,
+        // `data-md-path` feeds the runtime fallback of media links
+        "*": allow("*", "data*"),
         code: [
           ["className", /^language-[\w-]+$/, "math-inline", "math-display"],
         ],
+        // attribute names are hast properties, not html attributes
+        video: allow(
+          "video",
+          "src",
+          "poster",
+          "controls",
+          "preload",
+          "autoplay",
+          "loop",
+          "muted",
+          "playsInline",
+          "crossOrigin",
+        ),
+        audio: allow(
+          "audio",
+          "src",
+          "controls",
+          "preload",
+          "autoplay",
+          "loop",
+          "muted",
+          "crossOrigin",
+        ),
+        source: allow("source", "src", "srcSet", "type", "media"),
+        track: allow("track", "src", "kind", "label", "srclang", "default"),
       },
     })
+  }
 
   if (hasMath) {
     const { default: rehypeKatex } = await import("rehype-katex")
@@ -220,45 +266,37 @@ export function Markdown(props: {
   const { isString, text } = useParseText(props.children)
   const { pathname } = useRouter()
 
+  // media urls of the markdown are relative to the dir it belongs to: the
+  // folder itself for a readme, the parent dir for a previewed file
+  const baseDir = createMemo(() =>
+    props.readme ? pathname() : pathDir(pathname()),
+  )
+  // the listing already carries the sign of every object next to the markdown
+  const siblingSigns = () => {
+    const signs = new Map<string, string>()
+    for (const obj of objStore.objs) {
+      if (obj.sign) signs.set(pathJoin(baseDir(), obj.name), obj.sign)
+    }
+    return signs
+  }
+
   const md = createMemo(() => {
     const raw = text(encoding())
-    const content =
-      !props.ext || props.ext.toLowerCase() === "md"
-        ? raw
-        : `\`\`\`${props.ext}\n${raw}\n\`\`\``
-
-    return content.replace(/!\[.*?\]\((.*?)\)/g, (match) => {
-      const name = match.match(/!\[(.*?)\]\(.*?\)/)![1]
-      const rawUrl = match.match(/!\[.*?\]\((.*?)\)/)![1]
-
-      if (
-        rawUrl.startsWith("data:image/") ||
-        rawUrl.startsWith("http://") ||
-        rawUrl.startsWith("https://") ||
-        rawUrl.startsWith("//")
-      ) {
-        return match
-      }
-
-      const resolvedPath = rawUrl.startsWith("/")
-        ? rawUrl
-        : pathResolve(props.readme ? pathname() : pathDir(pathname()), rawUrl)
-
-      const url = `${api}/d${pathJoin(me().base_path, resolvedPath)}`
-      const ans = `![${name}](${url})`
-      console.log(ans)
-      return ans
-    })
+    return !props.ext || props.ext.toLowerCase() === "md"
+      ? raw
+      : `\`\`\`${props.ext}\n${raw}\n\`\`\``
   })
 
   createEffect(
     on([md, mermaidTheme], async () => {
       setShow(false)
 
-      const { html, hasMermaid } = await renderMarkdown(
-        md(),
-        props.sanitize || getSettingBool("filter_readme_scripts"),
-      )
+      const { html, hasMermaid } = await renderMarkdown(md(), {
+        sanitize: props.sanitize || getSettingBool("filter_readme_scripts"),
+        baseDir: baseDir(),
+        // untracked: appending objects must not re-render the whole markdown
+        signs: untrack(siblingSigns),
+      })
       setMarkdownHTML(html)
 
       setTimeout(() => {
@@ -292,6 +330,7 @@ export function Markdown(props: {
           window.mermaid.run({ querySelector: ".language-mermaid" })
         }
 
+        watchMediaSrc(markdownRef())
         window.onMDRender?.()
       })
     }),
diff --git a/src/components/markdown.css b/src/components/markdown.css
index f946926cc..fb51d4d14 100644
--- a/src/components/markdown.css
+++ b/src/components/markdown.css
@@ -113,6 +113,18 @@
   /* background-color: #fff; */
 }
 
+/* media referenced by a markdown file must not overflow the container */
+.markdown-body video,
+.markdown-body audio {
+  max-width: 100%;
+}
+
+.markdown-body video {
+  display: block;
+  height: auto;
+  margin: 0.5em 0;
+}
+
 .markdown-body code,
 .markdown-body kbd,
 .markdown-body pre {
diff --git a/src/components/markdown/media-fallback.ts b/src/components/markdown/media-fallback.ts
new file mode 100644
index 000000000..c149cac98
--- /dev/null
+++ b/src/components/markdown/media-fallback.ts
@@ -0,0 +1,78 @@
+import { me, password } from "~/store"
+import { fsGet, pathJoin } from "~/utils"
+
+/**
+ * Media of this deployment is linked through `/d`, which answers 401 when the
+ * target needs a signature the folder listing didn't carry - a path outside
+ * the current dir, a mounted share, or an encrypted meta. Only then the raw
+ * url is resolved, per element that actually failed to load.
+ */
+
+// a raw url may be a temporary direct link, so it is not cached forever
+const TTL = 10 * 60 * 1000
+const resolved = new Map<string, { url: string; at: number }>()
+const pending = new Map<string, Promise<string>>()
+
+function fetchRawUrl(path: string) {
+  const cached = resolved.get(path)
+  if (cached && Date.now() - cached.at < TTL) return Promise.resolve(cached.url)
+  const inflight = pending.get(path)
+  if (inflight) return inflight
+
+  const request = (async () => {
+    try {
+      const resp = await fsGet(pathJoin(me().base_path, path), password())
+      return resp.code === 200 && resp.data?.raw_url ? resp.data.raw_url : ""
+    } catch {
+      return ""
+    }
+  })().then((url) => {
+    pending.delete(path)
+    if (url) resolved.set(path, { url, at: Date.now() })
+    return url
+  })
+  pending.set(path, request)
+  return request
+}
+
+function isBroken(el: HTMLElement) {
+  if (el instanceof HTMLImageElement)
+    return el.complete && el.naturalWidth === 0
+  if (el instanceof HTMLMediaElement)
+    return el.networkState === HTMLMediaElement.NETWORK_NO_SOURCE
+  return false
+}
+
+async function retryWithRawUrl(el: HTMLElement, path: string) {
+  // one attempt per element per render, a raw url can't fail twice silently
+  el.dataset.mdRetried = "1"
+  const url = await fetchRawUrl(path)
+  if (!url) {
+    delete el.dataset.mdRetried
+    return
+  }
+  el.setAttribute("src", url)
+  // candidates of srcset win over src, so they must go away
+  el.removeAttribute("srcset")
+  el.removeAttribute("sizes")
+  // <source>/<track> are only picked up again when the host reloads
+  const host = el instanceof HTMLMediaElement ? el : el.closest("video, audio")
+  if (host instanceof HTMLMediaElement) host.load()
+}
+
+export function watchMediaSrc(root?: ParentNode | null) {
+  root
+    ?.querySelectorAll<HTMLElement>("img,video,audio,source,track")
+    .forEach((el) => {
+      const path = el.dataset.mdPath
+      if (!path || el.dataset.mdRetried) return
+      // the request may already have failed before this runs
+      if (isBroken(el)) {
+        void retryWithRawUrl(el, path)
+        return
+      }
+      el.addEventListener("error", () => void retryWithRawUrl(el, path), {
+        once: true,
+      })
+    })
+}
diff --git a/src/components/markdown/rehype-media.ts b/src/components/markdown/rehype-media.ts
new file mode 100644
index 000000000..af2a20fdc
--- /dev/null
+++ b/src/components/markdown/rehype-media.ts
@@ -0,0 +1,185 @@
+import { getLinkByDirAndObj } from "~/hooks/useLink"
+import type { Obj } from "~/types"
+import { api, base_path, ext, pathBase, pathDir, pathResolve } from "~/utils"
+
+/**
+ * Minimal hast shape. This runs after `rehype-raw`, so the tree only holds
+ * element/text nodes and no `raw` node is left to expand.
+ */
+export interface HastNode {
+  type: string
+  tagName?: string
+  properties?: Record<string, unknown>
+  children?: HastNode[]
+}
+
+export interface MediaContext {
+  /** storage path of the dir relative media urls are resolved against */
+  baseDir: string
+  /** storage path -> sign, taken from the folder listing when available */
+  signs: Map<string, string>
+}
+
+// `![](x.mp4)` can never be played by an <img>, so it becomes a <video>
+const VIDEO_EXTS = new Set(["mp4", "webm", "ogg", "ogv", "mov", "m4v", "mkv"])
+const MEDIA_TAGS = new Set(["img", "video", "audio", "source", "track"])
+// a link copied from this site may already carry a download/proxy prefix
+const LINK_PREFIXES: [RegExp, string][] = [
+  [/^\/sd\//, "/@s/"],
+  [/^\/sp\//, "/@s/"],
+  [/^\/[dp]\//, "/"],
+]
+
+const apiOrigin = (() => {
+  try {
+    return new URL(api).origin
+  } catch {
+    return ""
+  }
+})()
+
+/**
+ * The storage path a media url points to, or undefined when the url is not
+ * ours to rewrite (other site, inline data, malformed).
+ */
+function resolveMediaPath(raw: unknown, ctx: MediaContext) {
+  if (typeof raw !== "string") return
+  let path = raw.trim()
+  if (!path || /^(data|blob|about|javascript):/i.test(path)) return
+  // protocol-relative: an external resource
+  if (path.startsWith("//")) return
+
+  let prefixed = true
+  if (/^https?:/i.test(path)) {
+    let url: URL
+    try {
+      url = new URL(path)
+    } catch {
+      return
+    }
+    if (url.origin !== apiOrigin) return
+    path = url.pathname
+    if (base_path && (path === base_path || path.startsWith(`${base_path}/`))) {
+      path = path.slice(base_path.length) || "/"
+    }
+  } else if (path.startsWith("/")) {
+    path = pathResolve("/", path)
+  } else {
+    path = pathResolve(ctx.baseDir, path)
+    // a relative url never carries a link prefix
+    prefixed = false
+  }
+  if (prefixed) {
+    for (const [prefix, storage] of LINK_PREFIXES) {
+      if (prefix.test(path)) {
+        path = path.replace(prefix, storage)
+        break
+      }
+    }
+  }
+
+  path = path.split(/[?#]/)[0]
+  try {
+    path = decodeURIComponent(path)
+  } catch {
+    // keep it when the author wrote malformed percent encoding
+  }
+  return path.startsWith("/") ? path : undefined
+}
+
+/**
+ * The direct link of a storage path, built by the same helper the file list
+ * uses, so the share prefix (`/sd`), `pwd`, `sign` and path encoding stay
+ * consistent with the rest of the app.
+ */
+function toMediaLink(path: string, ctx: MediaContext) {
+  const obj = { name: pathBase(path), sign: ctx.signs.get(path) } as Obj
+  return getLinkByDirAndObj(
+    pathDir(path),
+    obj,
+    "direct",
+    path.startsWith("/@s"),
+    true,
+  )
+}
+
+/** href + storage path of a media url, or undefined to leave it untouched */
+function resolveUrl(raw: unknown, ctx: MediaContext) {
+  const path = resolveMediaPath(raw, ctx)
+  return path ? { path, href: toMediaLink(path, ctx) } : undefined
+}
+
+/** `{ src, srcSet }` of a media element, with every url resolved */
+function rewriteUrls(node: HastNode, ctx: MediaContext) {
+  const properties = (node.properties ??= {})
+  const src = resolveUrl(properties.src, ctx)
+  if (src) {
+    properties.src = src.href
+    // lets the runtime fallback re-resolve through /fs/get when this link
+    // turns out to need a signature that was not knowable at render time
+    properties.dataMdPath = src.path
+  }
+
+  const poster = resolveUrl(properties.poster, ctx)
+  if (poster) properties.poster = poster.href
+
+  // "a.png 1x, b.png 2x": every candidate on its own, descriptors kept
+  if (typeof properties.srcSet === "string") {
+    properties.srcSet = properties.srcSet
+      .split(",")
+      .map((candidate) => {
+        const [raw, ...descriptors] = candidate.trim().split(/\s+/)
+        const url = resolveUrl(raw, ctx)
+        return [url?.href ?? raw, ...descriptors].join(" ")
+      })
+      .join(", ")
+  }
+
+  return src
+}
+
+function toVideo(
+  properties: Record<string, unknown>,
+  src: { path: string; href: string },
+): HastNode {
+  // `alt`/`srcSet`/`sizes` mean nothing to a video element
+  const { alt, srcSet, sizes, ...rest } = properties
+  return {
+    type: "element",
+    tagName: "video",
+    properties: {
+      ...rest,
+      src: src.href,
+      dataMdPath: src.path,
+      controls: true,
+      preload: "metadata",
+    },
+    children: [],
+  }
+}
+
+/**
+ * rehype transformer: resolve media urls of the rendered markdown, and render
+ * a video referenced with the image syntax as an actual player.
+ */
+export function rehypeMedia(root: HastNode, ctx: MediaContext) {
+  const visit = (node: HastNode) => {
+    const children = node.children
+    if (!children) return
+    children.forEach((child, index) => {
+      if (child.type !== "element" || !child.tagName) return
+      if (MEDIA_TAGS.has(child.tagName)) {
+        const url = rewriteUrls(child, ctx)
+        if (
+          url &&
+          child.tagName === "img" &&
+          VIDEO_EXTS.has(ext(url.path).toLowerCase())
+        ) {
+          children[index] = toVideo(child.properties ?? {}, url)
+        }
+      }
+      visit(child)
+    })
+  }
+  visit(root)
+}