feat: Fetch avatars using user id

.changeset/plenty-snakes-dream.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": minor
+---
+
+Added a new route to allow fetching avatars by the user's id `/avatar/uid/<UserID>`

apps/meteor/server/routes/avatar/index.js

@@ -1,9 +1,10 @@
 import { WebApp } from 'meteor/webapp';
 
 import { roomAvatar } from './room';
-import { userAvatar } from './user';
+import { userAvatarByUsername, userAvatarById } from './user';
 
 import './middlewares';
 
 WebApp.connectHandlers.use('/avatar/room/', roomAvatar);
-WebApp.connectHandlers.use('/avatar/', userAvatar);
+WebApp.connectHandlers.use('/avatar/uid/', userAvatarById);
+WebApp.connectHandlers.use('/avatar/', userAvatarByUsername);

apps/meteor/server/routes/avatar/middlewares/auth.ts

@@ -0,0 +1,47 @@
+import type { ServerResponse } from 'http';
+
+import type { IIncomingMessage } from '@rocket.chat/core-typings';
+import type { NextFunction } from 'connect';
+
+import { userCanAccessAvatar, renderSVGLetters } from '../utils';
+
+const renderFallback = (req: IIncomingMessage, res: ServerResponse) => {
+	if (!req.url) {
+		res.writeHead(404);
+		res.end();
+		return;
+	}
+
+	let roomOrUsername;
+
+	if (req.url.startsWith('/room')) {
+		roomOrUsername = req.url.split('/')[2] || 'Room';
+	} else {
+		roomOrUsername = req.url.split('/')[1] || 'Anonymous';
+	}
+
+	res.writeHead(200, { 'Content-Type': 'image/svg+xml' });
+	res.write(renderSVGLetters(roomOrUsername, 200));
+	res.end();
+};
+
+const getProtectAvatars = (callback?: typeof renderFallback) => async (req: IIncomingMessage, res: ServerResponse, next: NextFunction) => {
+	if (!(await userCanAccessAvatar(req))) {
+		if (callback) {
+			callback(req, res);
+			return;
+		}
+
+		res.writeHead(404);
+		res.end();
+		return;
+	}
+
+	return next();
+};
+
+// If unauthorized returns the SVG fallback (letter avatar)
+export const protectAvatarsWithFallback = getProtectAvatars(renderFallback);
+
+// Just returns 404
+export const protectAvatars = getProtectAvatars();

apps/meteor/server/routes/avatar/middlewares/index.js

@@ -1,7 +1,8 @@
 import { WebApp } from 'meteor/webapp';
 
-import { protectAvatars } from './auth';
+import { protectAvatars, protectAvatarsWithFallback } from './auth';
 
 import './browserVersion';
 
-WebApp.connectHandlers.use('/avatar/', protectAvatars);
+WebApp.connectHandlers.use('/avatar/', protectAvatarsWithFallback);
+WebApp.connectHandlers.use('/avatar/uid/', protectAvatars);

apps/meteor/server/routes/avatar/room.js

@@ -3,7 +3,7 @@ import { Cookies } from 'meteor/ostrio:cookies';
 
 import { FileUpload } from '../../../app/file-upload/server';
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
-import { renderSVGLetters, serveAvatar, wasFallbackModified, setCacheAndDispositionHeaders } from './utils';
+import { renderSVGLetters, serveSvgAvatarInRequestedFormat, wasFallbackModified, setCacheAndDispositionHeaders } from './utils';
 
 const MAX_ROOM_SVG_AVATAR_SIZE = 1024;
 const MIN_ROOM_SVG_AVATAR_SIZE = 16;
@@ -74,5 +74,5 @@ export const roomAvatar = async function (req, res /* , next*/) {
 
 	const svg = renderSVGLetters(roomName, avatarSize);
 
-	return serveAvatar(svg, req.query.format, res);
+	return serveSvgAvatarInRequestedFormat(svg, req.query.format, res);
 };

apps/meteor/server/routes/avatar/user.ts

