chore: comments from ai reviews

Author: kemuru

web/src/components/FileViewer/Viewers/MarkdownViewer.tsx

@@ -2,23 +2,14 @@ import React from "react";
 import styled from "styled-components";
 
 import { type DocRenderer } from "@cyntler/react-doc-viewer";
-import ReactMarkdown from "react-markdown";
+
+import MarkdownRenderer from "../../MarkdownRenderer";
 
 const Container = styled.div`
   padding: 16px;
 `;
 
-const StyledMarkdown = styled(ReactMarkdown)`
-  background-color: ${({ theme }) => theme.whiteBackground};
-  a {
-    font-size: 16px;
-  }
-  code {
-    color: ${({ theme }) => theme.secondaryText};
-  }
-`;
-
-const MarkdownRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
+const MarkdownDocRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
   if (!currentDocument) return null;
   const base64String = (currentDocument.fileData as string).split(",")[1];
 
@@ -27,12 +18,12 @@ const MarkdownRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
 
   return (
     <Container id="md-renderer">
-      <StyledMarkdown>{decodedData}</StyledMarkdown>
+      <MarkdownRenderer content={decodedData} />
     </Container>
   );
 };
 
-MarkdownRenderer.fileTypes = ["md", "text/plain"];
-MarkdownRenderer.weight = 1;
+MarkdownDocRenderer.fileTypes = ["md", "text/plain"];
+MarkdownDocRenderer.weight = 1;
 
-export default MarkdownRenderer;
+export default MarkdownDocRenderer;

web/src/components/MarkdownEditor.tsx

