API Keys & Security¶

Some services need an API key — a paid geocoder like MapTiler (search.geocoder.apiKey), a basemap style URL with ?key=…, an Esri layer URL with &token=…. Before you ship one, understand what a static web app can and can't protect.

Two different problems¶

1. Committing a key to git. If a key is typed into settings.ts and pushed, it's in your repository's history for anyone who can see the repo. This one has a real fix: keep the key in a .env file, which is already git-ignored, and read it from there:

# app/.env  (never committed)
VITE_MAPTILER_KEY=your-key-here

// app/settings.ts
geocoder: { provider: 'maptiler', apiKey: import.meta.env.VITE_MAPTILER_KEY },

2. The key being visible to every visitor. .env does not fix this. Conness GIS builds a static site — there's no server — so Vite writes every VITE_… value straight into the JavaScript it ships. Anyone who opens your deployed app can find the key in the browser's network tab or page source, wherever it came from. A purely static app has no way to hide a value from its own visitors.

How to protect a key anyway¶

• Restrict it to your domain. Nearly every provider (MapTiler, Mapbox, Esri, Google) lets you limit a key to specific websites (HTTP referrers) in its dashboard. A copied key then won't work anywhere else, even though it's visible. For most map keys, this is the right answer.
• Keep truly secret keys off the client. If a key can't be domain-restricted, is tied to billing you can't cap, or grants write access, it must never reach the browser. The only real fix is to send those requests through a small server or edge function that adds the key itself. Conness GIS doesn't include one.

The build warning¶

npm run build finishes by scanning the built app (app/dist/) for anything that looks like a key — URL parameters such as ?key=, &token=, &api_key=, &access_token=, and config values like apiKey: "…". If it finds one, it lists where and repeats the advice above.

It's a warning, not an error: the build still succeeds, because plenty of keys (like a domain-restricted MapTiler key) are meant to be public. Treat it as a reminder to check that each key it lists is restricted. The check lives in app/scripts/check-keys.mjs.