feat(web): re-add open graph tags for public share links (#5635)

* feat: re-add open graph tags for public share links

* fix: undefined in html

* chore: tests

server/.gitignore

@@ -11,6 +11,8 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
+www/
+
 # OS
 .DS_Store
 

server/src/domain/auth/auth.service.ts

@@ -371,7 +371,7 @@ export class AuthService {
     return cookies[IMMICH_ACCESS_COOKIE] || null;
   }
 
-  private async validateSharedLink(key: string | string[]): Promise<AuthDto> {
+  async validateSharedLink(key: string | string[]): Promise<AuthDto> {
     key = Array.isArray(key) ? key[0] : key;
 
     const bytes = Buffer.from(key, key.length === 100 ? 'hex' : 'base64url');

server/src/domain/domain.util.ts

@@ -16,6 +16,12 @@ import { CronJob } from 'cron';
 import { basename, extname } from 'node:path';
 import sanitize from 'sanitize-filename';
 
+export interface OpenGraphTags {
+  title: string;
+  description: string;
+  imageUrl?: string;
+}
+
 export type Options = {
   optional?: boolean;
   each?: boolean;

server/src/domain/shared-link/shared-link.service.spec.ts

@@ -256,4 +256,27 @@ describe(SharedLinkService.name, () => {
       expect(shareMock.update).toHaveBeenCalledWith({ ...sharedLinkStub.individual, assets: [] });
     });
   });
+
+  describe('getMetadataTags', () => {
+    it('should return null when auth is not a shared link', async () => {
+      await expect(sut.getMetadataTags(authStub.admin)).resolves.toBe(null);
+      expect(shareMock.get).not.toHaveBeenCalled();
+    });
+
+    it('should return null when shared link has a password', async () => {
+      await expect(sut.getMetadataTags(authStub.passwordSharedLink)).resolves.toBe(null);
+      expect(shareMock.get).not.toHaveBeenCalled();
+    });
+
+    it('should return metadata tags', async () => {
+      shareMock.get.mockResolvedValue(sharedLinkStub.individual);
+      await expect(sut.getMetadataTags(authStub.adminSharedLink)).resolves.toEqual({
+        description: '1 shared photos & videos',
+        imageUrl:
+          '/api/asset/thumbnail/asset-id?key=LCtkaJX4R1O_9D-2lq0STzsPryoL1UdAbyb6Sna1xxmQCSuqU2J1ZUsqt6GR-yGm1s0',
+        title: 'Public Share',
+      });
+      expect(shareMock.get).toHaveBeenCalled();
+    });
+  });
 });

server/src/domain/shared-link/shared-link.service.ts

