Added rehypeSanitize to fix preview xss issues (#323)

* Added rehypeSanitize to improve preview xss issues

Added rehypeSanitize to handle dangerous markdown
Added options for rehypeKatex to ensure formula marking

* Add the rehype-sanitize dependency

* Add package-lock.json

frontend/package.json

@@ -71,6 +71,7 @@
 		"rehype-external-links": "^3.0.0",
 		"rehype-katex": "^7.0.1",
 		"rehype-rewrite": "^4.0.2",
+		"rehype-sanitize": "^6.0.0",
 		"remark-math": "^6.0.0",
 		"vite-plugin-package-version": "^1.1.0",
 		"yorkie-js-sdk": "^0.4.31"

frontend/src/components/editor/Preview.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import rehypeExternalLinks from "rehype-external-links";
 import rehypeKatex from "rehype-katex";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import { getCodeString } from "rehype-rewrite";
 import remarkMath from "remark-math";
 import { useCurrentTheme } from "../../hooks/useCurrentTheme";
@@ -57,7 +58,20 @@ function Preview() {
 				},
 			}}
 			remarkPlugins={[remarkMath]}
-			rehypePlugins={[rehypeKatex, [rehypeExternalLinks, { target: "_blank" }]]}
+			rehypePlugins={[
+				[
+					rehypeSanitize,
+					{
+						...defaultSchema,
+						attributes: {
+							...defaultSchema.attributes,
+							code: [["className", /^language-./, "math-inline", "math-display"]],
+						},
+					},
+				],
+				rehypeKatex,
+				[rehypeExternalLinks, { target: "_blank" }],
+			]}
 			components={{
 				code: ({ children = [], className, ...props }) => {
 					// https://www.npmjs.com/package/@uiw/react-markdown-preview#support-custom-katex-preview