refactor: Proxy and cache avatar images (#907)

* refactor: proxy and cache user avatar images

* fix: extract keys

* fix: set avatar image URL

* fix: show the correct avatar in the list of available users in advanced request

* fix(s): set correct src URL for cached image

* fix: remove unexpired unused image when a user changes their avatar

* fix: requested changes

* refactor: use 'mime' package to detmerine file extension

* style: grammar

* refactor: checks if the default avatar is cached to avoid creating duplicates for different users

* fix: fix vulnerability

* fix: fix incomplete URL substring sanitization

* refactor: only cache avatar with http url protocol

* fix: remove log and correctly set the if statement for the cached image component

* fix: avatar images not showing on issues page

* style: formatting

---------

Co-authored-by: JoaquinOlivero <joaquin.olivero@hotmail.com>

server/routes/auth.ts

@@ -6,6 +6,7 @@ import { UserType } from '@server/constants/user';
 import { getRepository } from '@server/datasource';
 import { User } from '@server/entity/User';
 import { startJobs } from '@server/job/schedule';
+import ImageProxy from '@server/lib/imageproxy';
 import { Permission } from '@server/lib/permissions';
 import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
@@ -342,6 +343,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
                 }),
             userType: UserType.EMBY,
           });
+
           break;
         case MediaServerType.JELLYFIN:
           settings.main.mediaServerType = MediaServerType.JELLYFIN;
@@ -360,6 +362,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
                 }),
             userType: UserType.JELLYFIN,
           });
+
           break;
         default:
           throw new Error('select_server_type');
@@ -407,12 +410,24 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
       );
       // Update the users avatar with their jellyfin profile pic (incase it changed)
       if (account.User.PrimaryImageTag) {
-        user.avatar = `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`;
+        const avatar = `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`;
+        if (avatar !== user.avatar) {
+          const avatarProxy = new ImageProxy('avatar', '');
+          avatarProxy.clearCachedImage(user.avatar);
+        }
+        user.avatar = avatar;
       } else {
-        user.avatar = gravatarUrl(user.email || account.User.Name, {
+        const avatar = gravatarUrl(user.email || account.User.Name, {
           default: 'mm',
           size: 200,
         });
+
+        if (avatar !== user.avatar) {
+          const avatarProxy = new ImageProxy('avatar', '');
+          avatarProxy.clearCachedImage(user.avatar);
+        }
+
+        user.avatar = avatar;
       }
       user.jellyfinUsername = account.User.Name;
 
@@ -462,6 +477,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
             ? UserType.JELLYFIN
             : UserType.EMBY,
       });
+
       //initialize Jellyfin/Emby users with local login
       const passedExplicitPassword = body.password && body.password.length > 0;
       if (passedExplicitPassword) {

server/routes/avatarproxy.ts

@@ -0,0 +1,32 @@
+import ImageProxy from '@server/lib/imageproxy';
+import logger from '@server/logger';
+import { Router } from 'express';
+
+const router = Router();
+
+const avatarImageProxy = new ImageProxy('avatar', '');
+// Proxy avatar images
+router.get('/*', async (req, res) => {
+  const imagePath = req.url.startsWith('/') ? req.url.slice(1) : req.url;
+
+  try {
+    const imageData = await avatarImageProxy.getImage(imagePath);
+
+    res.writeHead(200, {
+      'Content-Type': `image/${imageData.meta.extension}`,
+      'Content-Length': imageData.imageBuffer.length,
+      'Cache-Control': `public, max-age=${imageData.meta.curRevalidate}`,
+      'OS-Cache-Key': imageData.meta.cacheKey,
+      'OS-Cache-Status': imageData.meta.cacheMiss ? 'MISS' : 'HIT',
+    });
+
+    res.end(imageData.imageBuffer);
+  } catch (e) {
+    logger.error('Failed to proxy avatar image', {
+      imagePath,
+      errorMessage: e.message,
+    });
+  }
+});
+
+export default router;

server/routes/settings/index.ts

@@ -746,11 +746,13 @@ settingsRoutes.get('/cache', async (_req, res) => {
   }));
 
   const tmdbImageCache = await ImageProxy.getImageStats('tmdb');
+  const avatarImageCache = await ImageProxy.getImageStats('avatar');
 
   return res.status(200).json({
     apiCaches,
     imageCache: {
       tmdb: tmdbImageCache,
+      avatar: avatarImageCache,
     },
   });
 });