elpatron/hoerdle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cover-Bilder über API-Route laden statt direkt aus Dateisystem

Browse Source
This commit is contained in:
Hördle Bot
2025-12-14 14:11:02 +01:00
parent 56461fe0bb
commit bc95af8027
3 changed files with 117 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
app/api/covers/[filename]/route.ts Normal file
View File

@@ -0,0 +1,95 @@
import { NextRequest, NextResponse } from 'next/server';
import { stat } from 'fs/promises';
import { createReadStream } from 'fs';
import path from 'path';
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ filename: string }> }
) {
try {
const { filename } = await params;
// Security: Prevent path traversal attacks
// Allow alphanumeric, hyphens, underscores, and dots for image filenames
// Support common image formats: jpg, jpeg, png, gif, webp
const safeFilenamePattern = /^[a-zA-Z0-9_\-\.]+\.(jpg|jpeg|png|gif|webp)$/i;
if (!safeFilenamePattern.test(filename)) {
return new NextResponse('Invalid filename', { status: 400 });
}
// Additional check: ensure no path separators
if (filename.includes('/') || filename.includes('\\') || filename.includes('..')) {
return new NextResponse('Invalid filename', { status: 400 });
}
const filePath = path.join(process.cwd(), 'public/uploads/covers', filename);
// Security: Verify the resolved path is still within covers directory
const coversDir = path.join(process.cwd(), 'public/uploads/covers');
const resolvedPath = path.resolve(filePath);
if (!resolvedPath.startsWith(coversDir)) {
return new NextResponse('Forbidden', { status: 403 });
}
const stats = await stat(filePath);
const fileSize = stats.size;
// Determine content type based on file extension
const ext = filename.toLowerCase().split('.').pop();
const contentTypeMap: Record<string, string> = {
'jpg': 'image/jpeg',
'jpeg': 'image/jpeg',
'png': 'image/png',
'gif': 'image/gif',
'webp': 'image/webp',
};
const contentType = contentTypeMap[ext || ''] || 'image/jpeg';
const stream = createReadStream(filePath);
// Convert Node stream to Web stream
const readable = new ReadableStream({
start(controller) {
let isClosed = false;
stream.on('data', (chunk: any) => {
if (isClosed) return;
try {
controller.enqueue(chunk);
} catch (e) {
isClosed = true;
stream.destroy();
}
});
stream.on('end', () => {
if (isClosed) return;
isClosed = true;
controller.close();
});
stream.on('error', (err: any) => {
if (isClosed) return;
isClosed = true;
controller.error(err);
});
},
cancel() {
stream.destroy();
}
});
return new NextResponse(readable, {
status: 200,
headers: {
'Content-Length': fileSize.toString(),
'Content-Type': contentType,
'Cache-Control': 'public, max-age=3600, must-revalidate',
},
});
} catch (error) {
console.error('Error serving cover image:', error);
return new NextResponse('Internal Server Error', { status: 500 });
}
}

25
app/curator/CuratorPageClient.tsx
View File

@@ -1615,7 +1615,7 @@ export default function CuratorPageClient() {
</div>
)}
<div style={{ overflowX: 'auto' }}>
<div style={{ overflowX: 'auto', position: 'relative' }}>
<table
style={{
width: '100%',
@@ -1686,7 +1686,17 @@ export default function CuratorPageClient() {
{t('columnRating')} {sortField === 'averageRating' && (sortDirection === 'asc' ? '↑' : '↓')}
</th>
<th style={{ padding: '0.5rem' }}>{t('columnExcludeGlobal')}</th>
<th style={{ padding: '0.5rem' }}>{t('columnActions')}</th>
<th
style={{
padding: '0.5rem',
position: 'sticky',
right: 0,
backgroundColor: 'white',
zIndex: 10,
}}
>
{t('columnActions')}
</th>
</tr>
</thead>
<tbody>
@@ -1701,12 +1711,13 @@ export default function CuratorPageClient() {
const isSelected = selectedSongIds.has(song.id);
const rowBackgroundColor = isSelected ? '#eff6ff' : 'white';
return (
<tr
key={song.id}
style={{
borderBottom: '1px solid #f3f4f6',
backgroundColor: isSelected ? '#eff6ff' : 'transparent',
backgroundColor: rowBackgroundColor,
}}
>
<td style={{ padding: '0.5rem' }}>
@@ -1810,7 +1821,7 @@ export default function CuratorPageClient() {
}}
>
<img
src={`/uploads/covers/${song.coverImage}`}
src={`/api/covers/${song.coverImage}`}
alt={`Cover für ${song.title}`}
style={{
width: '200px',
@@ -2010,6 +2021,10 @@ export default function CuratorPageClient() {
style={{
padding: '0.5rem',
whiteSpace: 'nowrap',
position: 'sticky',
right: 0,
backgroundColor: rowBackgroundColor,
zIndex: 10,
}}
>
{isEditing ? (
@@ -2025,6 +2040,7 @@ export default function CuratorPageClient() {
border: 'none',
borderRadius: '0.25rem',
cursor: 'pointer',
whiteSpace: 'nowrap',
}}
>
💾
@@ -2038,6 +2054,7 @@ export default function CuratorPageClient() {
border: 'none',
borderRadius: '0.25rem',
cursor: 'pointer',
whiteSpace: 'nowrap',
}}
>
✖

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "hoerdle",
"version": "0.1.6.31",
"version": "0.1.6.32",
"private": true,
"scripts": {
"dev": "next dev",