feat: proxy gravatars by returning data urls instead of gravatar url

Author: Gugustinette

server/api/gravatar.get.ts

@@ -11,42 +11,30 @@ function getQueryParam(event: H3Event, key: string): string {
   return Array.isArray(value) ? String(value[0] ?? '') : String(value ?? '')
 }
 
-export default defineCachedEventHandler(
-  async event => {
-    const rawUsername = getQueryParam(event, 'username')
-    const rawSize = getQueryParam(event, 'size')
+export default defineCachedEventHandler(async event => {
+  const rawUsername = getQueryParam(event, 'username')
+  const rawSize = getQueryParam(event, 'size')
 
-    try {
-      const { username, size } = v.parse(GravatarQuerySchema, {
-        username: rawUsername,
-        size: rawSize ? rawSize : undefined,
-      })
-
-      const url = await getGravatarFromUsername(username, size ?? 80)
+  try {
+    const { username, size } = v.parse(GravatarQuerySchema, {
+      username: rawUsername,
+      size: rawSize ? rawSize : undefined,
+    })
 
-      if (!url) {
-        throw createError({
-          statusCode: 404,
-          message: ERROR_GRAVATAR_EMAIL_UNAVAILABLE,
-        })
-      }
+    const dataUrl = await getGravatarFromUsername(username, size ?? 80)
 
-      return { url }
-    } catch (error: unknown) {
-      handleApiError(error, {
-        statusCode: 502,
-        message: ERROR_GRAVATAR_FETCH_FAILED,
+    if (!dataUrl) {
+      throw createError({
+        statusCode: 404,
+        message: ERROR_GRAVATAR_EMAIL_UNAVAILABLE,
       })
     }
-  },
-  {
-    maxAge: CACHE_MAX_AGE_ONE_DAY,
-    swr: true,
-    getKey: event => {
-      const username = getQueryParam(event, 'username').trim().toLowerCase()
-      const size = getQueryParam(event, 'size') || '80'
-      const defaultImg = getQueryParam(event, 'default') || '404'
-      return `gravatar:v1:${username}:${size}:${defaultImg}`
-    },
-  },
-)
+
+    return { url: dataUrl }
+  } catch (error: unknown) {
+    handleApiError(error, {
+      statusCode: 502,
+      message: ERROR_GRAVATAR_FETCH_FAILED,
+    })
+  }
+})

server/utils/gravatar.ts

@@ -1,3 +1,4 @@
+import { Buffer } from 'node:buffer'
 import { createHash } from 'node:crypto'
 import { fetchUserEmail } from '#server/utils/npm'
 
@@ -15,5 +16,17 @@ export async function getGravatarFromUsername(
 
   const trimmedEmail = email.trim().toLowerCase()
   const md5Hash = createHash('md5').update(trimmedEmail).digest('hex')
-  return `https://www.gravatar.com/avatar/${md5Hash}?s=${size}&d=404`
+  const gravatarUrl = `https://www.gravatar.com/avatar/${md5Hash}?s=${size}&d=404`
+
+  try {
+    const response = await fetch(gravatarUrl)
+    if (!response.ok) return null
+
+    const contentType = response.headers.get('content-type') || 'image/png'
+    const arrayBuffer = await response.arrayBuffer()
+    const base64 = Buffer.from(arrayBuffer).toString('base64')
+    return `data:${contentType};base64,${base64}`
+  } catch {
+    return null
+  }
 }

test/unit/server/utils/gravatar.spec.ts

@@ -1,3 +1,4 @@
+import { Buffer } from 'node:buffer'
 import { createHash } from 'node:crypto'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -8,9 +9,13 @@ vi.mock('#server/utils/npm', () => ({
 const { getGravatarFromUsername } = await import('../../../../server/utils/gravatar')
 const { fetchUserEmail } = await import('#server/utils/npm')
 
+const mockFetch = vi.fn()
+
 describe('gravatar utils', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockFetch.mockReset()
+    vi.stubGlobal('fetch', mockFetch)
   })
 
   it('returns null when username is empty', async () => {
@@ -29,25 +34,41 @@ describe('gravatar utils', () => {
     expect(fetchUserEmail).toHaveBeenCalledOnce()
   })
 
-  it('builds a gravatar URL with a trimmed, lowercased email hash', async () => {
+  it('builds a gravatar data URL with a trimmed, lowercased email hash', async () => {
     const email = ' Test@Example.com '
     const normalized = 'test@example.com'
     const hash = createHash('md5').update(normalized).digest('hex')
+    const imageBytes = new Uint8Array([1, 2, 3])
+    const base64 = Buffer.from(imageBytes).toString('base64')
     vi.mocked(fetchUserEmail).mockResolvedValue(email)
+    mockFetch.mockResolvedValue({
+      ok: true,
+      headers: { get: () => 'image/png' },
+      arrayBuffer: vi.fn().mockResolvedValue(imageBytes.buffer),
+    })
 
     const url = await getGravatarFromUsername('user')
 
-    expect(url).toBe(`https://www.gravatar.com/avatar/${hash}?s=80&d=404`)
+    expect(url).toBe(`data:image/png;base64,${base64}`)
+    expect(mockFetch).toHaveBeenCalledWith(`https://www.gravatar.com/avatar/${hash}?s=80&d=404`)
   })
 
   it('supports custom size', async () => {
     const email = 'user@example.com'
     const hash = createHash('md5').update(email).digest('hex')
+    const imageBytes = new Uint8Array([4, 5, 6])
+    const base64 = Buffer.from(imageBytes).toString('base64')
     vi.mocked(fetchUserEmail).mockResolvedValue(email)
+    mockFetch.mockResolvedValue({
+      ok: true,
+      headers: { get: () => 'image/png' },
+      arrayBuffer: vi.fn().mockResolvedValue(imageBytes.buffer),
+    })
 
     const url = await getGravatarFromUsername('user', 128)
 
-    expect(url).toBe(`https://www.gravatar.com/avatar/${hash}?s=128&d=404`)
+    expect(url).toBe(`data:image/png;base64,${base64}`)
+    expect(mockFetch).toHaveBeenCalledWith(`https://www.gravatar.com/avatar/${hash}?s=128&d=404`)
   })
 
   it('trims the username before lookup', async () => {