Fix code scanning alert no. 1: DOM text reinterpreted as HTML (#2)

* Fix code scanning alert no. 1: DOM text reinterpreted as HTML

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* fix(frontend): add dompurify

* fix(frontend): add dompurify

---------

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

frontend/package-lock.json

@@ -12,12 +12,14 @@
         "@chakra-ui/react": "^2.8.2",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
+        "dompurify": "^3.1.6",
         "framer-motion": "^11.5.5",
         "next": "14.2.12",
         "react": "^18",
         "react-dom": "^18"
       },
       "devDependencies": {
+        "@types/dompurify": "^3.0.5",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -1957,6 +1959,16 @@
         "tslib": "^2.4.0"
       }
     },
+    "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,
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -2015,6 +2027,13 @@
         "@types/react": "*"
       }
     },
+    "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,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.6.0.tgz",
@@ -2892,6 +2911,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+      "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",

frontend/package.json

@@ -13,12 +13,14 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "dompurify": "^3.1.6",
     "framer-motion": "^11.5.5",
     "next": "14.2.12",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

frontend/src/app/ui/snippets/gear-parser.tsx

@@ -3,6 +3,7 @@
 import Image from "next/image";
 import styles from "./gear-parser.module.css";
 import { useState } from "react";
+import DOMPurify from "dompurify";
 
 interface GearParserProps {
   isVisible: boolean;
@@ -155,7 +156,7 @@ export function GearParser(props: GearParserProps) {
                 border: `${gear.active ? "1px solid green" : "1px solid blue"}`,
               }}
             >
-              <a href={gear.link} target="_blank">
+              <a href={DOMPurify.sanitize(gear.link)} target="_blank">
                 <Image
                   aria-hidden
                   src={gear.image}