feat: html sanitization

Author: hejsztynx

package.json

@@ -105,7 +105,8 @@
     "@tiptap/extension-underline": "3.20.4",
     "@tiptap/extensions": "3.20.4",
     "@tiptap/pm": "3.20.4",
-    "@tiptap/react": "3.20.4"
+    "@tiptap/react": "3.20.4",
+    "dompurify": "^3.4.11"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^19.6.0",

src/web/EnrichedText.tsx

@@ -3,18 +3,24 @@ import type { EnrichedTextProps } from '../types';
 import './EnrichedText.css';
 import { enrichedTextStyleToCSSProperties } from './styleConversion/enrichedTextStyleToCSSProperties';
 import { htmlStyleToCSSVariables } from './styleConversion/htmlStyleToCSSVariables';
-import { ENRICHED_TEXT_CLASSNAME } from './consts/classNames';
+import { ENRICHED_TEXT_CLASSNAME } from './constants/classNames';
 import { enrichedInputThemingToCSSProperties } from './styleConversion/enrichedInputThemingToCSSProperties';
 import { buildMentionRulesCSS } from './styleConversion/buildMentionRulesCSS';
-import { checkboxHtmlToWeb } from './checkboxHtmlToWeb';
+import { sanitizeHtml } from './sanitization/htmlSanitizer';
+import { prepareHtmlForWeb } from './normalization/prepareHtmlForWeb';
 
 export const EnrichedText = ({
   children,
   htmlStyle,
   style,
   selectionColor,
 }: EnrichedTextProps) => {
-  const html = useMemo(() => checkboxHtmlToWeb(children), [children]);
+  const sanitizedHtml = useMemo(() => sanitizeHtml(children), [children]);
+
+  const finalHtml = useMemo(
+    () => prepareHtmlForWeb(sanitizedHtml),
+    [sanitizedHtml]
+  );
 
   const textStyle: CSSProperties = useMemo(
     () => enrichedTextStyleToCSSProperties(style ?? {}),
@@ -47,7 +53,7 @@ export const EnrichedText = ({
       <div
         style={finalStyle}
         className={ENRICHED_TEXT_CLASSNAME}
-        dangerouslySetInnerHTML={{ __html: html }}
+        dangerouslySetInnerHTML={{ __html: finalHtml }}
       />
     </>
   );

src/web/EnrichedTextInput.tsx

@@ -74,7 +74,8 @@ import {
 import { StripMarksOnImagePlugin } from './pmPlugins/StripMarksOnImagePlugin';
 import { ShortcutPlugin } from './pmPlugins/ShortcutPlugin';
 import { returnKeyTypeToEnterKeyHint } from './returnKeyTypeToEnterKeyHint';
-import { ENRICHED_TEXT_INPUT_CLASSNAME } from './consts/classNames';
+import { ENRICHED_TEXT_INPUT_CLASSNAME } from './constants/classNames';
+
 function runFocused(
   editor: Editor,
   apply: (chain: ChainedCommands) => ChainedCommands

src/web/consts/classNames.ts src/web/constants/classNames.tssrc/web/consts/classNames.ts renamed to src/web/constants/classNames.ts

@@ -1,3 +1,7 @@
+export function prepareHtmlForWeb(html: string) {
+  return checkboxHtmlToWeb(html);
+}
+
 /*
  * Native checkbox format (as produced by the editor):
  *   <ul data-type="checkbox">
@@ -17,7 +21,7 @@
  *     </li>
  *   </ul>
  */
-export function checkboxHtmlToWeb(html: string): string {
+function checkboxHtmlToWeb(html: string): string {
   const parser = new DOMParser();
   const doc = parser.parseFromString(html, 'text/html');
 

src/web/checkboxHtmlToWeb.ts …c/web/normalization/prepareHtmlForWeb.tssrc/web/checkboxHtmlToWeb.ts renamed to src/web/normalization/prepareHtmlForWeb.ts src/web/checkboxHtmlToWeb.ts renamed to src/web/normalization/prepareHtmlForWeb.ts

@@ -0,0 +1,8 @@
+import DOMPurify from 'dompurify';
+
+export function sanitizeHtml(html: string) {
+  return DOMPurify.sanitize(html, {
+    ADD_TAGS: ['mention'],
+    ADD_ATTR: ['text', 'indicator'],
+  });
+}

src/web/sanitization/htmlSanitizer.ts

@@ -3,7 +3,7 @@ import { buildMentionRulesCSS } from '../buildMentionRulesCSS';
 import {
   ENRICHED_TEXT_CLASSNAME,
   ENRICHED_TEXT_INPUT_CLASSNAME,
-} from '../../consts/classNames';
+} from '../../constants/classNames';
 
 describe('buildMentionRulesCSS', () => {
   it.each([

src/web/styleConversion/__tests__/buildMentionRulesCSS.test.ts

@@ -3,7 +3,7 @@ import { isMentionStyleRecord } from '../../utils/isMentionStyleRecord';
 import {
   ENRICHED_TEXT_CLASSNAME,
   ENRICHED_TEXT_INPUT_CLASSNAME,
-} from '../consts/classNames';
+} from '../constants/classNames';
 import { ET_MENTION_CSS_VARS } from './htmlStyleToCSSVariables';
 import { MENTION_STYLE_DEFAULT_KEY } from './mentionIndicatorCssKey';
 

src/web/styleConversion/buildMentionRulesCSS.ts

@@ -4548,6 +4548,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/trusted-types@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "@types/trusted-types@npm:2.0.7"
+  checksum: 10c0/4c4855f10de7c6c135e0d32ce462419d8abbbc33713b31d294596c0cc34ae1fa6112a2f9da729c8f7a20707782b0d69da3b1f8df6645b0366d08825ca1522e0c
+  languageName: node
+  linkType: hard
+
 "@types/use-sync-external-store@npm:^0.0.6":
   version: 0.0.6
   resolution: "@types/use-sync-external-store@npm:0.0.6"
@@ -6909,6 +6916,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dompurify@npm:^3.4.11":
+  version: 3.4.11
+  resolution: "dompurify@npm:3.4.11"
+  dependencies:
+    "@types/trusted-types": "npm:^2.0.7"
+  dependenciesMeta:
+    "@types/trusted-types":
+      optional: true
+  checksum: 10c0/31439481c7e8fc3805d40c376936fd66936620fb1b1a31a2ec097f6165412c37f2d868e082c9ceba62bb37661c1ea132a5db4d5213434317e30df68d4aca9cc9
+  languageName: node
+  linkType: hard
+
 "dot-prop@npm:^5.1.0":
   version: 5.3.0
   resolution: "dot-prop@npm:5.3.0"
@@ -12881,6 +12900,7 @@ __metadata:
     clang-format: "npm:^1.8.0"
     commitlint: "npm:^19.6.1"
     del-cli: "npm:^5.1.0"
+    dompurify: "npm:^3.4.11"
     eslint: "npm:^9.22.0"
     eslint-config-prettier: "npm:^10.1.1"
     eslint-plugin-prettier: "npm:^5.2.3"