Merge pull request #11 from theoleuthardt/feat/doc-converter

fix: doc-converter security bug
feat: doc-converter is completed with this pull request!

backend/server.ts

@@ -6,7 +6,12 @@ import { colorConvert } from "./src/routes/colorconvert.route";
 
 const app = Fastify({ logger: true });
 
-app.register(cors, { origin: "*", exposedHeaders: 'Content-Disposition' });
+app.register(cors, {
+  origin: "*",
+  exposedHeaders: "Content-Disposition",
+  methods: "POST",
+  allowedHeaders: "Content-Type",
+});
 app.register(multipart);
 app.register(libreConvert);
 app.register(colorConvert);

backend/src/routes/libreconvert.route.ts

@@ -6,60 +6,75 @@ import { MultipartValue } from "@fastify/multipart";
 const libreConvertAsync = promisify(libre.convert);
 
 const mimeTypes: { [key: string]: string } = {
-  'pdf': 'application/pdf',
-  'html': 'text/html',
-  'doc': 'application/msword',
-  'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-  'txt': 'text/plain',
-  'rtf': 'application/rtf',
-  'odt': 'application/vnd.oasis.opendocument.text',
-  'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-  'xls': 'application/vnd.ms-excel',
-  'ods': 'application/vnd.oasis.opendocument.spreadsheet',
-  'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-  'ppt': 'application/vnd.ms-powerpoint',
-  'odp': 'application/vnd.oasis.opendocument.presentation'
+  pdf: "application/pdf",
+  html: "text/html",
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  txt: "text/plain",
+  rtf: "application/rtf",
+  odt: "application/vnd.oasis.opendocument.text",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  xls: "application/vnd.ms-excel",
+  ods: "application/vnd.oasis.opendocument.spreadsheet",
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  ppt: "application/vnd.ms-powerpoint",
+  odp: "application/vnd.oasis.opendocument.presentation",
 };
 
 export async function libreConvert(app: FastifyInstance) {
-  app.post("/api/libre-convert", async (request: FastifyRequest, reply: FastifyReply) => {
-    try {
-      const parts = request.parts();
+  app.post(
+    "/api/libre-convert",
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      try {
+        const parts = request.parts();
 
-      let fileBuffer: Buffer | null = null;
-      let outputFileExt = "";
+        let fileBuffer: Buffer | null = null;
+        let outputFileExt = "";
 
-      for await (const part of parts) {
-        if (part.type === "file") {
-          fileBuffer = await part.toBuffer();
-        } else if (part.fieldname === "outputFormat" && part.type === "field") {
-          outputFileExt = (part as MultipartValue<string>).value;
-          console.log("Output format:", outputFileExt);
+        for await (const part of parts) {
+          if (part.type === "file") {
+            fileBuffer = await part.toBuffer();
+          } else if (
+            part.fieldname === "outputFormat" &&
+            part.type === "field"
+          ) {
+            outputFileExt = (part as MultipartValue<string>).value;
+          }
         }
-      }
 
-      if (!fileBuffer) {
-        return reply.status(400).send({ error: "No file uploaded!" });
-      }
-      if (!outputFileExt) {
-        return reply.status(400).send({ error: "No output format provided!" });
-      }
-      if (!outputFileExt.startsWith(".")) {
-        outputFileExt = "." + outputFileExt;
-      }
+        if (!fileBuffer) {
+          return reply.status(400).send({ error: "No file uploaded!" });
+        }
+        if (!outputFileExt) {
+          return reply
+            .status(400)
+            .send({ error: "No output format provided!" });
+        }
+        if (!outputFileExt.startsWith(".")) {
+          outputFileExt = "." + outputFileExt;
+        }
 
-      const format = outputFileExt.substring(1);
-      const mimeType = mimeTypes[format] || 'application/octet-stream';
+        const format = outputFileExt.substring(1);
+        const mimeType = mimeTypes[format] || "application/octet-stream";
 
-      const convertedBuffer = await libreConvertAsync(fileBuffer, outputFileExt, undefined);
+        const convertedBuffer = await libreConvertAsync(
+          fileBuffer,
+          outputFileExt,
+          undefined,
+        );
 
-      reply
+        reply
           .header("Content-Type", mimeType)
-          .header("Content-Disposition", `attachment; filename="converted${outputFileExt}"`)
+          .header(
+            "Content-Disposition",
+            `attachment; filename="converted${outputFileExt}"`,
+          )
+          .status(200)
           .send(convertedBuffer);
-    } catch (error) {
-      console.error("Convert error:", error);
-      reply.status(500).send({ error: "Error while converting!" });
-    }
-  });
+      } catch (error) {
+        console.error("Convert error:", error);
+        reply.status(500).send({ error: "Error while converting!" });
+      }
+    },
+  );
 }

