Call a GIF API from JavaScript without exposing your key

Call a credentialed GIF API from server-side JavaScript, then return the approved result fields to your authenticated frontend. A key embedded in a browser bundle is visible to everyone who loads it, even when the source code is minified.

The following Node.js example uses GIFs.so and Zod. It assumes you have installed Zod and set GIFS_API_KEY in the server environment after creating a verified account.

Validate the data boundary

import { z } from "zod";

const resultSchema = z.object({
  items: z.array(
    z.object({
      id: z.string(),
      title: z.string(),
      gifUrl: z.url(),
      thumbnailUrl: z.url(),
      mp4Url: z.url().nullable(),
    })
  ),
  nextOffset: z.number().nullable(),
  total: z.number(),
  sponsors: z.array(
    z.object({
      id: z.string(),
      name: z.string(),
      url: z.url(),
      sponsored: z.literal(true),
    })
  ),
});

export async function searchGifs(query) {
  const key = process.env.GIFS_API_KEY;
  if (!key) throw new Error("GIFS_API_KEY is required");
  const url = new URL("https://gifs.so/api/rest/gifs");
  url.searchParams.set("query", query);
  url.searchParams.set("limit", "12");
  const response = await fetch(url, {
    headers: { "x-api-key": key },
    signal: AbortSignal.timeout(8000),
  });
  if (!response.ok) {
    throw new Error(`GIF search failed: ${response.status}`);
  }
  return resultSchema.parse(await response.json());
}

This intentionally validates only the fields used by a minimal picker. Add the remaining sponsor creative and media fields from OpenAPI when your UI needs them. Preserve sponsorship disclosure in the frontend.

Add application behavior around the helper

Validate and bound user input before calling this function. Protect the route that uses your shared key; an unrestricted proxy lets strangers consume your account’s allowance. Apply your application’s own per-user limits as well as handling provider limits.

Distinguish a timeout from an empty result. An empty items array is a successful search; a thrown error means the request did not produce a usable response. On 401, fix access. On 429, wait rather than immediately retrying.

For pagination, keep nextOffset with the query that produced it. For browser typing, ignore responses from superseded queries. See the React picker design and retry guidance before turning a single request into a production search experience.