npm - @marimo-team/islands - Versions diffs - 0.17.0 → 0.17.2 - Mend

@marimo-team/islands 0.17.0 → 0.17.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (616) hide show

package/src/plugins/core/__test__/RenderHTML.test.ts CHANGED Viewed

@@ -1,11 +1,13 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { describe, expect, test } from "vitest";
-import { renderHTML } from "../RenderHTML";
+import { visibleForTesting } from "../RenderHTML";
-describe("RenderHTML", () => {
+const { parseHtml } = visibleForTesting;
+describe("parseHtml", () => {
   test("renders HTML", () => {
     const html = "<h1>Hello</h1>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       <h1>
         Hello
       </h1>
@@ -14,7 +16,7 @@ describe("RenderHTML", () => {
   test("no closing HTML", () => {
     const html = "<h1>Hello";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       <h1>
         Hello
       </h1>
@@ -23,7 +25,7 @@ describe("RenderHTML", () => {
   test("script", () => {
     const html = "<h1>Hello</h1><script>alert('hi')</script>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       [
         <h1>
           Hello
@@ -41,7 +43,7 @@ describe("RenderHTML", () => {
   test("iframe", () => {
     const html = '<iframe src="https://example.com" "crossorigin"></iframe>';
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       <div
         dangerouslySetInnerHTML={
           {
@@ -55,7 +57,7 @@ describe("RenderHTML", () => {
   test("codehilite with copy button", () => {
     const html =
       '<div class="codehilite"><pre><code>console.log("Hello");</code></pre></div>';
-    const result = renderHTML({ html });
+    const result = parseHtml({ html });
     // Check that the result is wrapped in a CopyableCode component
     expect(result).toMatchInlineSnapshot(`
@@ -75,18 +77,18 @@ describe("RenderHTML", () => {
   test("custom tags - valid", () => {
     let html = "<foobar></foobar>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot("<foobar />");
+    expect(parseHtml({ html })).toMatchInlineSnapshot("<foobar />");
     html = "<foobar2></foobar2>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot("<foobar2 />");
+    expect(parseHtml({ html })).toMatchInlineSnapshot("<foobar2 />");
     html = "<marimo-slider></marimo-slider>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot("<marimo-slider />");
+    expect(parseHtml({ html })).toMatchInlineSnapshot("<marimo-slider />");
   });
   test("custom tags - invalid", () => {
     let html = "<c&></c&> lorem";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       [
         <React.Fragment />,
         " lorem",
@@ -94,28 +96,28 @@ describe("RenderHTML", () => {
     `);
     html = "<p><someone@gmail.com></p>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       <p>
         <React.Fragment />
       </p>
     `);
     html = "<p><1></p>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       <p>
         &lt;1&gt;
       </p>
     `);
     html = "<p><1/></p>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       <p>
         &lt;1/&gt;
       </p>
     `);
     html = "<p><a:b></a:b></p>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       <p>
         <React.Fragment />
       </p>
@@ -124,7 +126,7 @@ describe("RenderHTML", () => {
   test("removes body tags but preserves children", () => {
     const html = "<body><h1>Hello</h1><p>World</p></body>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       <React.Fragment>
         <h1>
           Hello
@@ -138,7 +140,7 @@ describe("RenderHTML", () => {
   test("removes nested body tags", () => {
     const html = "<div><body><span>Content</span></body></div>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       <div>
         <React.Fragment>
           <span>
@@ -152,7 +154,7 @@ describe("RenderHTML", () => {
   test("removes html tags but preserves children", () => {
     const html =
       "<html><head><title>Test</title></head><body><p>Content</p></body></html>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       <React.Fragment>
         <head>
           <title>
@@ -170,7 +172,7 @@ describe("RenderHTML", () => {
   test("removes nested html tags", () => {
     const html = "<div><html><span>Content</span></html></div>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       <div>
         <React.Fragment>
           <span>
@@ -183,7 +185,7 @@ describe("RenderHTML", () => {
   test("remove nested body in html", () => {
     const html = "<html><body><span>Content</span></body></html>";
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       <React.Fragment>
         <React.Fragment>
           <span>
@@ -195,11 +197,11 @@ describe("RenderHTML", () => {
   });
 });
-describe("RenderHTML with < nad >", () => {
+describe("parseHtml with < nad >", () => {
   const html =
     'thread <unnamed> panicked at "assertion failed: `(left == right)`"';
   test("<unnamed>", () => {
-    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
       [
         "thread ",
         <unnamed>
@@ -211,7 +213,7 @@ describe("RenderHTML with < nad >", () => {
   test("<unnamed> sanitized", () => {
     const sanitized = html.replaceAll("<", "&lt;").replaceAll(">", "&gt;");
-    expect(renderHTML({ html: sanitized })).toMatchInlineSnapshot(
+    expect(parseHtml({ html: sanitized })).toMatchInlineSnapshot(
       `"thread <unnamed> panicked at "assertion failed: \`(left == right)\`""`,
     );
   });

package/src/plugins/core/__test__/renderHTML-sanitization.test.tsx ADDED Viewed

@@ -0,0 +1,131 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { renderHTML } from "../RenderHTML";
+// Mock only the useSanitizeHtml hook, use real sanitizeHtml
+vi.mock("../sanitize", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../sanitize")>();
+  return {
+    ...actual,
+    useSanitizeHtml: vi.fn(() => false), // Default to not sanitizing based on state
+  };
+});
+describe("renderHTML with alwaysSanitizeHtml", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  test("alwaysSanitizeHtml=true forces sanitization even when useSanitizeHtml=false", () => {
+    const html = "<p>Test</p><script>alert('xss')</script>";
+    const result = renderHTML({ html, alwaysSanitizeHtml: true });
+    const { container } = render(result);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<p>Test</p>"`);
+  });
+  test("alwaysSanitizeHtml=false respects useSanitizeHtml=false (no sanitization)", () => {
+    const html = "<p>Test</p><script>alert('test')</script>";
+    const result = renderHTML({ html, alwaysSanitizeHtml: false });
+    const { container } = render(result);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<p>Test</p><script>alert('test')</script>"`,
+    );
+  });
+  test("alwaysSanitizeHtml=false respects useSanitizeHtml=true (sanitize)", async () => {
+    // Import to get access to the mock
+    const sanitizeModule = await import("../sanitize");
+    vi.mocked(sanitizeModule.useSanitizeHtml).mockReturnValue(true);
+    const html = "<p>Test</p><script>alert('test')</script>";
+    const result = renderHTML({ html, alwaysSanitizeHtml: false });
+    const { container } = render(result);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<p>Test</p>"`);
+  });
+  test("default alwaysSanitizeHtml=true sanitizes by default", () => {
+    const html = "<p>Test</p><script>alert('xss')</script>";
+    // Don't pass alwaysSanitizeHtml (should default to true)
+    const result = renderHTML({ html });
+    const { container } = render(result);
+    // Script should be removed by default sanitization
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<p>Test</p>"`);
+  });
+  test("renders sanitized content correctly", () => {
+    const html = "<p>Safe content</p><script>alert('unsafe')</script>";
+    const result = renderHTML({ html, alwaysSanitizeHtml: true });
+    const { container } = render(result);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<p>Safe content</p>"`);
+  });
+  test("renders unsanitized content when allowed", () => {
+    const html =
+      '<p>Safe content</p><form action="//evil.com"><input type="text"></form>';
+    const result = renderHTML({ html, alwaysSanitizeHtml: false });
+    const { container } = render(result);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<p>Safe content</p><form action="//evil.com"><input type="text"></form>"`,
+    );
+  });
+  test("sanitization happens before parsing", () => {
+    const html = '<p>Content</p><div onload="alert(1)">Div</div>';
+    const result = renderHTML({ html, alwaysSanitizeHtml: true });
+    const { container } = render(result);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<p>Content</p><div>Div</div>"`,
+    );
+  });
+});
+describe("renderHTML sanitization integration", () => {
+  test("text/markdown content should be sanitized", () => {
+    const markdownHtml =
+      '<span class="markdown"><p>Content</p><script>alert("xss")</script></span>';
+    const result = renderHTML({ html: markdownHtml, alwaysSanitizeHtml: true });
+    const { container } = render(result);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<span class="markdown"><p>Content</p></span>"`,
+    );
+  });
+  test("data attributes preserved with sanitization", () => {
+    const richHtml = '<div data-custom="test"><p>Content</p></div>';
+    const result = renderHTML({
+      html: richHtml,
+      alwaysSanitizeHtml: true,
+    });
+    const { container } = render(result);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<div data-custom="test"><p>Content</p></div>"`,
+    );
+  });
+  test("data attributes preserved without sanitization", () => {
+    const richHtml = '<div data-custom="test"><p>Content</p></div>';
+    const result = renderHTML({
+      html: richHtml,
+      alwaysSanitizeHtml: false,
+    });
+    const { container } = render(result);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<div data-custom="test"><p>Content</p></div>"`,
+    );
+  });
+  test("dangerous content is sanitized when alwaysSanitizeHtml=true", () => {
+    const dangerousHtml = '<img src=x onerror="alert(1)"><p>Content</p>';
+    const result = renderHTML({
+      html: dangerousHtml,
+      alwaysSanitizeHtml: true,
+    });
+    const { container } = render(result);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<img src="x"><p>Content</p>"`,
+    );
+  });
+});