@@ -27,6 +27,7 @@ import {
 import InfoIcon from "svgs/icons/info-circle.svg";
 
 import { sanitizeMarkdown } from "utils/markdownSanitization";
+import { isValidUrl } from "utils/urlValidation";
 
 import { MDXEditorContainer, MDXEditorGlobalStyles } from "styles/mdxEditorTheme";
 
@@ -103,13 +104,16 @@ const MarkdownEditor: React.FC<IMarkdownEditor> = ({
     markdown: value,
     onChange: handleChange,
     placeholder,
+    suppressHtmlProcessing: true,
     plugins: [
       headingsPlugin(),
       listsPlugin(),
       quotePlugin(),
       thematicBreakPlugin(),
       markdownShortcutPlugin(),
-      linkPlugin(),
+      linkPlugin({
+        validateUrl: (url) => isValidUrl(url),
+      }),
       linkDialogPlugin(),
       tablePlugin(),
       toolbarPlugin({

web/src/components/MarkdownRenderer.tsx

@@ -10,9 +10,11 @@ import {
   markdownShortcutPlugin,
   linkPlugin,
   tablePlugin,
+  codeBlockPlugin,
 } from "@mdxeditor/editor";
 
 import { sanitizeMarkdown } from "utils/markdownSanitization";
+import { isValidUrl } from "utils/urlValidation";
 
 import { MDXRendererContainer } from "styles/mdxEditorTheme";
 
@@ -33,14 +35,18 @@ const MarkdownRenderer: React.FC<IMarkdownRenderer> = ({ content, className }) =
   const editorProps: MDXEditorProps = {
     markdown: sanitizedContent,
     readOnly: true,
+    suppressHtmlProcessing: true,
     plugins: [
       headingsPlugin(),
       listsPlugin(),
       quotePlugin(),
       thematicBreakPlugin(),
       markdownShortcutPlugin(),
-      linkPlugin(),
+      linkPlugin({
+        validateUrl: (url) => isValidUrl(url),
+      }),
       tablePlugin(),
+      codeBlockPlugin({ defaultCodeBlockLanguage: "text" }),
     ],
   };
 

web/src/utils/markdownSanitization.ts

@@ -1,25 +1,57 @@
 import { sanitizeUrl } from "./urlValidation";
 
+const sanitizeRepeated = (text: string, pattern: RegExp, replacement: string): string => {
+  let result = text;
+  let previousResult;
+  do {
+    previousResult = result;
+    result = result.replace(pattern, replacement);
+  } while (result !== previousResult);
+  return result;
+};
+
 export const sanitizeMarkdown = (markdown: string): string => {
   if (!markdown || typeof markdown !== "string") {
     return "";
   }
 
-  return markdown
-    .replace(/\[([^\]]*)\]\(([^)]+)\)/g, (match, text, url) => {
-      const sanitizedUrl = sanitizeUrl(url);
-      return `[${text}](${sanitizedUrl})`;
-    })
-    .replace(/<a\s+href="([^"]*)"[^>]*>([^<]*)<\/a>/gi, (match, url, text) => {
-      const sanitizedUrl = sanitizeUrl(url);
-      return `[${text}](${sanitizedUrl})`;
-    })
-    .replace(/<script[^>]*>.*?<\/script>/gis, "")
-    .replace(/<iframe[^>]*>.*?<\/iframe>/gis, "")
-    .replace(/<object[^>]*>.*?<\/object>/gis, "")
-    .replace(/<embed[^>]*\/?>/gi, "")
-    .replace(/javascript:/gi, "")
-    .replace(/vbscript:/gi, "")
-    .replace(/data:/gi, "")
-    .replace(/on\w+\s*=/gi, "");
+  let sanitized = markdown;
+
+  sanitized = sanitized.replace(/\[([^\]]*)\]\(([^)]+)\)/g, (match, text, url) => {
+    const sanitizedUrl = sanitizeUrl(url);
+    return `[${text}](${sanitizedUrl})`;
+  });
+
+  sanitized = sanitized.replace(/<a\s+href="([^"]*)"[^>]*>([^<]*)<\/a>/gi, (match, url, text) => {
+    const sanitizedUrl = sanitizeUrl(url);
+    return `[${text}](${sanitizedUrl})`;
+  });
+
+  sanitized = sanitizeRepeated(sanitized, /<script[^>]*>.*?<\/script>/gis, "");
+  sanitized = sanitizeRepeated(sanitized, /<iframe[^>]*>.*?<\/iframe>/gis, "");
+  sanitized = sanitizeRepeated(sanitized, /<object[^>]*>.*?<\/object>/gis, "");
+  sanitized = sanitizeRepeated(sanitized, /<embed[^>]*\/?>/gi, "");
+  sanitized = sanitizeRepeated(sanitized, /<form[^>]*>.*?<\/form>/gis, "");
+  sanitized = sanitizeRepeated(sanitized, /<input[^>]*\/?>/gi, "");
+  sanitized = sanitizeRepeated(sanitized, /<button[^>]*>.*?<\/button>/gis, "");
+  sanitized = sanitizeRepeated(sanitized, /<applet[^>]*>.*?<\/applet>/gis, "");
+  sanitized = sanitizeRepeated(sanitized, /<audio[^>]*>.*?<\/audio>/gis, "");
+  sanitized = sanitizeRepeated(sanitized, /<video[^>]*>.*?<\/video>/gis, "");
+  sanitized = sanitizeRepeated(sanitized, /<svg[^>]*>.*?<\/svg>/gis, "");
+  sanitized = sanitizeRepeated(sanitized, /<canvas[^>]*>.*?<\/canvas>/gis, "");
+
+  sanitized = sanitizeRepeated(sanitized, /javascript:/gi, "");
+  sanitized = sanitizeRepeated(sanitized, /vbscript:/gi, "");
+
+  sanitized = sanitizeRepeated(sanitized, /on\w+\s*=/gi, "");
+  sanitized = sanitizeRepeated(sanitized, /style\s*=/gi, "");
+
+  sanitized = sanitizeRepeated(sanitized, /<meta[^>]*\/?>/gi, "");
+  sanitized = sanitizeRepeated(sanitized, /<link[^>]*\/?>/gi, "");
+  sanitized = sanitizeRepeated(sanitized, /<base[^>]*\/?>/gi, "");
+
+  sanitized = sanitized.replace(/&#x[0-9a-f]+;/gi, "");
+  sanitized = sanitized.replace(/&#[0-9]+;/gi, "");
+
+  return sanitized;
 };

web/src/utils/urlValidation.ts

@@ -1,7 +1,21 @@
-const DANGEROUS_PROTOCOLS = ["javascript:", "data:", "vbscript:", "file:", "about:"];
+const DANGEROUS_PROTOCOLS = ["javascript:", "vbscript:", "file:", "about:", "blob:", "filesystem:"];
 
 const ALLOWED_PROTOCOLS = ["http:", "https:", "mailto:", "tel:", "ftp:"];
 
+const ALLOWED_DATA_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"];
+
+const isValidDataUri = (url: string): boolean => {
+  const dataUriRegex = /^data:([^;,]+)(;base64)?,/i;
+  const match = url.match(dataUriRegex);
+
+  if (!match) {
+    return false;
+  }
+
+  const mimeType = match[1].toLowerCase();
+  return ALLOWED_DATA_TYPES.includes(mimeType);
+};
+
 export const isValidUrl = (url: string): boolean => {
   if (!url || typeof url !== "string") {
     return false;
@@ -13,6 +27,10 @@ export const isValidUrl = (url: string): boolean => {
     return false;
   }
 
+  if (trimmedUrl.startsWith("data:")) {
+    return isValidDataUri(trimmedUrl);
+  }
+
   for (const protocol of DANGEROUS_PROTOCOLS) {
     if (trimmedUrl.startsWith(protocol)) {
       return false;