@xexr/blog-platform 1.0.16 → 1.0.17

package/dist/app/blog/[slug]/page.mdx-security.test.ts

@@ -0,0 +1,135 @@
+import React from "react";
+import { renderToPipeableStream } from "react-dom/server";
+import { PassThrough } from "stream";
+import { describe, expect, it } from "vitest";
+
+import ArticlePage from "./page";
+import type { PublishedArticle } from "../../../types/contracts";
+
+const article: PublishedArticle = {
+  id: "article-security",
+  slug: "mdx-security",
+  title: "MDX security",
+  excerpt: "Renderer hardening fixtures.",
+  content: "Safe content.",
+  readingSeconds: 60,
+  wordCount: 120,
+  publishedAt: "2026-05-13T09:00:00.000Z",
+  updatedAt: "2026-05-13T09:00:00.000Z",
+  author: null,
+  site: {
+    id: "site-1",
+    name: "Example Blog",
+    tagline: "Useful writing",
+    description: "Articles about useful systems.",
+    domain: "example.com",
+    toneAdjectives: [],
+    locale: "en",
+  },
+  topics: [],
+  meta: {
+    canonicalUrl: "https://example.com/blog/mdx-security",
+    keywords: [],
+  },
+  version: 1,
+};
+
+describe("ArticlePage MDX security", () => {
+  it("renders expected markdown and figure HTML through the real article renderer", async () => {
+    const html = await renderToHtml(
+      React.createElement(ArticlePage, {
+        article: {
+          ...article,
+          content: [
+            "## Safe section",
+            "",
+            "<figure>",
+            "",
+            "![Dashboard](https://example.com/dashboard.png)",
+            "",
+            '<figcaption>Dashboard caption <span class="blog-image-credit">Credit: Example</span></figcaption>',
+            "",
+            "</figure>",
+            "",
+            "[Read more](https://example.com/read-more)",
+          ].join("\n"),
+        },
+        showShareLinks: false,
+      }),
+    );
+
+    expect(html).toContain("Safe section");
+    expect(html).toContain("<figure>");
+    expect(html).toContain("<figcaption>");
+    expect(html).toContain("Dashboard caption");
+    expect(html).toContain('src="https://example.com/dashboard.png"');
+    expect(html).toContain('href="https://example.com/read-more"');
+  });
+
+  it("removes executable raw HTML and unsafe URL protocols from rendered articles", async () => {
+    const html = await renderToHtml(
+      React.createElement(ArticlePage, {
+        article: {
+          ...article,
+          content: [
+            "Safe paragraph.",
+            "",
+            "<script>alert('script')</script>",
+            '<img src="https://example.com/safe.png" onerror="alert(1)" alt="event handler" />',
+            '<a href="javascript:alert(2)">unsafe link</a>',
+            '<img src="data:text/html,<script>alert(3)</script>" alt="data url" />',
+            '<iframe src="https://example.com/embed"></iframe>',
+            '<object data="https://example.com/payload"></object>',
+            '<embed src="https://example.com/payload" />',
+          ].join("\n"),
+        },
+        showShareLinks: false,
+      }),
+    );
+
+    const articleBodyHtml = extractArticleBodyHtml(html);
+
+    expect(articleBodyHtml).toContain("Safe paragraph.");
+    expect(articleBodyHtml).toContain("unsafe link");
+    expect(articleBodyHtml).not.toContain("<script");
+    expect(articleBodyHtml).not.toContain("onerror");
+    expect(articleBodyHtml).not.toContain("javascript:");
+    expect(articleBodyHtml).not.toContain("data:text/html");
+    expect(articleBodyHtml).not.toContain("<iframe");
+    expect(articleBodyHtml).not.toContain("<object");
+    expect(articleBodyHtml).not.toContain("<embed");
+  });
+});
+
+function extractArticleBodyHtml(html: string): string {
+  const start = html.indexOf('id="article-body"');
+  const end = html.indexOf('<script type="application/ld+json"', start);
+
+  if (start === -1) {
+    throw new Error("Article body not found in rendered HTML");
+  }
+
+  return end === -1 ? html.slice(start) : html.slice(start, end);
+}
+
+function renderToHtml(element: React.ReactElement): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let html = "";
+    const stream = new PassThrough();
+    stream.setEncoding("utf8");
+    stream.on("data", (chunk: string) => {
+      html += chunk;
+    });
+    stream.on("end", () => resolve(html));
+    stream.on("error", reject);
+
+    const { pipe } = renderToPipeableStream(element, {
+      onAllReady() {
+        pipe(stream);
+      },
+      onError(error) {
+        reject(error instanceof Error ? error : new Error(String(error)));
+      },
+    });
+  });
+}