🛡️ Sentinel: [CRITICAL] Fix XSS in blog markdown parser (#1082)

* 🛡️ Sentinel: [CRITICAL] Fix XSS in blog markdown parser

* 🛡️ Sentinel: [CRITICAL] Fix XSS in blog markdown parser

---------

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: GDS K S <gagandua078@gmail.com>

Author: google-labs-jules[bot]

.jules/sentinel.md

@@ -7,7 +7,11 @@
 **Learning:** Browsers do not escape single (`'`) or double (`"`) quotes when reading `.innerHTML` after assigning `.textContent`. If this "escaped" string is placed inside an HTML attribute (like `<button title="${escapeHtml(input)}">`), it can break out and cause XSS.
 **Prevention:** Always use regex replacements or a robust library to escape HTML entities (`&`, `<`, `>`, `"`, `'`) for user input, especially when the output will be embedded within HTML attributes.
 
+## 2025-02-14 - XSS in Markdown rendering logic
+**Vulnerability:** The Markdown rendering logic in `src/app/blog/[slug]/page.tsx` directly used user input for HTML string formatting without HTML-escaping characters, allowing both raw HTML execution and `javascript:` protocol link injections.
+**Learning:** Custom markdown parsers that rely on string `.replace` and pass the output directly into `dangerouslySetInnerHTML` are highly susceptible to XSS if not carefully escaped at the correct step, particularly against attributes like `href`.
+**Prevention:** Always use a robust HTML-escaping utility before converting markdown tokens to HTML elements, and strictly block or filter unsafe protocols like `javascript:` when formatting user-provided URLs in `href` attributes.
 ## 2026-09-16 - Sentinel Character Injection in Regex-based Syntax Highlighter
-**Vulnerability:** The `esc()` function in `src/components/icons/shared/syntax-highlight.tsx` failed to strip internal sentinel characters (\`\` and \`\`) before they were used as placeholders in regex replacements for syntax highlighting.
+**Vulnerability:** The `esc()` function in `src/components/icons/shared/syntax-highlight.tsx` failed to strip internal sentinel characters (`` and ``) before they were used as placeholders in regex replacements for syntax highlighting.
 **Learning:** When using internal sentinel characters for multi-pass string replacements, they must be stripped from the original user input first. Otherwise, an attacker can submit an SVG containing these characters, bypassing the intended markup structure and injecting arbitrary HTML/JavaScript (XSS) when the highlighted code is rendered.
 **Prevention:** Always strip custom sentinel markers from the input before any regex substitution logic begins. Better yet, avoid replacing string tags into `dangerouslySetInnerHTML` if possible, favoring a safer AST-based rendering approach.

src/app/blog/[slug]/page.tsx

@@ -68,21 +68,36 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
   };
 }
 
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
 function processInline(text: string): string {
-  return text
+  return escapeHtml(text)
     .replace(/\*\*(.+?)\*\*/g, '<strong class="font-semibold text-foreground">$1</strong>')
     .replace(/`(.+?)`/g, (_match, code: string) => {
-      const escaped = code.replace(/</g, "&lt;").replace(/>/g, "&gt;");
-      return `<code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] dark:bg-white/[0.06]">${escaped}</code>`;
+      return `<code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] dark:bg-white/[0.06]">${code}</code>`;
     })
     .replace(
       /\[(.+?)\]\((.+?)\)/g,
       (_match, label: string, href: string) => {
+        const unescapedHref = href.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'");
+
+        // Prevent javascript: URIs (XSS vector)
+        if (unescapedHref.trim().toLowerCase().startsWith("javascript:")) {
+          return label;
+        }
+
         // External links get UTM-tagged (via withUtm, which no-ops for
         // mailto:/internal hrefs) and open in a new tab; internal links
         // keep the plain same-tab behavior.
-        const isExternal = href.startsWith("http");
-        const taggedHref = withUtm(href, "blog_post").replace(/&/g, "&amp;");
+        const isExternal = unescapedHref.startsWith("http");
+        const taggedHref = escapeHtml(withUtm(unescapedHref, "blog_post"));
         const extraAttrs = isExternal
           ? ' target="_blank" rel="noopener noreferrer"'
           : "";
@@ -102,7 +117,7 @@ function renderMarkdown(body: string): string {
   // spliced back in after the paragraph pass.
   const codeBlocks: string[] = [];
   const withPlaceholders = body.replace(/```[a-z]*\n([\s\S]*?)\n```/g, (_match, code: string) => {
-    const html = `<pre class="my-4 overflow-x-auto rounded-xl border border-border/40 bg-muted/30 p-4 font-mono text-xs text-foreground dark:border-white/[0.06] dark:bg-white/[0.03]"><code>${code.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</code></pre>`;
+    const html = `<pre class="my-4 overflow-x-auto rounded-xl border border-border/40 bg-muted/30 p-4 font-mono text-xs text-foreground dark:border-white/[0.06] dark:bg-white/[0.03]"><code>${escapeHtml(code)}</code></pre>`;
     codeBlocks.push(html);
     return ` CODEBLOCK${codeBlocks.length - 1} `;
   });