fix(app): Use our own Markdown component that sanitizes HTML following GitHub-like rules

packages/openneuro-app/package.json

@@ -27,11 +27,12 @@
     "bytes": "^3.0.0",
     "comlink": "^4.0.5",
     "date-fns": "^2.16.1",
+    "dompurify": "^3.0.8",
     "draft-js": "^0.11.7",
     "email-validator": "^2.0.4",
     "graphql": "16.8.1",
     "jwt-decode": "^2.2.0",
-    "markdown-to-jsx": "^7.1.2",
+    "markdown-to-jsx": "^7.4.0",
     "pluralize": "8.0.0",
     "prop-types": "^15.6.0",
     "react": "^17.0.1",
@@ -49,6 +50,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "^11.1.0",
+    "@types/dompurify": "^3",
     "@types/jsdom": "^16",
     "@types/node": "18.11.9",
     "@types/react": "^17.0.8",

packages/openneuro-app/src/scripts/dataset/components/MetaDataBlock.tsx

@@ -1,4 +1,4 @@
-import Markdown from "markdown-to-jsx"
+import { Markdown } from "../../utils/markdown"
 import React from "react"
 
 export interface MetaDataBlockProps {

packages/openneuro-app/src/scripts/dataset/draft-container.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Markdown from "markdown-to-jsx"
+import { Markdown } from "../utils/markdown"
 import Helmet from "react-helmet"
 import { Navigate, useLocation } from "react-router-dom"
 import pluralize from "pluralize"

packages/openneuro-app/src/scripts/dataset/fragments/edit-description-list.jsx

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import UpdateDescription from "../mutations/description.jsx"
 import { CancelButton } from "./cancel-button"
 import { EditButton } from "./edit-button"
-import Markdown from "markdown-to-jsx"
+import { Markdown } from "../../utils/markdown"
 
 import EditList from "./edit-list.jsx"
 

packages/openneuro-app/src/scripts/dataset/routes/dataset-default.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Markdown from "markdown-to-jsx"
+import { Markdown } from "../../utils/markdown"
 import { ReadMore } from "@openneuro/components/read-more"
 import { MetaDataBlock } from "../components/MetaDataBlock"
 import Files from "../files/files"

packages/openneuro-app/src/scripts/dataset/routes/snapshot-default.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Markdown from "markdown-to-jsx"
+import { Markdown } from "../../utils/markdown"
 import { ReadMore } from "@openneuro/components/read-more"
 import { MetaDataBlock } from "../components/MetaDataBlock"
 import Files from "../files/files"

packages/openneuro-app/src/scripts/utils/__tests__/__snapshots__/markdown.spec.tsx.snap

@@ -0,0 +1,47 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test <Markdown> component > allows a href with certain protocols 1`] = `
+<DocumentFragment>
+  <a
+    href="https://example.com"
+  >
+    Example link that should work.
+  </a>
+</DocumentFragment>
+`;
+
+exports[`Test <Markdown> component > does not allow href with unknown protocols 1`] = `
+<DocumentFragment>
+  <a>
+    Example link that should work.
+  </a>
+</DocumentFragment>
+`;
+
+exports[`Test <Markdown> component > filters out disallowed tags 1`] = `
+<DocumentFragment>
+  <ul>
+    <li>
+      Markdown document
+    </li>
+  </ul>
+</DocumentFragment>
+`;
+
+exports[`Test <Markdown> component > safely handles broken HTML tags 1`] = `
+<DocumentFragment>
+  <ul>
+    <li>
+      Markdown document
+
+      <br />
+      <br />
+      <ul>
+        <li>
+          test content
+        </li>
+      </ul>
+    </li>
+  </ul>
+</DocumentFragment>
+`;

packages/openneuro-app/src/scripts/utils/__tests__/markdown.spec.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import { Markdown } from "../markdown"
+
+describe("Test <Markdown> component", () => {
+  it("safely handles broken HTML tags", () => {
+    const brokenTagInput = "* Markdown document\n<br><br>\n * test content"
+    const { asFragment } = render(<Markdown>{brokenTagInput}</Markdown>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+  it("filters out disallowed tags", () => {
+    const badTags =
+      '* Markdown document\n<script type="text/javascript">alert("this should not happen")</script>\n'
+    const { asFragment } = render(<Markdown>{badTags}</Markdown>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+  it("allows a href with certain protocols", () => {
+    const hrefExample =
+      '<a href="https://example.com">Example link that should work.</a>'
+    const { asFragment } = render(<Markdown>{hrefExample}</Markdown>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+  it("does not allow href with unknown protocols", () => {
+    const hrefExample =
+      '<a href="about:memory">Example link that should not work.</a>'
+    const { asFragment } = render(<Markdown>{hrefExample}</Markdown>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

packages/openneuro-app/src/scripts/utils/markdown.tsx

@@ -0,0 +1,161 @@
+import React from "react"
+import MarkdownToJsx from "markdown-to-jsx"
+import DOMPurify from "dompurify"
+
+interface MarkdownProps {
+  children: string
+}
+
+const ALLOWED_TAGS = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "br",
+  "b",
+  "i",
+  "strong",
+  "em",
+  "a",
+  "pre",
+  "code",
+  "img",
+  "tt",
+  "div",
+  "ins",
+  "del",
+  "sup",
+  "sub",
+  "p",
+  "picture",
+  "ol",
+  "ul",
+  "table",
+  "thead",
+  "tbody",
+  "tfoot",
+  "blockquote",
+  "dl",
+  "dt",
+  "dd",
+  "kbd",
+  "q",
+  "samp",
+  "var",
+  "hr",
+  "ruby",
+  "rt",
+  "rp",
+  "li",
+  "tr",
+  "td",
+  "th",
+  "s",
+  "strike",
+  "summary",
+  "details",
+  "caption",
+  "figure",
+  "figcaption",
+  "abbr",
+  "bdo",
+  "cite",
+  "dfn",
+  "mark",
+  "small",
+  "source",
+  "span",
+  "time",
+  "wbr",
+]
+
+const ALLOWED_ATTR = [
+  "abbr",
+  "accept",
+  "accept-charset",
+  "accesskey",
+  "action",
+  "align",
+  "alt",
+  "aria-describedby",
+  "aria-hidden",
+  "aria-label",
+  "aria-labelledby",
+  "axis",
+  "border",
+  "char",
+  "charoff",
+  "charset",
+  "checked",
+  "clear",
+  "cols",
+  "colspan",
+  "compact",
+  "coords",
+  "datetime",
+  "dir",
+  "disabled",
+  "enctype",
+  "for",
+  "frame",
+  "headers",
+  "height",
+  "hreflang",
+  "hspace",
+  "id",
+  "ismap",
+  "label",
+  "lang",
+  "maxlength",
+  "media",
+  "method",
+  "multiple",
+  "name",
+  "nohref",
+  "noshade",
+  "nowrap",
+  "open",
+  "progress",
+  "prompt",
+  "readonly",
+  "rel",
+  "rev",
+  "role",
+  "rows",
+  "rowspan",
+  "rules",
+  "scope",
+  "selected",
+  "shape",
+  "size",
+  "span",
+  "start",
+  "summary",
+  "tabindex",
+  "title",
+  "type",
+  "usemap",
+  "valign",
+  "value",
+  "width",
+  "itemprop",
+  "href",
+  "cite",
+  "src",
+  "longdesc",
+]
+
+export function Markdown({ children }: MarkdownProps) {
+  const sanitizedMarkdown = DOMPurify.sanitize(children, {
+    ALLOWED_TAGS,
+    ALLOWED_ATTR,
+    ALLOW_ARIA_ATTR: false,
+  })
+  return (
+    <>
+      <MarkdownToJsx>{sanitizedMarkdown}</MarkdownToJsx>
+    </>
+  )
+}