updating html sanitization method to dompurify

biome.json

@@ -22,6 +22,9 @@
         "noNonNullAssertion": "off",
         "noParameterAssign": "off",
         "useTemplate": "off"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "off"
       }
     },
     "ignore": ["client/browser/src/types/webextension-polyfill/index.d.ts"]

lib/ui-react/package.json

@@ -11,7 +11,14 @@
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist", "src", "!**/*.test.*", "!**/*.story.*", "!dist/**/*.ts?(x)", "dist/**/*.d.ts"],
+  "files": [
+    "dist",
+    "src",
+    "!**/*.test.*",
+    "!**/*.story.*",
+    "!dist/**/*.ts?(x)",
+    "dist/**/*.d.ts"
+  ],
   "sideEffects": false,
   "scripts": {
     "prebuild": "mkdir -p dist && cp -R src/* dist/ && find dist/ -name '*.tsx' -delete",
@@ -24,9 +31,11 @@
     "@openctx/schema": "workspace:*",
     "@openctx/ui-common": "workspace:*",
     "@openctx/ui-standalone": "workspace:*",
-    "clsx": "^2.1.0"
+    "clsx": "^2.1.0",
+    "dompurify": "^3.1.6"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.15",
     "react": "^18.2.0",

lib/ui-react/src/chip/Chip.tsx

@@ -1,8 +1,8 @@
 import type { Annotation } from '@openctx/schema'
 import { renderHoverToHTML } from '@openctx/ui-common'
+import DOMPurify from 'dompurify'
 import type { FunctionComponent } from 'react'
 import { BaseChip } from './BaseChip.js'
-
 /**
  * A single OpenCtx annotation, displayed as a "chip".
  */
@@ -22,8 +22,9 @@ export const Chip: FunctionComponent<{
                     renderedHover.format === 'text' ? (
                         <div>{renderedHover.value}</div>
                     ) : (
-                        // biome-ignore lint/security/noDangerouslySetInnerHtml: input is sanitized by renderHoverToHTML
-                        <div dangerouslySetInnerHTML={{ __html: renderedHover.value }} />
+                        <div
+                            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(renderedHover.value) }}
+                        />
                     )
                 ) : null
             }

package.json

@@ -32,8 +32,10 @@
     "@storybook/html-vite": "^7.6.7",
     "@storybook/react": "^7.6.7",
     "@storybook/react-vite": "^8.1.1",
+    "@types/dompurify": "^3.0.5",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^20",
+    "@types/picomatch": "^2.3.4",
     "@types/semver": "^7.5.6",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.6.0",
@@ -49,7 +51,9 @@
     "vitest": "^1.6.0"
   },
   "stylelint": {
-    "extends": ["./.config/stylelintrc.json"]
+    "extends": [
+      "./.config/stylelintrc.json"
+    ]
   },
   "pnpm": {
     "packageExtensions": {
@@ -61,3 +65,4 @@
     }
   }
 }
+

web/package.json

@@ -46,6 +46,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "compression": "^1.7.4",
+    "dompurify": "^3.1.6",
     "express": "^4.18.2",
     "lucide-react": "^0.294.0",
     "postcss": "^8.4.33",
@@ -63,5 +64,8 @@
     "vike-react": "^0.4.6",
     "vite": "^5.0.11"
   },
-  "version": "0.0.6"
-}
+  "version": "0.0.6",
+  "devDependencies": {
+    "@types/dompurify": "^3.0.5"
+  }
+}

web/src/content/ContentPage.tsx

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify'
 import type { FunctionComponent } from 'react'
 import { usePageContext } from 'vike-react/usePageContext'
 import type { PageContext } from 'vike/types'
@@ -19,8 +20,11 @@ export const ContentPage: FunctionComponent<{ content: ContentPages }> = ({ cont
                     <ContentPageComponent />
                 </div>
             ) : pageContext.contentPageHtml ? (
-                // biome-ignore lint/security/noDangerouslySetInnerHtml: The input value does not come from the user.
-                <div dangerouslySetInnerHTML={{ __html: pageContext.contentPageHtml }} />
+                <div
+                    dangerouslySetInnerHTML={{
+                        __html: DOMPurify.sanitize(pageContext.contentPageHtml.toString()),
+                    }}
+                />
             ) : null}
         </div>
     )

web/src/content/contentPages.tsx

@@ -1,4 +1,5 @@
 import { MDXProvider } from '@mdx-js/react'
+import DOMPurify from 'dompurify'
 import { type ComponentType, useEffect, useState } from 'react'
 import { renderToString } from 'react-dom/server'
 import { render } from 'vike/abort'
@@ -79,10 +80,13 @@ export function createOnBeforeRender(content: ContentPages): OnBeforeRenderAsync
                 contentPageComponent: MDXContent,
                 contentPageHtml:
                     typeof window === 'undefined'
-                        ? renderToString(
-                              <MDXProvider components={MDX_COMPONENTS}>
-                                  <MDXContent />
-                              </MDXProvider>,
+                        ? DOMPurify.sanitize(
+                              renderToString(
+                                  <MDXProvider components={MDX_COMPONENTS}>
+                                      <MDXContent />
+                                  </MDXProvider>,
+                              ),
+                              { RETURN_TRUSTED_TYPE: true },
                           )
                         : undefined,
                 contentPageInfos: infos,