fix: xss (#384)

package.json

@@ -137,6 +137,7 @@
     "use-onclickoutside": "0.4.1",
     "uuid": "9.0.0",
     "wagmi": "0.12.10",
+    "xss": "1.0.14",
     "zustand": "^4.3.7"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -325,6 +325,9 @@ dependencies:
   wagmi:
     specifier: 0.12.10
     version: 0.12.10(@babel/core@7.21.4)(@types/node@18.15.11)(ethers@5.7.2)(immer@9.0.21)(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.4)
+  xss:
+    specifier: 1.0.14
+    version: 1.0.14
   zustand:
     specifier: ^4.3.7
     version: 4.3.7(immer@9.0.21)(react@18.2.0)
@@ -7052,6 +7055,10 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  /cssfilter@0.0.10:
+    resolution: {integrity: sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==}
+    dev: false
+
   /csstype@3.0.9:
     resolution: {integrity: sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==}
     dev: false
@@ -14806,6 +14813,15 @@ packages:
     engines: {node: '>=8.0'}
     dev: false
 
+  /xss@1.0.14:
+    resolution: {integrity: sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==}
+    engines: {node: '>= 0.10.0'}
+    hasBin: true
+    dependencies:
+      commander: 2.20.3
+      cssfilter: 0.0.10
+    dev: false
+
   /xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}

src/components/common/CharacterCard.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from "next-i18next"
 import { useEffect, useState } from "react"
+import xss from "xss"
 
 import { FollowingButton } from "~/components/common/FollowingButton"
 import { FollowingCount } from "~/components/common/FollowingCount"
@@ -83,7 +84,7 @@ export const CharacterCard: React.FC<{
           {site?.description && (
             <span
               className="block text-gray-600"
-              dangerouslySetInnerHTML={{ __html: site?.description || "" }}
+              dangerouslySetInnerHTML={{ __html: xss(site?.description || "") }}
             ></span>
           )}
           {!simple && (

src/components/common/PatronModal.tsx

@@ -2,6 +2,7 @@ import confetti from "canvas-confetti"
 import { useTranslation } from "next-i18next"
 import { useEffect, useRef, useState } from "react"
 import { toast } from "react-hot-toast"
+import xss from "xss"
 
 import { useAccountState, useConnectModal } from "@crossbell/connect-kit"
 
@@ -146,7 +147,7 @@ export const PatronModal: React.FC<{
           {site?.description && (
             <span
               className="block text-gray-600 text-sm"
-              dangerouslySetInnerHTML={{ __html: site?.description || "" }}
+              dangerouslySetInnerHTML={{ __html: xss(site?.description || "") }}
             ></span>
           )}
         </div>

src/components/site/SiteHeader.tsx

@@ -3,6 +3,7 @@ import { FastAverageColor } from "fast-average-color"
 import { useTranslation } from "next-i18next"
 import { useRouter } from "next/router"
 import { MutableRefObject, RefObject, useEffect, useRef, useState } from "react"
+import xss from "xss"
 
 import { XCharLogo, XFeedLogo } from "@crossbell/ui"
 import { RssIcon } from "@heroicons/react/24/solid"
@@ -321,7 +322,9 @@ export const SiteHeader: React.FC<{
               {site?.bio && (
                 <div
                   className="xlog-site-description text-gray-500 leading-snug my-2 sm:my-3 text-sm sm:text-base"
-                  dangerouslySetInnerHTML={{ __html: site?.description || "" }}
+                  dangerouslySetInnerHTML={{
+                    __html: xss(site?.description || ""),
+                  }}
                 ></div>
               )}
               <div className="flex space-x-0 sm:space-x-5 space-y-2 sm:space-y-0 flex-col sm:flex-row text-sm sm:text-base">

src/components/ui/Mermaid.tsx

@@ -1,5 +1,6 @@
 import { nanoid } from "nanoid"
 import { FC, useEffect, useState } from "react"
+import xss from "xss"
 
 import { useIsDark } from "~/hooks/useDarkMode"
 import { useIsUnmounted } from "~/hooks/useLifecycle"
@@ -57,7 +58,7 @@ export const Mermaid: FC<{
       Mermaid Loading...
     </div>
   ) : svg ? (
-    <div dangerouslySetInnerHTML={{ __html: svg }} />
+    <div dangerouslySetInnerHTML={{ __html: xss(svg) }} />
   ) : (
     <div className="h-[50px] rounded-lg flex items-center justify-center bg-red-100 text-sm">
       {error || "Error"}

src/pages/dashboard/[subdomain]/settings/general.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react"
 import type { ReactElement } from "react"
 import { Controller, useForm } from "react-hook-form"
 import toast from "react-hot-toast"
+import xss from "xss"
 
 import { DashboardLayout } from "~/components/dashboard/DashboardLayout"
 import { getServerSideProps as getLayoutServerSideProps } from "~/components/dashboard/DashboardLayout.server"
@@ -63,7 +64,7 @@ export default function SiteSettingsGeneralPage() {
       banner: values.banner,
       site: subdomain,
       name: values.name,
-      description: values.description,
+      description: xss(values.description),
       ga: values.ga,
     })
   })