Use DOMPurify to sanitize HTML in typeahead results before rendering

package-lock.json

@@ -17,12 +17,14 @@
         "@sveltejs/vite-plugin-svelte": "^2.5.2",
         "@tauri-apps/cli": "^1.5.6",
         "@tsconfig/svelte": "^5.0.0",
+        "@types/dompurify": "^3.0.5",
         "@types/marked": "^6.0.0",
         "@types/node": "^20.10.3",
         "bulma": "^0.9.4",
         "bulma-prefers-dark": "^0.1.0-beta.1",
         "copy-to-clipboard": "^3.3.3",
         "dexie": "^4.0.1-beta.1",
+        "dompurify": "^3.0.6",
         "eslint-config-standard-with-typescript": "^35.0.0",
         "eslint-plugin-svelte3": "^4.0.0",
         "flourite": "^1.2.4",
@@ -923,6 +925,15 @@
       "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
       "dev": true
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "dev": true,
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -975,6 +986,12 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.62.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
@@ -1739,6 +1756,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.6.tgz",
+      "integrity": "sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==",
+      "dev": true
+    },
     "node_modules/es-abstract": {
       "version": "1.22.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz",

package.json

@@ -23,12 +23,14 @@
     "@sveltejs/vite-plugin-svelte": "^2.5.2",
     "@tauri-apps/cli": "^1.5.6",
     "@tsconfig/svelte": "^5.0.0",
+    "@types/dompurify": "^3.0.5",
     "@types/marked": "^6.0.0",
     "@types/node": "^20.10.3",
     "bulma": "^0.9.4",
     "bulma-prefers-dark": "^0.1.0-beta.1",
     "copy-to-clipboard": "^3.3.3",
     "dexie": "^4.0.1-beta.1",
+    "dompurify": "^3.0.6",
     "eslint-config-standard-with-typescript": "^35.0.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "flourite": "^1.2.4",

src/lib/Prompts.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import DOMPurify from 'dompurify'
   import Typeahead from 'svelte-typeahead'
   import prompts from '../awesome-chatgpt-prompts/prompts.csv'
 
@@ -29,7 +30,11 @@
       let:result
     >
       <a class="dropdown-item" href="#top" on:click|preventDefault title="{result.original.prompt}">
-        {@html result.string}
+        <!--
+          Sanitize result.string because Typeahead introduces HTML tags and prompt
+          strings are untrusted.
+        -->
+        {@html DOMPurify.sanitize(result.string, { ALLOWED_TAGS: ['mark'] })}
       </a>
     </Typeahead>
   </div>

tsconfig.json

@@ -5,7 +5,8 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "resolveJsonModule": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "allowSyntheticDefaultImports": true
   },
   "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "vite.config.ts", "svelte.config.js"],
   "references": [{ "path": "./tsconfig.node.json" }]