safe markdown renderer (#609, #403)

josStorer · Jan 26, 2024 · 35cb508 · 35cb508
1 parent faf5e87
commit 35cb508
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 1 deletion.
diff --git a/src/components/MarkdownRender/markdown-without-katex.jsx b/src/components/MarkdownRender/markdown-without-katex.jsx
@@ -5,11 +5,73 @@ import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
 import { Pre } from './Pre'
 import { Hyperlink } from './Hyperlink'
+import { memo } from 'react'
 
 export function MarkdownRender(props) {
   return (
     <div dir="auto">
       <ReactMarkdown
+        allowedElements={[
+          'div',
+          'p',
+          'span',
+
+          'video',
+          'img',
+
+          'abbr',
+          'acronym',
+          'b',
+          'blockquote',
+          'code',
+          'em',
+          'i',
+          'li',
+          'ol',
+          'ul',
+          'strong',
+          'table',
+          'tr',
+          'td',
+          'th',
+
+          'details',
+          'summary',
+          'kbd',
+          'samp',
+          'sub',
+          'sup',
+          'ins',
+          'del',
+          'var',
+          'q',
+          'dl',
+          'dt',
+          'dd',
+          'ruby',
+          'rt',
+          'rp',
+
+          'br',
+          'hr',
+
+          'h1',
+          'h2',
+          'h3',
+          'h4',
+          'h5',
+          'h6',
+
+          'thead',
+          'tbody',
+          'tfoot',
+          'u',
+          's',
+          'a',
+          'pre',
+          'cite',
+        ]}
+        unwrapDisallowed={true}
         remarkPlugins={[remarkGfm, remarkBreaks]}
         rehypePlugins={[
           rehypeRaw,
@@ -37,4 +99,4 @@ MarkdownRender.propTypes = {
   ...ReactMarkdown.propTypes,
 }
 
-export default MarkdownRender
+export default memo(MarkdownRender)
diff --git a/src/components/MarkdownRender/markdown.jsx b/src/components/MarkdownRender/markdown.jsx
@@ -14,6 +14,67 @@ export function MarkdownRender(props) {
   return (
     <div dir="auto">
       <ReactMarkdown
+        allowedElements={[
+          'div',
+          'p',
+          'span',
+
+          'video',
+          'img',
+
+          'abbr',
+          'acronym',
+          'b',
+          'blockquote',
+          'code',
+          'em',
+          'i',
+          'li',
+          'ol',
+          'ul',
+          'strong',
+          'table',
+          'tr',
+          'td',
+          'th',
+
+          'details',
+          'summary',
+          'kbd',
+          'samp',
+          'sub',
+          'sup',
+          'ins',
+          'del',
+          'var',
+          'q',
+          'dl',
+          'dt',
+          'dd',
+          'ruby',
+          'rt',
+          'rp',
+
+          'br',
+          'hr',
+
+          'h1',
+          'h2',
+          'h3',
+          'h4',
+          'h5',
+          'h6',
+
+          'thead',
+          'tbody',
+          'tfoot',
+          'u',
+          's',
+          'a',
+          'pre',
+          'cite',
+        ]}
+        unwrapDisallowed={true}
         remarkPlugins={[remarkMath, remarkGfm, remarkBreaks]}
         rehypePlugins={[
           rehypeKatex,