close #29

examples/web/components/CodePreview/CodePreviewMarked.tsx

@@ -3,6 +3,7 @@ import markedShakuCodeAnnotate from "marked-shaku-code-annotate";
 import { useDeferredValue } from "react";
 import { Fetcher } from "../Fetcher";
 import styles from "./CodePreview.module.css";
+import { sanitize } from "./sanitize";
 
 import { View } from "../bare";
 
@@ -30,7 +31,7 @@ const getProcessedResult = (code: string) => {
     processedResultStore.set(
       key,
       // @ts-ignore
-      new Fetcher(() => marked.parse(code))
+      new Fetcher(() => marked.parse(code).then(sanitize))
     );
 
     if (processedResultStore.size > 5) {

examples/web/components/CodePreview/CodePreviewRemark.tsx

@@ -6,6 +6,7 @@ import { remark } from "remark";
 import html from "remark-html";
 import { remarkShakuCodeAnnotate } from "remark-shaku-code-annotate";
 import { Fetcher } from "../Fetcher";
+import { sanitize } from "./sanitize";
 
 let fetcher: Fetcher<ReturnType<typeof remark>> | null = null;
 const getProcessor = () => {
@@ -26,7 +27,9 @@ const getProcessedResult = (
   if (!processedResultStore.has(key)) {
     processedResultStore.set(
       key,
-      new Fetcher(() => processor.process(code).then((data) => data.toString()))
+      new Fetcher(() =>
+        processor.process(code).then((data) => sanitize(data.toString()))
+      )
     );
 
     if (processedResultStore.size > 5) {

examples/web/components/CodePreview/sanitize.ts

@@ -0,0 +1,45 @@
+import sanitizeHtml from "sanitize-html";
+
+export const sanitize = (html: string) => {
+  return sanitizeHtml(html, {
+    allowedTags: [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "p",
+      "b",
+      "i",
+      "code",
+      "em",
+      "blockquote",
+      "strong",
+      "pre",
+      "a",
+      "ul",
+      "ol",
+      "li",
+      "span",
+      "hr",
+      "br",
+      "table",
+      "thead",
+      "tbody",
+      "tr",
+      "th",
+      "td",
+      "mark",
+      "div",
+    ],
+    allowedAttributes: {
+      a: ["href", "target"],
+      span: ["class", "style"],
+      div: ["class", "style"],
+      pre: ["class", "style"],
+      p: ["class", "style"],
+      mark: ["data-*", "class"],
+    },
+  });
+};

examples/web/package.json

@@ -17,14 +17,15 @@
     "@types/mdx": "^2.0.5",
     "copy-webpack-plugin": "^11.0.0",
     "dom-to-image": "2.6.0",
-    "migacss": "^0.0.6",
     "marked": "^10.0.0",
+    "marked-shaku-code-annotate": "*",
+    "migacss": "^0.0.6",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "remark-shaku-code-annotate": "*",
-    "marked-shaku-code-annotate": "*",
+    "sanitize-html": "^2.11.0",
     "shaku-ui": "*",
     "shiki": "^0.14.5"
   },