perf: Phase 3 — parallel uploads + security headers, powered-by-header off

Performance and transport-layer hardening.

ImageUploader.tsx:
- Replaced sequential for-loop uploads with Promise.allSettled, so
  multiple files upload concurrently. Partial failures no longer abort
  the whole batch — successful uploads are kept, failed ones surface
  a concatenated error (and a subsequent retry is still possible).
- Order indices are pre-computed from the existing images.length so
  the parallel results stay correctly ordered.

next.config.ts:
- PoweredByHeader: false (no longer advertises Next.js).
- compress: true explicitly (default, but documented).
- Added Strict-Transport-Security, X-Frame-Options, X-Content-Type-
  Options, Referrer-Policy, Permissions-Policy and a defensive CSP
  (script-src allows 'unsafe-eval' for Next.js dev/HMR invariants,
  connect-src whitelists Clerk endpoints).
- remotePatterns is now only populated when S3_ENDPOINT is set, and
  parsed with URL() so a trailing path no longer produces a phantom
  hostname. Still effectively unused because the app uses raw <img>;
  the migration to next/image is deferred.
This commit is contained in:
dimitar 2026-08-02 12:21:23 +02:00
parent c0effe6ec9
commit ddd4327a99
2 changed files with 66 additions and 27 deletions

View File

@ -1,18 +1,45 @@
import type { NextConfig } from "next";
const s3Host = process.env.S3_ENDPOINT
? new URL(process.env.S3_ENDPOINT).hostname
: "";
const securityHeaders = [
{ key: "Strict-Transport-Security", value: "max-age=63072000; includeSubDomains; preload" },
{ key: "X-Frame-Options", value: "SAMEORIGIN" },
{ key: "X-Content-Type-Options", value: "nosniff" },
{ key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
{ key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
{
key: "Content-Security-Policy",
value: [
"default-src 'self'",
"img-src 'self' data: blob: https:",
"font-src 'self' data:",
"style-src 'self' 'unsafe-inline'",
"script-src 'self' 'unsafe-inline' 'unsafe-eval'",
"connect-src 'self' https://*.clerk.accounts.dev https://api.clerk.com",
"frame-ancestors 'self'",
].join("; "),
},
];
const nextConfig: NextConfig = {
output: "standalone",
poweredByHeader: false,
compress: true,
images: {
remotePatterns: [
{
protocol: "https",
hostname: process.env.S3_ENDPOINT?.replace("https://", "") || "",
remotePatterns: s3Host
? [{ protocol: "https", hostname: s3Host }]
: [],
},
async headers() {
return [
{
protocol: "http",
hostname: process.env.S3_ENDPOINT?.replace("http://", "") || "",
source: "/:path*",
headers: securityHeaders,
},
],
];
},
};

View File

@ -41,31 +41,43 @@ export default function ImageUploader({ images, onImagesChange }: ImageUploaderP
setUploading(true);
try {
const newImages = [...images];
const newPreviews = [...previews];
for (const file of validFiles) {
const baseOrder = images.length;
const results = await Promise.allSettled(
validFiles.map(async (file, idx) => {
const formData = new FormData();
formData.append("file", file);
const res = await fetch("/api/upload", {
method: "POST",
body: formData,
});
if (!res.ok) {
const data = await res.json();
const data = await res.json().catch(() => ({}));
throw new Error(data.error || "Не успеа качувањето");
}
const { key, url } = await res.json();
const order = newImages.length + 1;
newImages.push({ key, order, url });
newPreviews.push({ key, url, order });
return { key, url, order: baseOrder + idx + 1 };
})
);
const newImages = [...images];
const newPreviews = [...previews];
const failures: string[] = [];
for (const r of results) {
if (r.status === "fulfilled") {
newImages.push({ key: r.value.key, order: r.value.order, url: r.value.url });
newPreviews.push({ key: r.value.key, url: r.value.url, order: r.value.order });
} else {
failures.push(r.reason instanceof Error ? r.reason.message : "Не успеа качувањето");
}
}
onImagesChange(newImages);
setPreviews(newPreviews);
if (failures.length > 0) {
setError(failures.join("; "));
} else {
setError("");
}
} catch (err) {
setError(err instanceof Error ? err.message : "Не успеа качувањето");
} finally {