Implement code validation and sanitization

Author: zacharyLYH

app/api/code/submit/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import { xata } from "@/lib/xata_client";
 import axios from "axios";
+import { validateHTML } from "./submit-helpers";
 
 export async function GET() {
     const record = await xata.db.Site.filter({
@@ -33,13 +34,23 @@ On a successful OpenAI call, call the email generator (api)
 
 export async function POST(req: Request) {
     try {
+        const body = await req.json();
+        const { code } = body;
+        if (!validateHTML(code)) {
+            return NextResponse.json(
+                {
+                    message:
+                        "We've detected some disallowed code. Only HTML with Tailwind and no JS allowed!",
+                },
+                { status: 400 }
+            );
+        }
         // Extract the host and protocol from the incoming request
         const url = new URL(req.url);
         const baseUrl = `${url.protocol}//${url.host}`;
 
         // Use the base URL for Axios requests
         axios.put(`${baseUrl}/api/increment/submit`, {});
-        const body = await req.json();
 
         axios.post(`${baseUrl}/api/code/score`, body);
 

app/api/code/submit/submit-helpers.ts

@@ -0,0 +1,42 @@
+import createDOMPurify from "dompurify";
+import { JSDOM } from "jsdom";
+import isHtml from "is-html";
+
+const window = new JSDOM("").window;
+const DOMPurify = createDOMPurify(window);
+
+// Sanitizer function
+export const validateHTML = (html: string): boolean => {
+    if (!isHtml(html)) {
+        return false;
+    }
+
+    const cleanHTML = DOMPurify.sanitize(html, {
+        ALLOWED_ATTR: ["href", "src", "alt", "title", "style"],
+        FORBID_TAGS: [
+            "script",
+            "iframe",
+            "object",
+            "embed",
+            "link",
+            "style",
+            "form",
+        ],
+        FORBID_ATTR: [
+            "onerror",
+            "onload",
+            "onclick",
+            "onmouseover",
+            "onfocus",
+            "onblur",
+            "onchange",
+            "onsubmit",
+        ],
+    });
+
+    if (cleanHTML !== html) {
+        return false;
+    }
+
+    return isHtml(cleanHTML);
+};

package.json

@@ -33,9 +33,12 @@
         "axios": "^1.5.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
+        "dompurify": "^3.0.6",
         "encoding": "^0.1.13",
         "framer-motion": "^10.16.4",
+        "is-html": "^3.0.0",
         "js-beautify": "^1.14.9",
+        "jsdom": "^23.0.1",
         "lucide-react": "^0.279.0",
         "next": "13.4.19",
         "next-themes": "^0.2.1",
@@ -56,7 +59,10 @@
     "devDependencies": {
         "@tanstack/eslint-plugin-query": "^4.34.1",
         "@tanstack/react-query-devtools": "^4.35.3",
+        "@types/dompurify": "^3.0.5",
+        "@types/is-html": "^2.0.2",
         "@types/js-beautify": "^1.14.1",
+        "@types/jsdom": "^21.1.6",
         "@types/node": "20.5.7",
         "@types/nodemailer": "^6.4.9",
         "@types/react": "18.2.21",