feat: add HTML sanitization pipe (#114)

Author: Xhristin3

api/package.json

@@ -24,6 +24,7 @@
     "compression": "^1.8.1",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.8.1",
+    "sanitize-html": "^2.17.4",
     "socket.io": "^4.8.3",
     "swagger-ui-express": "^5.0.1"
   },
@@ -32,6 +33,7 @@
     "@types/compression": "^1.8.1",
     "@types/express": "^5.0.6",
     "@types/node": "^20.10.0",
+    "@types/sanitize-html": "^2.16.1",
     "typescript": "^5.3.0"
   }
 }

api/src/common/sanitization/sanitize-strings.pipe.ts

@@ -0,0 +1,57 @@
+import { Injectable, PipeTransform } from "@nestjs/common"
+import { sanitizeUserText } from "./sanitize"
+
+/**
+ * Strips HTML/script tags from every string value reachable through
+ * the incoming payload. Numbers, booleans, Date instances, Buffers,
+ * and other non-string scalars pass through untouched — the pipe is
+ * intentionally narrow so it never coerces data types unexpectedly.
+ *
+ * Apply globally via:
+ *
+ *   app.useGlobalPipes(new SanitizeStringsPipe(), new ValidationPipe(...))
+ *
+ * Order matters: sanitisation runs BEFORE class-validator so DTO
+ * validators see already-stripped text and `forbidNonWhitelisted`
+ * decisions stay deterministic.
+ */
+@Injectable()
+export class SanitizeStringsPipe implements PipeTransform {
+  transform(value: unknown): unknown {
+    return sanitizeValue(value)
+  }
+}
+
+function sanitizeValue(value: unknown): unknown {
+  if (typeof value === "string") {
+    return sanitizeUserText(value)
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item) => sanitizeValue(item))
+  }
+
+  if (value && typeof value === "object") {
+    // Skip well-known non-plain-object values so we don't tear apart
+    // Buffers, Dates, or stream-like things if a future controller
+    // ever receives them via the body / query pipeline.
+    if (
+      value instanceof Date ||
+      value instanceof RegExp ||
+      value instanceof Map ||
+      value instanceof Set ||
+      (typeof Buffer !== "undefined" && Buffer.isBuffer(value))
+    ) {
+      return value
+    }
+
+    const source = value as Record<string, unknown>
+    const out: Record<string, unknown> = {}
+    for (const key of Object.keys(source)) {
+      out[key] = sanitizeValue(source[key])
+    }
+    return out
+  }
+
+  return value
+}

api/src/common/sanitization/sanitize.ts

@@ -0,0 +1,56 @@
+import sanitizeHtml from "sanitize-html"
+
+/**
+ * Strip every HTML tag and script-bearing construct from a string while
+ * leaving the human-readable text intact.
+ *
+ *   "<b>Hello</b> <script>alert(1)</script> world"  ->  "Hello  world"
+ *   "<a href='javascript:bad()'>click</a>"           ->  "click"
+ *   "café — naïve"                                   ->  "café — naïve"
+ *
+ * The sanitiser is configured to strip — not encode — tags so the
+ * persisted value never carries entity-encoded markup that downstream
+ * consumers would have to re-decode. Whitespace inside discarded tags
+ * is preserved so adjacent words don't merge.
+ */
+const SANITIZE_OPTIONS: sanitizeHtml.IOptions = {
+  allowedTags: [],
+  allowedAttributes: {},
+  // `disallowedTagsMode: "discard"` (the default) strips the tag and
+  // keeps the text content. We further block <style> / <script> body
+  // text via `nonTextTags` so an inline <script>…</script> doesn't
+  // leave its contents behind.
+  nonTextTags: ["style", "script", "textarea", "option", "noscript"],
+  // Preserve raw text characters without HTML-entity encoding so e.g.
+  // an ampersand round-trips as "&" rather than "&amp;".
+  disallowedTagsMode: "discard",
+  parser: { decodeEntities: true },
+  allowedSchemes: [],
+  allowedSchemesByTag: {},
+}
+
+/**
+ * Decode the small set of HTML entities that `sanitize-html` re-emits
+ * on output. We intentionally limit the set to characters the user
+ * obviously typed as plain text (e.g. `&`, `<`, `>`, single + double
+ * quotes) so the round-trip stays lossless for normal prose without
+ * re-introducing the very markup we just stripped.
+ */
+function decodeBasicEntities(text: string): string {
+  return text
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#x27;/g, "'")
+    .replace(/&#39;/g, "'")
+}
+
+export function sanitizeUserText(input: string): string {
+  if (typeof input !== "string") return ""
+  const stripped = sanitizeHtml(input, SANITIZE_OPTIONS)
+  return decodeBasicEntities(stripped)
+    // collapse the runs of whitespace introduced where tags used to be
+    .replace(/[\s\u00a0]+/g, " ")
+    .trim()
+}

api/src/main.ts

@@ -3,6 +3,7 @@ import { NestFactory } from "@nestjs/core"
 import { DocumentBuilder, SwaggerModule } from "@nestjs/swagger"
 import compression from "compression"
 import { AppModule } from "./app.module"
+import { SanitizeStringsPipe } from "./common/sanitization/sanitize-strings.pipe"
 
 // Bypass compression when the response is smaller than this. Anything
 // under ~1 KB doesn't benefit from gzip and the per-request CPU cost
@@ -18,12 +19,7 @@ async function bootstrap() {
     credentials: false,
   })
 
-  // Global response compression. The middleware honours the
-  // `Accept-Encoding` request header (gzip/deflate/br when available)
-  // and writes the matching `Content-Encoding` response header. Setting
-  // `threshold` skips small payloads; setting `filter` keeps existing
-  // `Content-Encoding` values intact and lets callers opt out via
-  // `x-no-compression`.
+  // Global response compression.
   app.use(
     compression({
       threshold: COMPRESSION_THRESHOLD_BYTES,
@@ -34,9 +30,11 @@ async function bootstrap() {
     }),
   )
 
-  // Global request validation: strip unknown properties, reject payloads
-  // with non-whitelisted keys, and auto-transform primitives to DTO types.
+  // Strip HTML/script tags from every string in the incoming payload
+  // before any other pipe runs. Order matters: sanitisation runs BEFORE
+  // ValidationPipe so DTO validators see already-stripped text.
   app.useGlobalPipes(
+    new SanitizeStringsPipe(),
     new ValidationPipe({
       whitelist: true,
       forbidNonWhitelisted: true,