🛡️ Sentinel: [HIGH] Fix missing rate limiting on /api/exif/[id]

Co-authored-by: ralksta <16941050+ralksta@users.noreply.github.com>

app/[...path]/AlbumDetailView.tsx

@@ -6,36 +6,40 @@ import type { GridConfig } from '@/lib/config';
 import React from 'react';
 
 interface AlbumDetailViewProps {
-    album: ImmichAlbum;
-    images: PhotoItem[];
-    layout: GridConfig['layout'];
-    gridStyle: React.CSSProperties;
-    backLinkHref: string;
-    backLinkLabel: string;
-    subtitle?: string;
+  album: ImmichAlbum;
+  images: PhotoItem[];
+  layout: GridConfig['layout'];
+  gridStyle: React.CSSProperties;
+  backLinkHref: string;
+  backLinkLabel: string;
+  subtitle?: string;
 }
 
 export function AlbumDetailView({
-    album,
-    images,
-    layout,
-    gridStyle,
-    backLinkHref,
-    backLinkLabel,
-    subtitle,
+  album,
+  images,
+  layout,
+  gridStyle,
+  backLinkHref,
+  backLinkLabel,
+  subtitle,
 }: AlbumDetailViewProps) {
-    return (
-        <>
-            <div className="album-header">
-                <BackLink href={backLinkHref} label={backLinkLabel} />
-                <h1 className="album-header__title">{album.albumName}</h1>
-                {subtitle && <p className="subpage-subtitle" style={{ textAlign: "left", marginLeft: 0 }}>{subtitle}</p>}
-                <p className="album-header__meta">
-                    {images.length} {images.length === 1 ? 'photo' : 'photos'}
-                    {album.description && ` · ${album.description}`}
-                </p>
-            </div>
-            <PhotoGrid assets={images} layout={layout} gridStyle={gridStyle} />
-        </>
-    );
+  return (
+    <>
+      <div className="album-header">
+        <BackLink href={backLinkHref} label={backLinkLabel} />
+        <h1 className="album-header__title">{album.albumName}</h1>
+        {subtitle && (
+          <p className="subpage-subtitle" style={{ textAlign: 'left', marginLeft: 0 }}>
+            {subtitle}
+          </p>
+        )}
+        <p className="album-header__meta">
+          {images.length} {images.length === 1 ? 'photo' : 'photos'}
+          {album.description && ` · ${album.description}`}
+        </p>
+      </div>
+      <PhotoGrid assets={images} layout={layout} gridStyle={gridStyle} />
+    </>
+  );
 }

app/[...path]/SubpageGridView.tsx

