Dynamically add KaTeX style and tweak sanitization

Author: velopert

package.json

@@ -126,6 +126,7 @@
     "redux": "^4.0.4",
     "redux-devtools-extension": "^2.13.8",
     "rehype-katex": "^3.0.0",
+    "rehype-raw": "^4.0.2",
     "rehype-stringify": "^6.0.1",
     "remark": "^11.0.2",
     "remark-breaks": "^1.0.3",

src/components/common/MarkdownRender.tsx

@@ -17,8 +17,11 @@ import palette from '../../lib/styles/palette';
 import math from 'remark-math';
 import remark2rehype from 'remark-rehype';
 import katex from 'rehype-katex';
+import raw from 'rehype-raw';
+import remarkParse from 'remark-parse';
 import stringify from 'rehype-stringify';
-import 'katex/dist/katex.min.css';
+import { Helmet } from 'react-helmet-async';
+import katexWhitelist from '../../lib/katexWhitelist';
 
 export interface MarkdownRenderProps {
   markdown: string;
@@ -155,12 +158,15 @@ function filter(html: string) {
       'span',
       'img',
       'del',
+      ...katexWhitelist.tags,
     ],
     allowedAttributes: {
       a: ['href', 'name', 'target'],
       img: ['src'],
       iframe: ['src', 'allow', 'allowfullscreen', 'scrolling', 'class'],
-      '*': ['class', 'id'],
+      '*': ['class', 'id', 'aria-hidden'],
+      span: ['style'],
+      ...katexWhitelist.attributes,
     },
     allowedStyles: {
       '*': {
@@ -171,6 +177,9 @@ function filter(html: string) {
         ],
         'text-align': [/^left$/, /^right$/, /^center$/],
       },
+      span: {
+        ...katexWhitelist.styles,
+      },
     },
     allowedIframeHostnames: ['www.youtube.com', 'codesandbox.io', 'codepen.io'],
   });
@@ -194,11 +203,16 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
     ssrEnabled
       ? filter(
           remark()
+            .use(remarkParse)
+            .use(remark2rehype, { allowDangerousHTML: true })
+            .use(raw)
             .use(breaks)
             .use(prismPlugin)
-            .use(htmlPlugin)
             .use(embedPlugin)
             .use(slug)
+            .use(math)
+            .use(katex)
+            .use(stringify)
             .processSync(markdown)
             .toString(),
         )