@@ -0,0 +1,169 @@
+import type { ServerResponse } from 'http';
+
+import type { IUpload, IIncomingMessage } from '@rocket.chat/core-typings';
+import { Avatars, Users } from '@rocket.chat/models';
+import { serverFetch as fetch } from '@rocket.chat/server-fetch';
+import type { NextFunction } from 'connect';
+
+import { FileUpload } from '../../../app/file-upload/server';
+import { settings } from '../../../app/settings/server';
+import { renderSVGLetters, serveSvgAvatarInRequestedFormat, wasFallbackModified, setCacheAndDispositionHeaders } from './utils';
+
+const MAX_USER_SVG_AVATAR_SIZE = 1024;
+const MIN_USER_SVG_AVATAR_SIZE = 16;
+
+const serveSvgAvatar = (nameOrUsername: string, size: number, format: string, res: ServerResponse) => {
+	const svg = renderSVGLetters(nameOrUsername, size);
+	serveSvgAvatarInRequestedFormat(svg, format, res);
+};
+
+const getAvatarSizeFromRequest = (req: IIncomingMessage) => {
+	const requestSize = req.query.size && parseInt(req.query.size);
+	return Math.min(Math.max(requestSize, MIN_USER_SVG_AVATAR_SIZE), MAX_USER_SVG_AVATAR_SIZE);
+};
+
+const serveAvatarFile = (file: IUpload, req: IIncomingMessage, res: ServerResponse, next: NextFunction) => {
+	res.setHeader('Content-Security-Policy', "default-src 'none'");
+	const reqModifiedHeader = req.headers['if-modified-since'];
+
+	if (reqModifiedHeader && reqModifiedHeader === file.uploadedAt?.toUTCString()) {
+		res.setHeader('Last-Modified', reqModifiedHeader);
+		res.writeHead(304);
+		res.end();
+		return;
+	}
+
+	res.setHeader('Last-Modified', `${file.uploadedAt?.toUTCString()}`);
+	res.setHeader('Content-Type', file.type || '');
+	res.setHeader('Content-Length', file.size || 0);
+
+	return FileUpload.get(file, req, res, next);
+};
+
+const handleExternalProvider = async (externalProviderUrl: string, username: string, res: ServerResponse): Promise<boolean> => {
+	const response = await fetch(externalProviderUrl.replace('{username}', username));
+	response.headers.forEach((value, key) => res.setHeader(key, value));
+	response.body.pipe(res);
+	return true;
+};
+
+// request /avatar/@name forces returning the svg
+export const userAvatarByUsername = async function (req: IIncomingMessage, res: ServerResponse, next: NextFunction) {
+	if (!req.url) {
+		return;
+	}
+
+	const requestUsername = decodeURIComponent(req.url?.substr(1).replace(/\?.*$/, ''));
+
+	if (!requestUsername) {
+		res.writeHead(404);
+		res.end();
+		return;
+	}
+
+	setCacheAndDispositionHeaders(req, res);
+
+	const externalProviderUrl = settings.get<string>('Accounts_AvatarExternalProviderUrl');
+	if (externalProviderUrl) {
+		void handleExternalProvider(externalProviderUrl, requestUsername, res);
+		return;
+	}
+
+	const avatarSize = getAvatarSizeFromRequest(req);
+	// if request starts with @ always return the svg letters
+	if (requestUsername[0] === '@') {
+		serveSvgAvatar(requestUsername.slice(1), avatarSize, req.query.format, res);
+		return;
+	}
+
+	const file = await Avatars.findOneByName(requestUsername);
+	if (file) {
+		void serveAvatarFile(file, req, res, next);
+		return;
+	}
+
+	// if still using "letters fallback"
+	if (!wasFallbackModified(req.headers['if-modified-since'])) {
+		res.writeHead(304);
+		res.end();
+		return;
+	}
+
+	// Use real name for SVG letters
+	if (settings.get('UI_Use_Name_Avatar')) {
+		const user = await Users.findOneByUsernameIgnoringCase(requestUsername, {
+			projection: {
+				name: 1,
+			},
+		});
+
+		if (user?.name) {
+			serveSvgAvatar(user.name, avatarSize, req.query.format, res);
+			return;
+		}
+	}
+
+	serveSvgAvatar(requestUsername, avatarSize, req.query.format, res);
+};
+
+// This handler wont support `@` to force SVG letters
+export const userAvatarById = async function (req: IIncomingMessage, res: ServerResponse, next: NextFunction) {
+	if (!req.url) {
+		return;
+	}
+
+	const requestUserId = decodeURIComponent(req.url?.substr(1).replace(/\?.*$/, ''));
+
+	if (!requestUserId) {
+		res.writeHead(404);
+		res.end();
+		return;
+	}
+
+	setCacheAndDispositionHeaders(req, res);
+
+	const externalProviderUrl = settings.get<string>('Accounts_AvatarExternalProviderUrl');
+	if (externalProviderUrl) {
+		const user = await Users.findOneById(requestUserId, { projection: { username: 1, name: 1 } });
+
+		if (!user?.username) {
+			res.writeHead(404);
+			res.end();
+			return;
+		}
+
+		void handleExternalProvider(externalProviderUrl, user.username, res);
+		return;
+	}
+
+	const file = await Avatars.findOne({ userId: requestUserId });
+	if (file) {
+		void serveAvatarFile(file, req, res, next);
+		return;
+	}
+
+	const user = await Users.findOneById(requestUserId, { projection: { username: 1, name: 1 } });
+
+	if (!user?.username) {
+		res.writeHead(404);
+		res.end();
+		return;
+	}
+
+	// if still using "letters fallback"
+	if (!wasFallbackModified(req.headers['if-modified-since'])) {
+		res.writeHead(304);
+		res.end();
+		return;
+	}
+
+	const avatarSize = getAvatarSizeFromRequest(req);
+
+	// Use real name for SVG letters
+	if (settings.get('UI_Use_Name_Avatar') && user?.name) {
+		serveSvgAvatar(user.name, avatarSize, req.query.format, res);
+		return;
+	}
+
+	serveSvgAvatar(user.username, avatarSize, req.query.format, res);
+};

apps/meteor/server/routes/avatar/utils.js

@@ -11,7 +11,7 @@ const FALLBACK_LAST_MODIFIED = 'Thu, 01 Jan 2015 00:00:00 GMT';
 
 const cookie = new Cookies();
 
-export const serveAvatar = (avatar, format, res) => {
+export const serveSvgAvatarInRequestedFormat = (avatar, format, res) => {
 	res.setHeader('Last-Modified', FALLBACK_LAST_MODIFIED);
 
 	if (['png', 'jpg', 'jpeg'].includes(format)) {