@@ -4,143 +4,146 @@ import { imageUrl } from '@/lib/urls';
 import { SubpageSectionConfig } from '@/lib/config';
 
 interface SubpageAlbum {
-    id: string;
-    slug: string;
-    albumName: string;
-    assetCount: number;
-    albumThumbnailAssetId: string | null;
+  id: string;
+  slug: string;
+  albumName: string;
+  assetCount: number;
+  albumThumbnailAssetId: string | null;
 }
 
 interface Placeholder {
-    blurDataURL?: string;
-    dominantColor?: string;
+  blurDataURL?: string;
+  dominantColor?: string;
 }
 
 interface SubpageGridViewProps {
-    slug: string;
-    title?: string;
-    subtitle?: string;
-    albums: SubpageAlbum[];
-    coverPlaceholders: (Placeholder | null)[];
-    sections?: SubpageSectionConfig[];
+  slug: string;
+  title?: string;
+  subtitle?: string;
+  albums: SubpageAlbum[];
+  coverPlaceholders: (Placeholder | null)[];
+  sections?: SubpageSectionConfig[];
 }
 
 function AlbumGrid({
-    albums,
-    albumMap,
-    placeholderMap,
-    slug,
+  albums,
+  albumMap,
+  placeholderMap,
+  slug,
 }: {
-    albums: SubpageAlbum[];
-    albumMap: Map<string, SubpageAlbum>;
-    placeholderMap: Map<string, Placeholder | null>;
-    slug: string;
+  albums: SubpageAlbum[];
+  albumMap: Map<string, SubpageAlbum>;
+  placeholderMap: Map<string, Placeholder | null>;
+  slug: string;
 }) {
-    return (
-        <div className="subpage-grid">
-            {albums.map((album) => {
-                const ph = placeholderMap.get(album.id) ?? null;
-                return (
-                    <Link
-                        key={album.id}
-                        href={`/${slug}/${album.slug}`}
-                        className="subpage-grid__item"
-                        style={ph?.dominantColor ? { backgroundColor: ph.dominantColor } : undefined}
-                    >
-                        {album.albumThumbnailAssetId ? (
-                            <Image
-                                src={imageUrl(album.albumThumbnailAssetId, 'preview')}
-                                alt={album.albumName}
-                                fill
-                                sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
-                                loading="lazy"
-                                {...(ph ? { placeholder: 'blur' as const, blurDataURL: ph.blurDataURL } : {})}
-                            />
-                        ) : (
-                            <div className="skeleton" style={{ width: '100%', height: '100%' }} />
-                        )}
-                        <span className="subpage-grid__item-badge">
-                            {album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
-                        </span>
-                        <div className="subpage-grid__item-overlay">
-                            <span className="subpage-grid__item-title">{album.albumName}</span>
-                            <span className="subpage-grid__item-count">
-                                {album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
-                            </span>
-                        </div>
-                    </Link>
-                );
-            })}
-        </div>
-    );
-}
-
-export function SubpageGridView({ slug, title, subtitle, albums, coverPlaceholders, sections }: SubpageGridViewProps) {
-    // Build lookup maps once
-    const albumMap = new Map(albums.map((a) => [a.id, a]));
-    const placeholderMap = new Map(albums.map((a, i) => [a.id, coverPlaceholders[i] ?? null]));
-
-    const hasSections = sections && sections.length > 0;
-
-    return (
-        <div className="subpage-container">
-            {(title || subtitle) && (
-                <header className="subpage-header">
-                    {title && <h1 className="subpage-title">{title}</h1>}
-                    {subtitle && <p className="subpage-subtitle">{subtitle}</p>}
-                </header>
-            )}
-
-            {/* Typographic Table of Contents */}
-            {hasSections && (
-                <nav className="subpage-toc" aria-label="Sections">
-                    {sections.map((sec, i) => (
-                        <span key={sec.slug} className="subpage-toc__entry">
-                            <a href={`#${sec.slug}`} className="subpage-toc__link">
-                                <span className="subpage-toc__num">
-                                    {String(i + 1).padStart(2, '0')}
-                                </span>
-                                <span className="subpage-toc__label">{sec.title}</span>
-                            </a>
-                        </span>
-                    ))}
-                </nav>
-            )}
-
-            {/* Sectioned layout */}
-            {hasSections ? (
-                sections.map((sec) => {
-                    const sectionAlbums = sec.albumIds
-                        .map((id) => albumMap.get(id))
-                        .filter(Boolean) as SubpageAlbum[];
-
-                    return (
-                        <section key={sec.slug} id={sec.slug} className="subpage-section">
-                            <header className="subpage-section__header">
-                                <h2 className="subpage-section__title">{sec.title}</h2>
-                                {sec.description && (
-                                    <p className="subpage-section__desc">{sec.description}</p>
-                                )}
-                                <div className="subpage-section__rule" aria-hidden="true" />
-                            </header>
-                            <AlbumGrid
-                                albums={sectionAlbums}
-                                albumMap={albumMap}
-                                placeholderMap={placeholderMap}
-                                slug={slug}
-                            />
-                        </section>
-                    );
-                })
+  return (
+    <div className="subpage-grid">
+      {albums.map((album) => {
+        const ph = placeholderMap.get(album.id) ?? null;
+        return (
+          <Link
+            key={album.id}
+            href={`/${slug}/${album.slug}`}
+            className="subpage-grid__item"
+            style={ph?.dominantColor ? { backgroundColor: ph.dominantColor } : undefined}
+          >
+            {album.albumThumbnailAssetId ? (
+              <Image
+                src={imageUrl(album.albumThumbnailAssetId, 'preview')}
+                alt={album.albumName}
+                fill
+                sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
+                loading="lazy"
+                {...(ph ? { placeholder: 'blur' as const, blurDataURL: ph.blurDataURL } : {})}
+              />
             ) : (
-                /* Flat layout (no sections) */
-                <AlbumGrid
-                    albums={albums}
-                    albumMap={albumMap}
-                    placeholderMap={placeholderMap}
-                    slug={slug}
-                />
+              <div className="skeleton" style={{ width: '100%', height: '100%' }} />
             )}
-        </div>
-    );
+            <span className="subpage-grid__item-badge">
+              {album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
+            </span>
+            <div className="subpage-grid__item-overlay">
+              <span className="subpage-grid__item-title">{album.albumName}</span>
+              <span className="subpage-grid__item-count">
+                {album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
+              </span>
+            </div>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
+
+export function SubpageGridView({
+  slug,
+  title,
+  subtitle,
+  albums,
+  coverPlaceholders,
+  sections,
+}: SubpageGridViewProps) {
+  // Build lookup maps once
+  const albumMap = new Map(albums.map((a) => [a.id, a]));
+  const placeholderMap = new Map(albums.map((a, i) => [a.id, coverPlaceholders[i] ?? null]));
+
+  const hasSections = sections && sections.length > 0;
+
+  return (
+    <div className="subpage-container">
+      {(title || subtitle) && (
+        <header className="subpage-header">
+          {title && <h1 className="subpage-title">{title}</h1>}
+          {subtitle && <p className="subpage-subtitle">{subtitle}</p>}
+        </header>
+      )}
+
+      {/* Typographic Table of Contents */}
+      {hasSections && (
+        <nav className="subpage-toc" aria-label="Sections">
+          {sections.map((sec, i) => (
+            <span key={sec.slug} className="subpage-toc__entry">
+              <a href={`#${sec.slug}`} className="subpage-toc__link">
+                <span className="subpage-toc__num">{String(i + 1).padStart(2, '0')}</span>
+                <span className="subpage-toc__label">{sec.title}</span>
+              </a>
+            </span>
+          ))}
+        </nav>
+      )}
+
+      {/* Sectioned layout */}
+      {hasSections ? (
+        sections.map((sec) => {
+          const sectionAlbums = sec.albumIds
+            .map((id) => albumMap.get(id))
+            .filter(Boolean) as SubpageAlbum[];
+
+          return (
+            <section key={sec.slug} id={sec.slug} className="subpage-section">
+              <header className="subpage-section__header">
+                <h2 className="subpage-section__title">{sec.title}</h2>
+                {sec.description && <p className="subpage-section__desc">{sec.description}</p>}
+                <div className="subpage-section__rule" aria-hidden="true" />
+              </header>
+              <AlbumGrid
+                albums={sectionAlbums}
+                albumMap={albumMap}
+                placeholderMap={placeholderMap}
+                slug={slug}
+              />
+            </section>
+          );
+        })
+      ) : (
+        /* Flat layout (no sections) */
+        <AlbumGrid
+          albums={albums}
+          albumMap={albumMap}
+          placeholderMap={placeholderMap}
+          slug={slug}
+        />
+      )}
+    </div>
+  );
 }