@@ -3,6 +3,7 @@ import { BadRequestException, ForbiddenException, Inject, Injectable, Unauthoriz
 import { AccessCore, Permission } from '../access';
 import { AssetIdErrorReason, AssetIdsDto, AssetIdsResponseDto } from '../asset';
 import { AuthDto } from '../auth';
+import { OpenGraphTags } from '../domain.util';
 import { IAccessRepository, ICryptoRepository, ISharedLinkRepository } from '../repositories';
 import { SharedLinkResponseDto, mapSharedLink, mapSharedLinkWithoutMetadata } from './shared-link-response.dto';
 import { SharedLinkCreateDto, SharedLinkEditDto, SharedLinkPasswordDto } from './shared-link.dto';
@@ -28,7 +29,7 @@ export class SharedLinkService {
       throw new ForbiddenException();
     }
 
-    const sharedLink = await this.findOrFail(auth, auth.sharedLink.id);
+    const sharedLink = await this.findOrFail(auth.user.id, auth.sharedLink.id);
     const response = this.map(sharedLink, { withExif: sharedLink.showExif });
     if (sharedLink.password) {
       response.token = this.validateAndRefreshToken(sharedLink, dto);
@@ -38,7 +39,7 @@ export class SharedLinkService {
   }
 
   async get(auth: AuthDto, id: string): Promise<SharedLinkResponseDto> {
-    const sharedLink = await this.findOrFail(auth, id);
+    const sharedLink = await this.findOrFail(auth.user.id, id);
     return this.map(sharedLink, { withExif: true });
   }
 
@@ -79,7 +80,7 @@ export class SharedLinkService {
   }
 
   async update(auth: AuthDto, id: string, dto: SharedLinkEditDto) {
-    await this.findOrFail(auth, id);
+    await this.findOrFail(auth.user.id, id);
     const sharedLink = await this.repository.update({
       id,
       userId: auth.user.id,
@@ -94,20 +95,21 @@ export class SharedLinkService {
   }
 
   async remove(auth: AuthDto, id: string): Promise<void> {
-    const sharedLink = await this.findOrFail(auth, id);
+    const sharedLink = await this.findOrFail(auth.user.id, id);
     await this.repository.remove(sharedLink);
   }
 
-  private async findOrFail(auth: AuthDto, id: string) {
-    const sharedLink = await this.repository.get(auth.user.id, id);
+  // TODO: replace `userId` with permissions and access control checks
+  private async findOrFail(userId: string, id: string) {
+    const sharedLink = await this.repository.get(userId, id);
     if (!sharedLink) {
       throw new BadRequestException('Shared link not found');
     }
     return sharedLink;
   }
 
   async addAssets(auth: AuthDto, id: string, dto: AssetIdsDto): Promise<AssetIdsResponseDto[]> {
-    const sharedLink = await this.findOrFail(auth, id);
+    const sharedLink = await this.findOrFail(auth.user.id, id);
 
     if (sharedLink.type !== SharedLinkType.INDIVIDUAL) {
       throw new BadRequestException('Invalid shared link type');
@@ -141,7 +143,7 @@ export class SharedLinkService {
   }
 
   async removeAssets(auth: AuthDto, id: string, dto: AssetIdsDto): Promise<AssetIdsResponseDto[]> {
-    const sharedLink = await this.findOrFail(auth, id);
+    const sharedLink = await this.findOrFail(auth.user.id, id);
 
     if (sharedLink.type !== SharedLinkType.INDIVIDUAL) {
       throw new BadRequestException('Invalid shared link type');
@@ -164,6 +166,24 @@ export class SharedLinkService {
     return results;
   }
 
+  async getMetadataTags(auth: AuthDto): Promise<null | OpenGraphTags> {
+    if (!auth.sharedLink || auth.sharedLink.password) {
+      return null;
+    }
+
+    const sharedLink = await this.findOrFail(auth.sharedLink.userId, auth.sharedLink.id);
+    const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
+    const assetCount = sharedLink.assets.length || sharedLink.album?.assets.length || 0;
+
+    return {
+      title: sharedLink.album ? sharedLink.album.albumName : 'Public Share',
+      description: sharedLink.description || `${assetCount} shared photos & videos`,
+      imageUrl: assetId
+        ? `/api/asset/thumbnail/${assetId}?key=${sharedLink.key.toString('base64url')}`
+        : '/feature-panel.png',
+    };
+  }
+
   private map(sharedLink: SharedLinkEntity, { withExif }: { withExif: boolean }) {
     return withExif ? mapSharedLink(sharedLink) : mapSharedLinkWithoutMetadata(sharedLink);
   }

server/src/immich/app.service.ts

@@ -1,16 +1,47 @@
-import { JobService, LibraryService, ONE_HOUR, ServerInfoService, StorageService } from '@app/domain';
+import {
+  AuthService,
+  JobService,
+  ONE_HOUR,
+  OpenGraphTags,
+  ServerInfoService,
+  SharedLinkService,
+  StorageService,
+} from '@app/domain';
 import { Injectable, Logger } from '@nestjs/common';
 import { Cron, CronExpression, Interval } from '@nestjs/schedule';
+import { NextFunction, Request, Response } from 'express';
+import { readFileSync } from 'fs';
+
+const render = (index: string, meta: OpenGraphTags) => {
+  const tags = `
+    <meta name="description" content="${meta.description}" />
+
+    <!-- Facebook Meta Tags -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="${meta.title}" />
+    <meta property="og:description" content="${meta.description}" />
+    ${meta.imageUrl ? `<meta property="og:image" content="${meta.imageUrl}" />` : ''}
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="${meta.title}" />
+    <meta name="twitter:description" content="${meta.description}" />
+
+    ${meta.imageUrl ? `<meta name="twitter:image" content="${meta.imageUrl}" />` : ''}`;
+
+  return index.replace('<!-- metadata:tags -->', tags);
+};
 
 @Injectable()
 export class AppService {
   private logger = new Logger(AppService.name);
 
   constructor(
+    private authService: AuthService,
     private jobService: JobService,
-    private libraryService: LibraryService,
-    private storageService: StorageService,
     private serverService: ServerInfoService,
+    private sharedLinkService: SharedLinkService,
+    private storageService: StorageService,
   ) {}
 
   @Interval(ONE_HOUR.as('milliseconds'))
@@ -28,4 +59,47 @@ export class AppService {
     await this.serverService.handleVersionCheck();
     this.logger.log(`Feature Flags: ${JSON.stringify(await this.serverService.getFeatures(), null, 2)}`);
   }
+
+  ssr(excludePaths: string[]) {
+    const index = readFileSync('/usr/src/app/www/index.html').toString();
+
+    return async (req: Request, res: Response, next: NextFunction) => {
+      if (
+        req.url.startsWith('/api') ||
+        req.method.toLowerCase() !== 'get' ||
+        excludePaths.find((item) => req.url.startsWith(item))
+      ) {
+        return next();
+      }
+
+      const targets = [
+        {
+          regex: /^\/share\/(.+)$/,
+          onMatch: async (matches: RegExpMatchArray) => {
+            const key = matches[1];
+            const auth = await this.authService.validateSharedLink(key);
+            return this.sharedLinkService.getMetadataTags(auth);
+          },
+        },
+      ];
+
+      let html = index;
+
+      try {
+        for (const { regex, onMatch } of targets) {
+          const matches = req.url.match(regex);
+          if (matches) {
+            const meta = await onMatch(matches);
+            if (meta) {
+              html = render(index, meta);
+            }
+
+            break;
+          }
+        }
+      } catch {}
+
+      res.type('text/html').header('Cache-Control', 'no-store').send(html);
+    };
+  }
 }

server/src/immich/app.utils.ts

@@ -13,7 +13,6 @@ import {
   SwaggerDocumentOptions,
   SwaggerModule,
 } from '@nestjs/swagger';
-import { NextFunction, Request, Response } from 'express';
 import { writeFileSync } from 'fs';
 import path from 'path';
 
@@ -101,14 +100,6 @@ const patchOpenAPI = (document: OpenAPIObject) => {
   return document;
 };
 
-export const indexFallback = (excludePaths: string[]) => (req: Request, res: Response, next: NextFunction) => {
-  if (req.url.startsWith('/api') || req.method.toLowerCase() !== 'get' || excludePaths.indexOf(req.url) !== -1) {
-    next();
-  } else {
-    res.sendFile('/www/index.html', { root: process.cwd() });
-  }
-};
-
 export const useSwagger = (app: INestApplication, isDev: boolean) => {
   const config = new DocumentBuilder()
     .setTitle('Immich')

server/src/immich/main.ts

@@ -6,7 +6,8 @@ import { NestExpressApplication } from '@nestjs/platform-express';
 import { json } from 'body-parser';
 import cookieParser from 'cookie-parser';
 import { AppModule } from './app.module';
-import { indexFallback, useSwagger } from './app.utils';
+import { AppService } from './app.service';
+import { useSwagger } from './app.utils';
 
 const logger = new Logger('ImmichServer');
 const port = Number(process.env.SERVER_PORT) || 3001;
@@ -27,7 +28,7 @@ export async function bootstrap() {
   const excludePaths = ['/.well-known/immich', '/custom.css'];
   app.setGlobalPrefix('api', { exclude: excludePaths });
   app.useStaticAssets('www');
-  app.use(indexFallback(excludePaths));
+  app.use(app.get(AppService).ssr(excludePaths));
 
   await enablePrefilter();
 

server/test/fixtures/auth.stub.ts

@@ -104,6 +104,20 @@ export const authStub = {
       showExif: true,
     } as SharedLinkEntity,
   }),
+  passwordSharedLink: Object.freeze<AuthDto>({
+    user: {
+      id: 'admin_id',
+      email: 'admin@test.com',
+      isAdmin: true,
+    } as UserEntity,
+    sharedLink: {
+      id: '123',
+      allowUpload: false,
+      allowDownload: false,
+      password: 'password-123',
+      showExif: true,
+    } as SharedLinkEntity,
+  }),
 };
 
 export const loginResponseStub = {

web/src/app.html

@@ -1,6 +1,9 @@
 <!doctype html>
 <html lang="en" class="dark">
   <head>
+    <!-- (used for SSR) -->
+    <!-- metadata:tags -->
+
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%

web/src/routes/(user)/share/[key]/+page.ts

@@ -1,4 +1,3 @@
-import featurePanelUrl from '$lib/assets/feature-panel.png';
 import { getAuthUser } from '$lib/utils/auth';
 import { api, ThumbnailFormat } from '@api';
 import { error } from '@sveltejs/kit';
@@ -21,7 +20,9 @@ export const load = (async ({ params }) => {
       meta: {
         title: sharedLink.album ? sharedLink.album.albumName : 'Public Share',
         description: sharedLink.description || `${assetCount} shared photos & videos.`,
-        imageUrl: assetId ? api.getAssetThumbnailUrl(assetId, ThumbnailFormat.Webp, sharedLink.key) : featurePanelUrl,
+        imageUrl: assetId
+          ? api.getAssetThumbnailUrl(assetId, ThumbnailFormat.Webp, sharedLink.key)
+          : '/feature-panel.png',
       },
     };
   } catch (e) {