fix(server): use xss to serialize data

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/server/package.json

@@ -34,7 +34,8 @@
     "satori": "0.11.2",
     "sonner": "^1.5.0",
     "tailwindcss": "3.4.14",
-    "use-context-selector": "2.0.0"
+    "use-context-selector": "2.0.0",
+    "xss": "1.0.15"
   },
   "devDependencies": {
     "@follow/components": "workspace:*",
@@ -45,14 +46,12 @@
     "@follow/types": "workspace:*",
     "@follow/utils": "workspace:*",
     "@radix-ui/react-avatar": "1.1.1",
-    "@types/serialize-javascript": "5.0.4",
     "daisyui": "4.12.13",
     "foxact": "0.2.39",
     "lightningcss": "1.27.0",
     "lodash-es": "4.17.21",
     "masonic": "4.0.1",
     "react-dom": "^18.3.1",
-    "serialize-javascript": "6.0.2",
     "tailwindcss": "3.4.14",
     "tsup": "8.3.0",
     "tsx": "4.19.1",

apps/server/src/lib/seo.ts

@@ -1,18 +1,4 @@
-import serialize from "serialize-javascript"
-
-function escapeHtml(unsafe?: string | null) {
-  if (!unsafe) {
-    return unsafe
-  }
-
-  return unsafe
-    .replaceAll("&", "&")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#x27;")
-    .replaceAll("/", "&#x2F;")
-}
+import xss from "xss"
 
 export function buildSeoMetaTags(configs: {
   openGraph: {
@@ -22,25 +8,23 @@ export function buildSeoMetaTags(configs: {
   }
 }) {
   const openGraph = {
-    title: escapeHtml(configs.openGraph.title),
-    description: escapeHtml(configs.openGraph.description),
-    image: escapeHtml(configs.openGraph.image),
+    title: xss(configs.openGraph.title),
+    description: xss(configs.openGraph.description ?? ""),
+    image: xss(configs.openGraph.image ?? ""),
   }
   const title = `${openGraph.title} | Follow`
   return [
-    `<meta property="og:title" content="${serialize(title)}" />`,
+    `<meta property="og:title" content="${title}" />`,
     openGraph.description
-      ? `<meta property="og:description" content="${serialize(openGraph.description)}" />`
+      ? `<meta property="og:description" content="${openGraph.description}" />`
       : "",
-    openGraph.image ? `<meta property="og:image" content="${serialize(openGraph.image)}" />` : "",
+    openGraph.image ? `<meta property="og:image" content="${openGraph.image}" />` : "",
     // Twitter
     `<meta property="twitter:card" content="summary_large_image" />`,
-    `<meta property="twitter:title" content="${serialize(title)}" />`,
+    `<meta property="twitter:title" content="${title}" />`,
     openGraph.description
-      ? `<meta property="twitter:description" content="${serialize(openGraph.description)}" />`
-      : "",
-    openGraph.image
-      ? `<meta property="twitter:image" content="${serialize(openGraph.image)}" />`
+      ? `<meta property="twitter:description" content="${openGraph.description}" />`
       : "",
+    openGraph.image ? `<meta property="twitter:image" content="${openGraph.image}" />` : "",
   ].join("\n")
 }

apps/server/src/router/global.ts

@@ -6,7 +6,7 @@ import { env } from "@follow/shared/env"
 import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify"
 import { parseHTML } from "linkedom"
 import { FetchError } from "ofetch"
-import serialize from "serialize-javascript"
+import xss from "xss"
 
 import { isDev } from "~/lib/env"
 import { buildSeoMetaTags } from "~/lib/seo"
@@ -119,14 +119,12 @@ async function injectMetaToTemplate(template: string, req: FastifyRequest) {
         break
       }
       case "meta": {
-        allMetaString.push(
-          `<meta property="${meta.property}" content="${serialize(meta.content)}" />`,
-        )
+        allMetaString.push(`<meta property="${meta.property}" content="${xss(meta.content)}" />`)
         break
       }
       case "title": {
         if (meta.title) {
-          template = template.replace(`<!-- TITLE -->`, `${serialize(meta.title)} | Follow`)
+          template = template.replace(`<!-- TITLE -->`, `${xss(meta.title)} | Follow`)
           isTitleReplaced = true
         }
         break
@@ -137,7 +135,7 @@ async function injectMetaToTemplate(template: string, req: FastifyRequest) {
         const script = document.createElement("script")
         script.innerHTML = `
           window.__HYDRATE__ = window.__HYDRATE__ || {}
-          window.__HYDRATE__['${meta.key}'] = ${serialize(meta.data)}
+          window.__HYDRATE__['${meta.key}'] = ${xss(JSON.stringify(meta.data))}
         `
         document.head.append(script)
         template = document.toString()