Sanitize rendered web content (#77)

apps/logicsrc-web/src/app/blog/[slug]/page.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from "react";
 import type { Metadata } from "next";
 import { publicClient } from "@/lib/supabase";
 import { SiteShell } from "@/components/site-shell";
+import { sanitizeRenderedHtml } from "@/lib/html";
 
 export const dynamic = "force-dynamic";
 
@@ -84,6 +85,7 @@ export default async function BlogPostPage({
     mainEntityOfPage: `${SITE_URL}/blog/${post.slug}`,
     publisher: { "@id": `${SITE_URL}/#organization` },
   };
+  const html = sanitizeRenderedHtml(post.html);
 
   return (
     <SiteShell active="Blog">
@@ -114,7 +116,7 @@ export default async function BlogPostPage({
         <div
           className="blog-content"
           style={{ lineHeight: 1.7 }}
-          dangerouslySetInnerHTML={{ __html: post.html }}
+          dangerouslySetInnerHTML={{ __html: html }}
         />
       </article>
     </SiteShell>

apps/logicsrc-web/src/app/docs/[slug]/page.tsx

@@ -5,6 +5,7 @@ import type { Metadata } from "next";
 import { marked } from "marked";
 import { DOC_SLUGS, docExcerpt, docTitle, readDoc } from "@/lib/docs";
 import { SiteShell } from "@/components/site-shell";
+import { sanitizeRenderedHtml } from "@/lib/html";
 
 // Statically generate one page per curated doc at build time.
 export function generateStaticParams(): Array<{ slug: string }> {
@@ -37,7 +38,8 @@ export default async function DocPage({
   const md = readDoc(slug);
   if (!md) notFound();
 
-  const html = await marked.parse(md);
+  const rawHtml = await marked.parse(md);
+  const html = sanitizeRenderedHtml(rawHtml);
 
   return (
     <SiteShell active="Docs">

apps/logicsrc-web/src/lib/html.ts

@@ -0,0 +1,33 @@
+import sanitizeHtml from "sanitize-html";
+
+const allowedTags = sanitizeHtml.defaults.allowedTags.concat([
+  "figure",
+  "figcaption",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "img"
+]);
+
+const allowedAttributes = {
+  ...sanitizeHtml.defaults.allowedAttributes,
+  a: ["href", "name", "target", "rel"],
+  img: ["src", "alt", "title", "width", "height", "loading"],
+  code: ["class"],
+  pre: ["class"]
+};
+
+export function sanitizeRenderedHtml(html: string): string {
+  return sanitizeHtml(html, {
+    allowedTags,
+    allowedAttributes,
+    allowedSchemes: ["http", "https", "mailto", "tel"],
+    allowedSchemesByTag: {
+      img: ["http", "https"]
+    },
+    allowProtocolRelative: false
+  });
+}