fix #3199: firefox using cached images instead of new images. (#4743) * Fixed: https://github.com/SillyTavern/SillyTavern/issues/3199#issue-2745917391 * Wrap header set in isFirefox * Only invalidate Firefox caches. Also invalidate thumbnail caches. * Skip `mime.lookup` on non-Firefox browsers. * Improve param comments --------- Co-authored-by: user <user@exmaple.com> Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

105b436a66df8d2520a7e1e659b4fb7e7249a98b

DeclineThyself <FallenHaze@tutamail.com>

Signed

src/endpoints/thumbnails.js+7 -1 Viewed

 import { Jimp, JimpMime } from '../jimp.js';
 import { sync as writeFileAtomicSync } from 'write-file-atomic';
-import { getConfigValue } from '../util.js';
+import { getConfigValue, invalidateFirefoxCache } from '../util.js';
 const thumbnailsEnabled = !!getConfigValue('thumbnails.enabled', true, 'boolean');
 const quality = Math.min(100, Math.max(1, parseInt(getConfigValue('thumbnails.quality', 95, 'number'))));

             const contentType = mime.lookup(pathToOriginalFile) || 'image/png';
             const originalFile = await fsPromises.readFile(pathToOriginalFile);
             response.setHeader('Content-Type', contentType);
+            invalidateFirefoxCache(pathToOriginalFile, request, response);
             return response.send(originalFile);
+        }

         const contentType = mime.lookup(pathToCachedFile) || 'image/jpeg';
         const cachedFile = await fsPromises.readFile(pathToCachedFile);
         response.setHeader('Content-Type', contentType);
+        invalidateFirefoxCache(file, request, response);
         return response.send(cachedFile);
     } catch (error) {
         console.error('Failed getting thumbnail', error);

src/express-common.js+10 -0 Viewed

     return getIpFromRequest(req);
+}
+/**
+ * Checks if the request is coming from a Firefox browser.
+ * @param {import('express').Request} req Request object
+ * @returns {boolean} True if the request is from Firefox, false otherwise.
+ */
+export function isFirefox(req) {
+    const userAgent = req.headers['user-agent'] || '';
+    return /firefox/i.test(userAgent);
+}

src/users.js+3 -1 Viewed

 import sanitize from 'sanitize-filename';
 import { USER_DIRECTORY_TEMPLATE, DEFAULT_USER, PUBLIC_DIRECTORIES, SETTINGS_FILE, UPLOADS_DIRECTORY } from './constants.js';
-import { getConfigValue, color, delay, generateTimestamp } from './util.js';
+import { getConfigValue, color, delay, generateTimestamp, invalidateFirefoxCache } from './util.js';
 import { readSecret, writeSecret } from './endpoints/secrets.js';
 import { getContentOfType } from './endpoints/content-manager.js';
 import { serverDirectory } from './server-directory.js';

             if (!exists) {
                 return res.sendStatus(404);
+            }
+            invalidateFirefoxCache(filePath, req, res);
             return res.sendFile(filePath, { root: directory });
         } catch (error) {
             return res.sendStatus(500);

src/util.js+16 -0 Viewed

 import bytes from 'bytes';
 import { LOG_LEVELS, CHAT_COMPLETION_SOURCES } from './constants.js';
 import { serverDirectory } from './server-directory.js';
+import { isFirefox } from './express-common.js';
 /**
  * Parsed config object.

     delete flattenedSchema.$schema;
     return flattenedSchema;
+}
+/**
+ * If the file is an image, and the request's user agent matches Firefox, then the response's headers are set to invalidate the cache.
+ * Without this, Firefox ignores updated images even after a refresh.
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control
+ * @param {string} file File path
+ * @param {import('express').Request} request Request object
+ * @param {import('express').Response} response Response object
+ */
+export function invalidateFirefoxCache(file, request, response) {
+    const mimeType = isFirefox(request) && mime.lookup(file);
+    if (mimeType && mimeType.startsWith('image/')) {
+        response.setHeader('Cache-Control', 'must-understand, no-store');
+    }
+}