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:
parent
c0effe6ec9
commit
ddd4327a99
@ -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: [
|
||||
remotePatterns: s3Host
|
||||
? [{ protocol: "https", hostname: s3Host }]
|
||||
: [],
|
||||
},
|
||||
async headers() {
|
||||
return [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: process.env.S3_ENDPOINT?.replace("https://", "") || "",
|
||||
source: "/:path*",
|
||||
headers: securityHeaders,
|
||||
},
|
||||
{
|
||||
protocol: "http",
|
||||
hostname: process.env.S3_ENDPOINT?.replace("http://", "") || "",
|
||||
},
|
||||
],
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -41,31 +41,43 @@ export default function ImageUploader({ images, onImagesChange }: ImageUploaderP
|
||||
setUploading(true);
|
||||
|
||||
try {
|
||||
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().catch(() => ({}));
|
||||
throw new Error(data.error || "Не успеа качувањето");
|
||||
}
|
||||
const { key, url } = await res.json();
|
||||
return { key, url, order: baseOrder + idx + 1 };
|
||||
})
|
||||
);
|
||||
|
||||
const newImages = [...images];
|
||||
const newPreviews = [...previews];
|
||||
|
||||
for (const file of validFiles) {
|
||||
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();
|
||||
throw new Error(data.error || "Не успеа качувањето");
|
||||
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 : "Не успеа качувањето");
|
||||
}
|
||||
|
||||
const { key, url } = await res.json();
|
||||
const order = newImages.length + 1;
|
||||
newImages.push({ key, order, url });
|
||||
newPreviews.push({ key, url, order });
|
||||
}
|
||||
|
||||
onImagesChange(newImages);
|
||||
setPreviews(newPreviews);
|
||||
if (failures.length > 0) {
|
||||
setError(failures.join("; "));
|
||||
} else {
|
||||
setError("");
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Не успеа качувањето");
|
||||
} finally {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user