chore: add escape to prevent XSS (#833)

web/src/components/SearchBar.tsx

@@ -38,7 +38,7 @@ const SearchBar = () => {
   useEffect(() => {
     const text = locationStore.getState().query.text;
     setQueryText(text === undefined ? "" : text);
-  }, [locationStore.getState().query.text]);
+  }, [locationStore.state.query.text]);
 
   const handleMemoTypeItemClick = (type: MemoSpecType | undefined) => {
     const { type: prevType } = locationStore.getState().query ?? {};

web/src/labs/highlighter/index.ts

-const escapeRegExp = (str: string): string => {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-};
+import { escape } from "lodash";
 
 const walkthroughNodeWithKeyword = (node: HTMLElement, keyword: string) => {
   if (node.nodeType === 3) {
@@ -19,8 +17,8 @@ export const highlightWithWord = (html: string, keyword?: string): string => {
   if (!keyword) {
     return html;
   }
-  keyword = escapeRegExp(keyword);
+  keyword = escape(keyword);
   const wrap = document.createElement("div");
-  wrap.innerHTML = html;
+  wrap.innerHTML = escape(html);
   return walkthroughNodeWithKeyword(wrap, keyword);
 };

web/src/labs/marked/parser/Bold.ts

+import { escape } from "lodash";
 import { marked } from "..";
 import Link from "./Link";
 
@@ -14,7 +15,7 @@ const renderer = (rawStr: string): string => {
     return rawStr;
   }
 
-  const parsedContent = marked(matchResult[1], [], [Link]);
+  const parsedContent = marked(escape(matchResult[1]), [], [Link]);
   return `<strong>${parsedContent}</strong>`;
 };
 

web/src/labs/marked/parser/BoldEmphasis.ts

+import { escape } from "lodash";
 import { marked } from "..";
 import Link from "./Link";
 
@@ -14,7 +15,7 @@ const renderer = (rawStr: string): string => {
     return rawStr;
   }
 
-  const parsedContent = marked(matchResult[1], [], [Link]);
+  const parsedContent = marked(escape(matchResult[1]), [], [Link]);
   return `<strong><em>${parsedContent}</em></strong>`;
 };
 

web/src/labs/marked/parser/Emphasis.ts

+import { escape } from "lodash";
 import { marked } from "..";
 import Link from "./Link";
 
@@ -14,7 +15,7 @@ const renderer = (rawStr: string): string => {
     return rawStr;
   }
 
-  const parsedContent = marked(matchResult[1], [], [Link]);
+  const parsedContent = marked(escape(matchResult[1]), [], [Link]);
   return `<em>${parsedContent}</em>`;
 };
 

web/src/labs/marked/parser/Link.ts

@@ -17,7 +17,7 @@ const renderer = (rawStr: string): string => {
   if (!matchResult) {
     return rawStr;
   }
-  const parsedContent = marked(matchResult[1], [], [InlineCode, BoldEmphasis, Emphasis, Bold]);
+  const parsedContent = marked(escape(matchResult[1]), [], [InlineCode, BoldEmphasis, Emphasis, Bold]);
   return `<a class='link' target='_blank' rel='noreferrer' href='${escape(matchResult[2])}'>${parsedContent}</a>`;
 };