@@ -216,13 +230,14 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
 
   useEffect(() => {
     remark()
+      .use(remarkParse)
+      .use(remark2rehype, { allowDangerousHTML: true })
+      .use(raw)
       .use(breaks)
       .use(prismPlugin)
-      .use(htmlPlugin)
       .use(embedPlugin)
       .use(slug)
       .use(math)
-      .use(remark2rehype)
       .use(katex)
       .use(stringify)
       .process(markdown, (err: any, file: any) => {
@@ -260,6 +275,16 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
 
   return (
     <Typography>
+      <Helmet>
+        {/\$(.*)\$/.test(markdown) && (
+          <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
+            integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"
+            crossOrigin="anonymous"
+          />
+        )}
+      </Helmet>
       {editing ? (
         <MarkdownRenderErrorBoundary
           onError={() => setHasTagError(true)}

src/lib/katexWhitelist.ts

@@ -0,0 +1,70 @@
+const tags = [
+  'math',
+  'annotation',
+  'semantics',
+  'mtext',
+  'mn',
+  'mo',
+  'mi',
+  'mspace',
+  'mover',
+  'munder',
+  'munderover',
+  'msup',
+  'msub',
+  'msubsup',
+  'mfrac',
+  'mroot',
+  'msqrt',
+  'mtable',
+  'mtr',
+  'mtd',
+  'mlabeledtr',
+  'mrow',
+  'menclose',
+  'mstyle',
+  'mpadded',
+  'mphantom',
+  'mglyph',
+];
+
+const attributes = tags.reduce((acc, current) => {
+  acc[current] = ['*'];
+  return acc;
+}, {} as Record<string, string[]>);
+
+const styles = [
+  'background-color',
+  'border-bottom-width',
+  'border-color',
+  'border-right-style',
+  'border-right-width',
+  'border-top-width',
+  'border-style',
+  'border-width',
+  'bottom',
+  'color',
+  'height',
+  'left',
+  'margin',
+  'margin-left',
+  'margin-right',
+  'margin-top',
+  'min-width',
+  'padding-left',
+  'position',
+  'top',
+  'width',
+  'vertical-align',
+].reduce((acc, current) => {
+  acc[current] = [/.*/];
+  return acc;
+}, {} as Record<string, RegExp[]>);
+
+const katexWhitelist = {
+  tags,
+  attributes,
+  styles,
+};
+
+export default katexWhitelist;

src/types/missingTypes.d.ts

@@ -7,6 +7,8 @@ declare module 'remark-slug';
 declare module 'remark-math';
 declare module 'remark-rehype';
 declare module 'rehype-katex';
+declare module 'remark-parse';
 declare module 'rehype-stringify';
+declare module 'rehype-raw';
 declare module 'unist-util-visit';
 declare module 'strip-markdown';

yarn.lock

@@ -6234,6 +6234,18 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hast-to-hyperscript@^7.0.0:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-7.0.4.tgz#7c4c037d9a8ea19b0a3fdb676a26448ad922353d"
+  integrity sha512-vmwriQ2H0RPS9ho4Kkbf3n3lY436QKLq6VaGA1pzBh36hBi3tm1DO9bR+kaJIbpT10UqaANDkMjxvjVfr+cnOA==
+  dependencies:
+    comma-separated-tokens "^1.0.0"
+    property-information "^5.3.0"
+    space-separated-tokens "^1.0.0"
+    style-to-object "^0.2.1"
+    unist-util-is "^3.0.0"
+    web-namespaces "^1.1.2"
+
 hast-util-from-parse5@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-5.0.3.tgz#3089dc0ee2ccf6ec8bc416919b51a54a589e097c"
@@ -6255,6 +6267,20 @@ hast-util-parse-selector@^2.0.0:
   resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.4.tgz#60c99d0b519e12ab4ed32e58f150ec3f61ed1974"
   integrity sha512-gW3sxfynIvZApL4L07wryYF4+C9VvH3AUi7LAnVXV4MneGEgwOByXvFo18BgmTWnm7oHAe874jKbIB1YhHSIzA==
 
+hast-util-raw@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-5.0.2.tgz#62288f311ec2f35e066a30d5e0277f963ad43a67"
+  integrity sha512-3ReYQcIHmzSgMq8UrDZHFL0oGlbuVGdLKs8s/Fe8BfHFAyZDrdv1fy/AGn+Fim8ZuvAHcJ61NQhVMtyfHviT/g==
+  dependencies:
+    hast-util-from-parse5 "^5.0.0"
+    hast-util-to-parse5 "^5.0.0"
+    html-void-elements "^1.0.0"
+    parse5 "^5.0.0"
+    unist-util-position "^3.0.0"
+    web-namespaces "^1.0.0"
+    xtend "^4.0.0"
+    zwitch "^1.0.0"
+
 hast-util-sanitize@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-2.0.1.tgz#de2f32c5aa9e93b61903e4381be6c49887d3829e"
@@ -6278,6 +6304,17 @@ hast-util-to-html@^6.0.0:
     unist-util-is "^3.0.0"
     xtend "^4.0.1"
 
+hast-util-to-parse5@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/hast-util-to-parse5/-/hast-util-to-parse5-5.1.2.tgz#09d27bee9ba9348ea05a6cfcc44e02f9083969b6"
+  integrity sha512-ZgYLJu9lYknMfsBY0rBV4TJn2xiwF1fXFFjbP6EE7S0s5mS8LIKBVWzhA1MeIs1SWW6GnnE4In6c3kPb+CWhog==
+  dependencies:
+    hast-to-hyperscript "^7.0.0"
+    property-information "^5.0.0"
+    web-namespaces "^1.0.0"
+    xtend "^4.0.0"
+    zwitch "^1.0.0"
+
 hast-util-to-text@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-to-text/-/hast-util-to-text-2.0.0.tgz#c59afa8798145c10d40c2f34f92900f4dfc8ac69"
@@ -10434,7 +10471,7 @@ prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2,
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
-property-information@^5.0.0:
+property-information@^5.0.0, property-information@^5.3.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.4.0.tgz#16e08f13f4e5c4a7be2e4ec431c01c4f8dba869a"
   integrity sha512-nmMWAm/3vKFGmmOWOcdLjgq/Hlxa+hsuR/px1Lp/UGEyc5A22A6l78Shc2C0E71sPmAqglni+HrS7L7VJ7AUCA==
@@ -11113,6 +11150,13 @@ rehype-parse@^6.0.0:
     parse5 "^5.0.0"
     xtend "^4.0.0"
 
+rehype-raw@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/rehype-raw/-/rehype-raw-4.0.2.tgz#5d3191689df96c8c651ce5f51a6c668d2c07b9c8"
+  integrity sha512-xQt94oXfDaO7sK9mJBtsZXkjW/jm6kArCoYN+HqKZ51O19AFHlp3Xa5UfZZ2tJkbpAZzKtgVUYvnconk9IsFuA==
+  dependencies:
+    hast-util-raw "^5.0.0"
+
 rehype-stringify@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-6.0.1.tgz#b6aa9f84d5276c5d247c62fc1ea15983a35a4575"
@@ -12399,6 +12443,13 @@ [email protected]:
   dependencies:
     inline-style-parser "0.1.1"
 
+style-to-object@^0.2.1:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.2.3.tgz#afcf42bc03846b1e311880c55632a26ad2780bcb"
+  integrity sha512-1d/k4EY2N7jVLOqf2j04dTc37TPOv/hHxZmvpg8Pdh8UYydxeu/C1W1U4vD8alzf5V2Gt7rLsmkr4dxAlDm9ng==
+  dependencies:
+    inline-style-parser "0.1.1"
+
 styled-components@^4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2"
@@ -13390,7 +13441,7 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
-web-namespaces@^1.1.2:
+web-namespaces@^1.0.0, web-namespaces@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
   integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
@@ -13941,3 +13992,8 @@ zip-stream@^1.2.0:
     compress-commons "^1.2.0"
     lodash "^4.8.0"
     readable-stream "^2.0.0"
+
+zwitch@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
+  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==