Serve avatars from site's own /imaging endpoint instead of habbo.com

- Change default public imager URL from habbo.com to /imaging
- /imaging and /api/imaging/avatar now proxy from upstream (habbo.com) instead of redirecting
- Add resolveUpstreamBase() to separate public URL from upstream URL
- Update admin settings default and description

src/app/admin/settings/cms-settings-config.ts

@@ -91,11 +91,11 @@ export const SETTINGS_GROUPS: SettingsGroup[] = [
 		fields: [
 			{
 				key: "habbo_imaging_url",
-				label: "Habbo imager URL",
+				label: "Public imager URL",
 				type: "url",
-				defaultValue: "https://www.habbo.com/habbo-imaging/avatarimage",
+				defaultValue: "/imaging",
 				description:
-					"Public Habbo avatar endpoint used in the browser. Do not point this at /api/imaging/avatar.",
+					"Public avatar endpoint (relative or absolute). Leave as /imaging to serve from this site.",
 			},
 			{
 				key: "imaging_use_habbo_fallback",

src/app/api/imaging/avatar/route.ts

@@ -1,17 +1,10 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { HABBO_IMAGER_URL, resolveImagerBase } from "@/lib/imager";
+import { resolveUpstreamBase } from "@/lib/imager";
-import { siteSettings } from "@/lib/services/site-settings";
-
-/**
- * GET /api/imaging/avatar?figure=…&size=l&direction=2&…
- *
- * Redirects to Habbo's public imager. Server-side proxying fails in production
- * (Habbo blocks datacenter IPs), so the browser loads the image from Habbo.
- */
 
 const FIGURE_RE = /^[a-z]{2}-\d+/i;
 const FIGURE_MAX_LEN = 512;
 const FIGURE_MAX_PARTS = 24;
+const UPSTREAM_TIMEOUT_MS = 10_000;
 
 export async function GET(request: NextRequest) {
 	const { searchParams } = new URL(request.url);
@@ -62,30 +55,50 @@ export async function GET(request: NextRequest) {
 		direction: String(direction),
 		head_direction: String(headDirection),
 		size,
+		img_format: "png",
 	});
 	if (headOnly) params.set("headonly", "1");
 	if (gesture) params.set("gesture", gesture);
 	if (action) params.set("action", action);
 
-	let base = HABBO_IMAGER_URL;
+	const imgFormat = searchParams.get("img_format");
+	if (imgFormat) params.set("img_format", imgFormat);
+
+	const upstream = resolveUpstreamBase();
+	const upstreamUrl = `${upstream}?${params.toString()}`;
+
 	try {
-		const configured = await siteSettings.get(
+		const res = await fetch(upstreamUrl, {
-			"habbo_imaging_url",
+			signal: AbortSignal.timeout(UPSTREAM_TIMEOUT_MS),
-			HABBO_IMAGER_URL,
+			headers: {
+				"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
+			},
+		});
+
+		if (!res.ok) {
+			return NextResponse.json(
+				{ error: "Upstream imager returned an error" },
+				{ status: res.status },
 			);
-		base = resolveImagerBase(configured);
-	} catch {
-		base = HABBO_IMAGER_URL;
 		}
 
-	const target = `${base}?${params.toString()}`;
+		const buffer = await res.arrayBuffer();
-	return NextResponse.redirect(target, {
+		const contentType = res.headers.get("content-type") || "image/png";
-		status: 302,
+
+		return new NextResponse(buffer, {
+			status: 200,
 			headers: {
+				"Content-Type": contentType,
 				"Cache-Control": "public, max-age=3600",
 				"Access-Control-Allow-Origin": "*",
 			},
 		});
+	} catch {
+		return NextResponse.json(
+			{ error: "Failed to fetch avatar from upstream" },
+			{ status: 502 },
+		);
+	}
 }
 
 export async function OPTIONS() {

src/app/imaging/route.ts

@@ -1,10 +1,10 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { HABBO_IMAGER_URL, resolveImagerBase } from "@/lib/imager";
+import { resolveUpstreamBase } from "@/lib/imager";
-import { siteSettings } from "@/lib/services/site-settings";
 
 const FIGURE_RE = /^[a-z]{2}-\d+/i;
 const FIGURE_MAX_LEN = 512;
 const FIGURE_MAX_PARTS = 24;
+const UPSTREAM_TIMEOUT_MS = 10_000;
 
 export async function GET(request: NextRequest) {
 	const { searchParams } = new URL(request.url);
@@ -61,29 +61,44 @@ export async function GET(request: NextRequest) {
 	if (gesture) params.set("gesture", gesture);
 	if (action) params.set("action", action);
 
-	let base = HABBO_IMAGER_URL;
-	try {
-		const configured = await siteSettings.get(
-			"habbo_imaging_url",
-			HABBO_IMAGER_URL,
-		);
-		base = resolveImagerBase(configured);
-	} catch {
-		base = HABBO_IMAGER_URL;
-	}
-
-	// Preserve any img_format passed by the caller
 	const imgFormat = searchParams.get("img_format");
 	if (imgFormat) params.set("img_format", imgFormat);
 
-	const target = `${base}?${params.toString()}`;
+	const upstream = resolveUpstreamBase();
-	return NextResponse.redirect(target, {
+	const upstreamUrl = `${upstream}?${params.toString()}`;
-		status: 302,
+
+	try {
+		const res = await fetch(upstreamUrl, {
+			signal: AbortSignal.timeout(UPSTREAM_TIMEOUT_MS),
 			headers: {
+				"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
+			},
+		});
+
+		if (!res.ok) {
+			return NextResponse.json(
+				{ error: "Upstream imager returned an error" },
+				{ status: res.status },
+			);
+		}
+
+		const buffer = await res.arrayBuffer();
+		const contentType = res.headers.get("content-type") || "image/png";
+
+		return new NextResponse(buffer, {
+			status: 200,
+			headers: {
+				"Content-Type": contentType,
 				"Cache-Control": "public, max-age=3600",
 				"Access-Control-Allow-Origin": "*",
 			},
 		});
+	} catch {
+		return NextResponse.json(
+			{ error: "Failed to fetch avatar from upstream" },
+			{ status: 502 },
+		);
+	}
 }
 
 export async function OPTIONS() {

src/lib/imager.test.ts

@@ -1,22 +1,27 @@
 import { describe, expect, it } from "vitest";
-import { getAvatarUrl, HABBO_IMAGER_URL, resolveImagerBase } from "./imager";
+import {
+	getAvatarUrl,
+	DEFAULT_IMAGER_URL,
+	resolveImagerBase,
+	resolveUpstreamBase,
+} from "./imager";
 
 describe("resolveImagerBase", () => {
-	it("defaults to Habbo imager", () => {
+	it("defaults to the site's own /imaging endpoint", () => {
-		expect(resolveImagerBase()).toBe(HABBO_IMAGER_URL);
+		expect(resolveImagerBase()).toBe(DEFAULT_IMAGER_URL);
-		expect(resolveImagerBase("")).toBe(HABBO_IMAGER_URL);
+		expect(resolveImagerBase("")).toBe(DEFAULT_IMAGER_URL);
-		expect(resolveImagerBase(null)).toBe(HABBO_IMAGER_URL);
+		expect(resolveImagerBase(null)).toBe(DEFAULT_IMAGER_URL);
 	});
 
 	it("rejects the broken self-hosted proxy", () => {
-		expect(resolveImagerBase("/api/imaging/avatar")).toBe(HABBO_IMAGER_URL);
+		expect(resolveImagerBase("/api/imaging/avatar")).toBe(DEFAULT_IMAGER_URL);
 		expect(
 			resolveImagerBase("https://www.epicnabbo.nl/api/imaging/avatar"),
-		).toBe(HABBO_IMAGER_URL);
+		).toBe(DEFAULT_IMAGER_URL);
-		expect(resolveImagerBase("/imaging")).toBe(HABBO_IMAGER_URL);
+	});
-		expect(
+
-			resolveImagerBase("https://www.epicnabbo.nl/imaging"),
+	it("accepts /imaging as a valid configured URL", () => {
-		).toBe(HABBO_IMAGER_URL);
+		expect(resolveImagerBase("/imaging")).toBe("/imaging");
 	});
 
 	it("keeps a custom Habbo-compatible base", () => {
@@ -26,14 +31,21 @@ describe("resolveImagerBase", () => {
 	});
 });
 
+describe("resolveUpstreamBase", () => {
+	it("defaults to Habbo's public imager", () => {
+		const url = resolveUpstreamBase();
+		expect(url).toBe("https://www.habbo.com/habbo-imaging/avatarimage");
+	});
+});
+
 describe("getAvatarUrl", () => {
-	it("builds a Habbo imager URL", () => {
+	it("builds an imager URL", () => {
 		const url = getAvatarUrl("hr-115-42.hd-180-1", {
 			size: "l",
 			headOnly: true,
 			direction: 2,
 		});
-		expect(url.startsWith(`${HABBO_IMAGER_URL}?`)).toBe(true);
+		expect(url.startsWith(`${DEFAULT_IMAGER_URL}?`)).toBe(true);
 		expect(url).toContain("figure=hr-115-42.hd-180-1");
 		expect(url).toContain("size=l");
 		expect(url).toContain("headonly=1");

src/lib/imager.ts

@@ -1,38 +1,47 @@
 /**
- * Habbo avatar imager helpers.
+ * Avatar imager helpers.
  *
- * Images are loaded directly from Habbo's public imager. The old self-hosted
+ * The public-facing imager URL resolves to the site's own `/imaging` endpoint
- * `/api/imaging/avatar` proxy fails in production (Habbo blocks server-side
+ * by default. That endpoint proxies the image from the configured upstream
- * fetches), so the browser always hits Habbo.com instead.
+ * (defaults to Habbo's public imager).
  */
 
 export type { AvatarOptions } from "@/types/admin";
 
 import type { AvatarOptions } from "@/types/admin";
 
-/** Official Habbo avatar imaging endpoint. */
+/** Default public imager endpoint (relative — served by the site itself). */
-export const HABBO_IMAGER_URL =
+export const DEFAULT_IMAGER_URL = "/imaging";
-	"https://www.habbo.com/habbo-imaging/avatarimage";
 
 /**
- * Resolve a usable imager base URL.
+ * Resolve the public-facing imager base URL.
- * Rejects the broken self-hosted proxy if it was stored in settings.
+ * Rejects the broken self-hosted proxy route if stored in settings.
  */
 export function resolveImagerBase(configured?: string | null): string {
 	const fromEnv = process.env.NEXT_PUBLIC_IMAGER_URL?.trim();
-	if (fromEnv && !fromEnv.includes("/api/imaging/avatar") && !fromEnv.includes("/imaging")) {
+	if (fromEnv && !fromEnv.includes("/api/imaging/avatar")) {
 		return fromEnv.replace(/\/+$/, "");
 	}
 
 	const v = (configured ?? "").trim();
-	if (!v || v.includes("/api/imaging/avatar") || v.includes("/imaging")) {
+	if (!v || v.includes("/api/imaging/avatar")) {
-		return HABBO_IMAGER_URL;
+		return DEFAULT_IMAGER_URL;
 	}
 	return v.replace(/\/+$/, "");
 }
 
 /**
- * Build an avatar image URL (Habbo imager by default).
+ * Resolve the upstream URL used by the proxy endpoint.
+ * Falls back to Habbo's public imager when nothing else is configured.
+ */
+export function resolveUpstreamBase(): string {
+	const fromEnv = process.env.IMAGING_UPSTREAM_URL?.trim();
+	if (fromEnv) return fromEnv.replace(/\/+$/, "");
+	return "https://www.habbo.com/habbo-imaging/avatarimage";
+}
+
+/**
+ * Build an avatar image URL (site's own `/imaging` endpoint by default).
  *
  * @example
  * getAvatarUrl('hr-893-45.hd-180-1.ch-210-66.lg-270-82')

src/lib/services/site-settings.ts

@@ -3,7 +3,7 @@ import { redis } from "@/lib/redis";
 
 const DEFAULTS: Record<string, string> = {
 	hotel_name: "Atom",
-	habbo_imaging_url: "https://www.habbo.com/habbo-imaging/avatarimage",
+	habbo_imaging_url: "/imaging",
 	logo_url: "",
 	nitro_client_url: "",
 };