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,19 +1,46 @@
|
|||||||
import type { NextConfig } from "next";
|
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 = {
|
const nextConfig: NextConfig = {
|
||||||
output: "standalone",
|
output: "standalone",
|
||||||
|
poweredByHeader: false,
|
||||||
|
compress: true,
|
||||||
images: {
|
images: {
|
||||||
remotePatterns: [
|
remotePatterns: s3Host
|
||||||
|
? [{ protocol: "https", hostname: s3Host }]
|
||||||
|
: [],
|
||||||
|
},
|
||||||
|
async headers() {
|
||||||
|
return [
|
||||||
{
|
{
|
||||||
protocol: "https",
|
source: "/:path*",
|
||||||
hostname: process.env.S3_ENDPOINT?.replace("https://", "") || "",
|
headers: securityHeaders,
|
||||||
},
|
},
|
||||||
{
|
];
|
||||||
protocol: "http",
|
|
||||||
hostname: process.env.S3_ENDPOINT?.replace("http://", "") || "",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default nextConfig;
|
export default nextConfig;
|
||||||
|
|||||||
@ -41,31 +41,43 @@ export default function ImageUploader({ images, onImagesChange }: ImageUploaderP
|
|||||||
setUploading(true);
|
setUploading(true);
|
||||||
|
|
||||||
try {
|
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 newImages = [...images];
|
||||||
const newPreviews = [...previews];
|
const newPreviews = [...previews];
|
||||||
|
const failures: string[] = [];
|
||||||
for (const file of validFiles) {
|
for (const r of results) {
|
||||||
const formData = new FormData();
|
if (r.status === "fulfilled") {
|
||||||
formData.append("file", file);
|
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 });
|
||||||
const res = await fetch("/api/upload", {
|
} else {
|
||||||
method: "POST",
|
failures.push(r.reason instanceof Error ? r.reason.message : "Не успеа качувањето");
|
||||||
body: formData,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const data = await res.json();
|
|
||||||
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 });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onImagesChange(newImages);
|
onImagesChange(newImages);
|
||||||
setPreviews(newPreviews);
|
setPreviews(newPreviews);
|
||||||
|
if (failures.length > 0) {
|
||||||
|
setError(failures.join("; "));
|
||||||
|
} else {
|
||||||
|
setError("");
|
||||||
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(err instanceof Error ? err.message : "Не успеа качувањето");
|
setError(err instanceof Error ? err.message : "Не успеа качувањето");
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user