frontend/src/app/doc-converter/page.tsx

@@ -3,14 +3,12 @@ import React, { useState } from "react";
 import Navbar from "../../components/Navbar";
 import Footer from "../../components/Footer";
 import Button from "../../components/Button";
-import Link from "next/link";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import Dropdown from "@/components/Dropdown";
 import { FileFormatsTable, outputFileFormats } from "@/constants";
 
 export default function DocConverter() {
   const [file, setFile] = useState<File | null>(null);
-  const [downloadUrl, setDownloadUrl] = useState<string>("");
   const [loading, setLoading] = useState(false);
   const [tableOpen, setTableOpen] = useState(false);
   const [filteredOptions, setFilteredOptions] = useState<string[]>([]);
@@ -19,6 +17,8 @@ export default function DocConverter() {
   );
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+
     if (event.target.files && event.target.files.length > 0) {
       const selectedFile = event.target.files[0];
       const fileExtension = selectedFile.name.split(".").pop()?.toLowerCase();
@@ -28,14 +28,13 @@ export default function DocConverter() {
       );
 
       if (!isSupported) {
-        console.error("Not supported file uploaded!");
         alert("File format not supported!");
         event.target.value = "";
         return;
       }
 
       setFile(selectedFile);
-      setDownloadUrl("");
+      setSelectedOutputFormat("");
 
       const matchedFormat = outputFileFormats.find((format) =>
         format.input.toLowerCase().includes(fileExtension || ""),
@@ -66,17 +65,26 @@ export default function DocConverter() {
       );
 
       if (!response.ok) {
-        return new Error(`Error: ${response.statusText}`);
+        console.error(`Error: ${response.statusText}`);
       }
 
       const blob = await response.blob();
-      console.log("Blob:", blob);
       const url = window.URL.createObjectURL(blob);
-      console.log("Download URL:", url);
-      setDownloadUrl(url);
+      const filename = file.name.split(".")[0];
+
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${filename}${selectedOutputFormat}`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+
+      setTimeout(() => {
+        URL.revokeObjectURL(url);
+      }, 5000);
     } catch (error) {
       console.error("Error while converting:", error);
-      alert("Error while converting");
+      alert("Error while converting!");
     } finally {
       setLoading(false);
     }
@@ -109,22 +117,16 @@ export default function DocConverter() {
           />
         </div>
         <div className={"flex flex-row items-center gap-4 mt-4 mb-16"}>
-          {downloadUrl ? (
-            <Link id="downloadPDF" href={downloadUrl}>
-              <Button content="download" />
-            </Link>
-          ) : (
-            <Button
-              content={
-                loading ? (
-                  <div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
-                ) : (
-                  "convert"
-                )
-              }
-              onClick={convertDoc}
-            />
-          )}
+          <Button
+            content={
+              loading ? (
+                <div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
+              ) : (
+                "convert"
+              )
+            }
+            onClick={convertDoc}
+          />
         </div>
         <div className="overflow-hidden text-xl rounded-lg border border-white mb-16 transition-all duration-300 ease-in-out hover:border-blue-400">
           <div