fix(client&server): implemented Dompurify and helmet to protect against xss

Author: AkiraBrown

client/package-lock.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
+    "dompurify": "^3.1.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",

client/package.json

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import axios from "axios";
+import { sanitize } from "dompurify";
 
 const SearchMovies = () => {
   const [title, setTitle] = useState("");
@@ -8,13 +9,13 @@ const SearchMovies = () => {
   const handleSearch = async (e) => {
     e.preventDefault();
     const sanitisedTitle = title.replace(/[.,/#!$%^&*;:{}=\-_`~()]/g, "");
-    console.log(sanitisedTitle);
     try {
       const response = await axios.get(
         `http://localhost:3001/search?title=${sanitisedTitle}`
       );
-      console.log(response);
-      setResults(response.data);
+      let stringifiedRes = sanitize(JSON.stringify(response.data));
+      stringifiedRes = JSON.parse(stringifiedRes);
+      setResults(stringifiedRes);
       setTitle("");
     } catch (error) {
       console.error("Error fetching data:", error);

client/src/SearchMovies.js

@@ -1,6 +1,7 @@
 const express = require("express");
 const cors = require("cors");
 const pgp = require("pg-promise")();
+const helmet = require("helmet");
 const logger = require("morgan");
 
 const app = express();
@@ -22,6 +23,7 @@ const corsOptions = {
   credentials: true,
 };
 app.use(cors(corsOptions));
+app.use(helmet());
 app.use(logger("dev"));
 app.use(express.json());
 
@@ -58,6 +60,7 @@ app.get("/movies", async (req, res) => {
 
 app.get("/search", async (req, res) => {
   const title = req.query["title"].replace(/[.,/#!$%^&*;:'{}=\-_`~()]/g, "");
+  const sanitisedTitle = title.replace(/</g, "").replace(/>/g, "");
   console.log("===");
   console.log(title);
   try {
@@ -67,7 +70,7 @@ app.get("/search", async (req, res) => {
                   WHERE title ILIKE $1;
                 `;
 
-    const result = await db.any(query, title);
+    const result = await db.any(query, sanitisedTitle);
     console.log(result);
     res.json(result);
   } catch (err) {

server/app.js

@@ -15,6 +15,7 @@
   "dependencies": {
     "cors": "^2.8.5",
     "express": "^4.21.0",
+    "helmet": "^8.0.0",
     "morgan": "^1.10.0",
     "pg": "^8.12.0",
     "pg-promise": "^11.9.1"