Merge commit from fork

* fix: sanitize html on startup

* cleanup

Author: mscolnick

frontend/package.json

@@ -118,6 +118,7 @@
     "cssnano": "^7.1.1",
     "date-fns": "^4.1.0",
     "dequal": "^2.0.3",
+    "dompurify": "^3.2.3",
     "eslint-plugin-header": "^3.1.1",
     "htm": "^3.1.1",
     "html-react-parser": "^5.2.6",
@@ -212,6 +213,7 @@
     "@swc-jotai/react-refresh": "^0.3.0",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
+    "@types/dompurify": "^3.2.0",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.3.0",

frontend/src/components/editor/cell/useRunCells.ts

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { closeCompletion } from "@codemirror/autocomplete";
+import { atom, useSetAtom } from "jotai";
 import useEvent from "react-use-event-hook";
 import {
   getNotebook,
@@ -15,6 +16,8 @@ import { useRequestClient } from "@/core/network/requests";
 import type { RunRequest } from "@/core/network/types";
 import { Logger } from "@/utils/Logger";
 
+export const hasRunAnyCellAtom = atom<boolean>(false);
+
 /**
  * Creates a function that runs all cells that have been edited or interrupted.
  */
@@ -50,6 +53,7 @@ export function useRunAllCells() {
 export function useRunCells() {
   const { prepareForRun } = useCellActions();
   const { sendRun } = useRequestClient();
+  const setHasRunAnyCell = useSetAtom(hasRunAnyCellAtom);
 
   const runCellsMemoized = useEvent(async (cellIds: CellId[]) => {
     if (cellIds.length === 0) {
@@ -103,6 +107,9 @@ export async function runCells({
     prepareForRun({ cellId });
   }
 
+  // Set a flag that a user has manually run at least one cell.
+  setHasRunAnyCell(true);
+
   // Send the run request to the Kernel
   await sendRun({ cellIds: cellIds, codes: codes }).catch((error) => {
     Logger.error(error);

frontend/src/plugins/core/RenderHTML.tsx

@@ -5,8 +5,15 @@ import parse, {
   Element,
   type HTMLReactParserOptions,
 } from "html-react-parser";
-import React, { isValidElement, type JSX, type ReactNode, useId } from "react";
+import React, {
+  isValidElement,
+  type JSX,
+  type ReactNode,
+  useId,
+  useMemo,
+} from "react";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
+import { sanitizeHtml, useSanitizeHtml } from "./sanitize";
 
 type ReplacementFn = NonNullable<HTMLReactParserOptions["replace"]>;
 type TransformFn = NonNullable<HTMLReactParserOptions["transform"]>;
@@ -133,6 +140,20 @@ const CopyableCode = ({ children }: { children: ReactNode }) => {
 };
 
 export const renderHTML = ({ html, additionalReplacements = [] }: Options) => {
+  return (
+    <RenderHTML html={html} additionalReplacements={additionalReplacements} />
+  );
+};
+
+const RenderHTML = ({ html, additionalReplacements = [] }: Options) => {
+  const shouldSanitizeHtml = useSanitizeHtml();
+  const sanitizedHtml = useMemo(() => {
+    if (shouldSanitizeHtml) {
+      return sanitizeHtml(html);
+    }
+    return html;
+  }, [html, shouldSanitizeHtml]);
+
   const renderFunctions: ReplacementFn[] = [
     replaceValidTags,
     replaceValidIframes,
@@ -146,7 +167,7 @@ export const renderHTML = ({ html, additionalReplacements = [] }: Options) => {
     removeWrappingHtmlTags,
   ];
 
-  return parse(html, {
+  return parse(sanitizedHtml, {
     replace: (domNode: DOMNode, index: number) => {
       for (const renderFunction of renderFunctions) {
         const replacement = renderFunction(domNode, index);

frontend/src/plugins/core/sanitize.ts

@@ -0,0 +1,72 @@
+import DOMPurify, { type Config } from "dompurify";
+import { atom, useAtomValue } from "jotai";
+import { hasRunAnyCellAtom } from "@/components/editor/cell/useRunCells";
+import { getInitialAppMode } from "@/core/mode";
+
+/**
+ * Whether to sanitize the html.
+ * When running as an app or with auto_instantiate enabled
+ * we ignore sanitization because they should be treated as a website.
+ */
+const sanitizeHtmlAtom = atom<boolean>((get) => {
+  const hasRunAnyCell = get(hasRunAnyCellAtom);
+
+  // If a user has specifically run at least one cell, we don't need to sanitize.
+  // HTML needs to be rich to allow for interactive widgets and other dynamic content.
+  if (hasRunAnyCell) {
+    return false;
+  }
+
+  const isInAppMode = getInitialAppMode() === "read";
+  // Apps need to run javascript and load external resources.
+  if (isInAppMode) {
+    return false;
+  }
+
+  return true;
+});
+
+export function useSanitizeHtml() {
+  return useAtomValue(sanitizeHtmlAtom);
+}
+
+// preserve target=_blank https://github.com/cure53/DOMPurify/issues/317#issuecomment-912474068
+const TEMPORARY_ATTRIBUTE = "data-temp-href-target";
+DOMPurify.addHook("beforeSanitizeAttributes", (node) => {
+  if (node.tagName === "A") {
+    if (!node.hasAttribute("target")) {
+      node.setAttribute("target", "_self");
+    }
+
+    if (node.hasAttribute("target")) {
+      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute("target") || "");
+    }
+  }
+});
+
+DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+  if (node.tagName === "A" && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+    node.setAttribute("target", node.getAttribute(TEMPORARY_ATTRIBUTE) || "");
+    node.removeAttribute(TEMPORARY_ATTRIBUTE);
+    if (node.getAttribute("target") === "_blank") {
+      node.setAttribute("rel", "noopener");
+    }
+  }
+});
+
+/**
+ * This removes script tags, form tags, iframe tags, and other potentially dangerous tags
+ */
+export function sanitizeHtml(html: string) {
+  const sanitizationOptions: Config = {
+    // Default to permit HTML, SVG and MathML, this limits to HTML only
+    USE_PROFILES: { html: true, svg: true, mathMl: true },
+    // glue elements like style, script or others to document.body and prevent unintuitive browser behavior in several edge-cases
+    FORCE_BODY: true,
+    CUSTOM_ELEMENT_HANDLING: {
+      tagNameCheck: /^marimo-[A-Za-z][\w-]*$/,
+      attributeNameCheck: /^[A-Za-z][\w-]*$/,
+    },
+  };
+  return DOMPurify.sanitize(html, sanitizationOptions);
+}