source: Klonkt/src/services/ThumbnailService.js@ 74c5abc

main
Last change on this file since 74c5abc was 74c5abc, checked in by Robin Genis <roboburr@…>, 2 months ago

feat(images): downscale remote (fediverse) avatars via a signed proxy

Remote avatars live on other servers, so the browser shrank full-res line-art to ~44px
(jagged). Fetch them once (SSRF-safe via safeFetch), downscale identically (lanczos -> WebP),
cache, serve. HMAC-signed proxy URLs → not an open resizer.

  • services/ActivityPubService.js — export safeFetch
  • services/ThumbnailService.js — getRemoteThumbnail + signed imgProxyUrl/verifyImg; +128px size
  • server.js — GET /img/a/:w signed proxy route
  • middleware/render.js — avatar(url,w) helper (local thumb / remote proxy)
  • views: news.ejs, fedi-node.ejs, following.ejs avatars -> avatar()
  • Property mode set to 100644
File size: 6.1 KB
RevLine 
[f79a471]1/**
2 * On-demand cover thumbnails.
3 *
4 * High-res covers (especially line-art) look jagged because the BROWSER downscales
5 * them to the small grid/list size. We instead downscale the stored original
6 * server-side with ffmpeg's lanczos filter to a small WebP and cache it on disk, so
7 * the browser receives a near-1:1 image → crisp lines.
8 *
9 * No re-upload / backfill: the original file is only READ, never modified, and
10 * thumbnails are generated lazily on first request. Cover filenames are content-
11 * hashed/UUID, so a cached thumbnail can never go stale (a new cover = a new name).
12 *
13 * Uses the bundled `ffmpeg-static` (always present); cwebp is not required here.
14 */
15import { execFile } from 'child_process';
16import ffmpegPath from 'ffmpeg-static';
17import path from 'path';
18import fs from 'fs';
[74c5abc]19import crypto from 'crypto';
[f79a471]20import { promisify } from 'util';
[74c5abc]21import { safeFetch } from './ActivityPubService.js';
[f79a471]22
23const execFileP = promisify(execFile);
24
[74c5abc]25// Allowed widths (whitelist → no arbitrary-size abuse). 128 = avatars; 480 ≈ 2× a grid tile.
26export const THUMB_SIZES = new Set([128, 320, 480, 640]);
[f79a471]27
28let _seq = 0;
29
30function mediaRoot() {
31 return path.resolve(process.env.MEDIA_PATH || './storage/media');
32}
33
34// Resolve a safe absolute path for a relative media path; null on traversal attempts.
35function safeOriginal(rel) {
36 const root = mediaRoot();
37 const orig = path.resolve(root, rel);
38 if (orig !== root && !orig.startsWith(root + path.sep)) return null;
39 return orig;
40}
41
42/**
43 * Return the on-disk path of the cached thumbnail, generating it if needed.
44 * @returns {Promise<string|null>} absolute path, or null if it can't be produced.
45 */
46export async function getThumbnail(rel, width) {
47 if (!THUMB_SIZES.has(width) || !ffmpegPath || !rel) return null;
48 const orig = safeOriginal(rel);
49 if (!orig || !fs.existsSync(orig)) return null;
50
51 const root = mediaRoot();
52 // Cache under <media>/.thumbs/<w>/<rel>.webp (dotted dir → never collides with media).
53 const cached = path.join(root, '.thumbs', String(width), rel) + '.webp';
54 if (fs.existsSync(cached)) return cached;
55
56 await fs.promises.mkdir(path.dirname(cached), { recursive: true });
57 const tmp = `${cached}.tmp-${process.pid}-${_seq++}`;
58 try {
59 await execFileP(ffmpegPath, [
60 '-hide_banner', '-loglevel', 'error', '-y',
61 '-i', orig,
62 // Downscale to `width` (never upscale past the original) with lanczos; even height.
63 '-vf', `scale='min(${width},iw)':-2:flags=lanczos`,
64 '-frames:v', '1',
65 '-c:v', 'libwebp', '-q:v', '82',
66 // Force the WebP muxer: the tmp filename has no .webp extension, so ffmpeg
67 // can't infer the output format from it.
68 '-f', 'webp',
69 tmp,
70 ], { timeout: 20000 });
71 await fs.promises.rename(tmp, cached);
72 return cached;
73 } catch (e) {
74 try { await fs.promises.unlink(tmp); } catch {}
75 console.warn('[thumb] generation failed for', rel, '-', e.message);
76 return null;
77 }
78}
[74c5abc]79
80// ── Signed remote-image proxy ─────────────────────────────────────
81// Remote avatars/images (fediverse) live on OTHER servers, so we fetch them once
82// (SSRF-safe via safeFetch), downscale them identically, and cache. The proxy URL is
83// HMAC-signed so it can't be abused as an open image-resizer: only URLs that Klonkt
84// itself rendered are accepted.
85
86let _key;
87function imgKey() {
88 if (_key) return _key;
89 _key = process.env.SESSION_SECRET || '';
90 if (!_key) {
91 try {
92 const dataDir = path.dirname(path.resolve(process.env.DATABASE_PATH || './storage/database.sqlite'));
93 _key = fs.readFileSync(path.join(dataDir, '.session-secret'), 'utf8').trim();
94 } catch { _key = 'klonkt-img-proxy'; }
95 }
96 return _key;
97}
98
99function sign(url, w) {
100 return crypto.createHmac('sha256', imgKey()).update(`${w}:${url}`).digest('hex').slice(0, 24);
101}
102
103// Signed proxy URL for a remote image (used by the avatar() view helper).
104export function imgProxyUrl(url, width) {
105 return `/img/a/${width}?u=${encodeURIComponent(url)}&s=${sign(url, width)}`;
106}
107
108export function verifyImg(url, width, sig) {
109 if (!sig || !url) return false;
110 let want;
111 try { want = sign(url, width); } catch { return false; }
112 try { return crypto.timingSafeEqual(Buffer.from(sig), Buffer.from(want)); } catch { return false; }
113}
114
115/**
116 * Fetch a remote image (SSRF-safe), downscale to `width` (lanczos → WebP), cache it.
117 * @returns {Promise<string|null>} cached path, or null.
118 */
119export async function getRemoteThumbnail(url, width) {
120 if (!THUMB_SIZES.has(width) || !ffmpegPath || !url) return null;
121 const root = mediaRoot();
122 const hash = crypto.createHash('sha256').update(url).digest('hex');
123 // Remote filenames are content-hashed (Mastodon/Klonkt) → URL-keyed cache never stales.
124 const cached = path.join(root, '.thumbs', 'remote', String(width), `${hash}.webp`);
125 if (fs.existsSync(cached)) return cached;
126
127 let buf;
128 try {
129 const r = await safeFetch(url);
130 if (!r.ok) return null;
131 if (!(r.headers.get('content-type') || '').startsWith('image/')) return null;
132 if (parseInt(r.headers.get('content-length') || '0', 10) > 12 * 1024 * 1024) return null;
133 buf = Buffer.from(await r.arrayBuffer());
134 } catch (e) {
135 console.warn('[thumb-remote] fetch failed for', url, '-', e.message);
136 return null;
137 }
138 if (buf.length > 12 * 1024 * 1024) return null;
139
140 await fs.promises.mkdir(path.dirname(cached), { recursive: true });
141 const tmpIn = `${cached}.in-${process.pid}-${_seq++}`;
142 const tmpOut = `${cached}.out-${process.pid}-${_seq++}`;
143 try {
144 await fs.promises.writeFile(tmpIn, buf);
145 await execFileP(ffmpegPath, [
146 '-hide_banner', '-loglevel', 'error', '-y',
147 '-i', tmpIn,
148 '-vf', `scale='min(${width},iw)':-2:flags=lanczos`,
149 '-frames:v', '1',
150 '-c:v', 'libwebp', '-q:v', '82', '-f', 'webp',
151 tmpOut,
152 ], { timeout: 20000 });
153 await fs.promises.rename(tmpOut, cached);
154 return cached;
155 } catch (e) {
156 console.warn('[thumb-remote] downscale failed for', url, '-', e.message);
157 return null;
158 } finally {
159 fs.promises.unlink(tmpIn).catch(() => {});
160 fs.promises.unlink(tmpOut).catch(() => {});
161 }
162}
Note: See TracBrowser for help on using the repository browser.