fix: security issue fixed by not assigning download blob url to button, instead create a html element and auto click it for download

This commit is contained in:
theoleuthardt 2025-02-19 14:39:40 +01:00
parent 3bcd052235
commit b4d7bccc57
3 changed files with 31 additions and 23 deletions

View file

@ -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[]>([]);
@ -36,7 +34,6 @@ export default function DocConverter() {
}
setFile(selectedFile);
setDownloadUrl("");
setSelectedOutputFormat("");
const matchedFormat = outputFileFormats.find((format) =>
@ -68,15 +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();
const url = window.URL.createObjectURL(blob);
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