Blog1 min readPremium

Securing AI Features on the Frontend: API Keys, Prompt Injection, and XSS from Markdown

Securing AI Features on the Frontend: API Keys, Prompt Injection, and XSS from Markdown

When I review AI features that teams are about to ship, I keep finding the same handful of security issues. None of them are exotic. They’re the kind of thing that slips through because AI feels like a backend concern, and frontend engineers assume someone else handled it.

Here’s the list I check every time, with code.

Trust boundaries between browser, your API proxy, the LLM provider, and retrieved content

The mental model that ties everything together: there are three untrusted inputs in an AI feature, not one. The user’s prompt, any content the model reads (web pages, documents, emails), and the model’s own output. Most people only think about the first.

1. Your API key is in the bundle

This is still the most common one, and it’s the most expensive.

Build tools inline certain environment variables into your client JavaScript on purpose. In Vite, anything prefixed with VITE_ ends up in the bundle. In Next.js, anything prefixed with NEXT_PUBLIC_ does. If your LLM key is in one of those, anyone can open... premium content.

Premium

Keep reading with Premium

Get the rest of this guide plus every premium question, solution, and system design deep dive.

  • All premium solutions
  • System design deep dives
  • Company-specific prep

4.9/5 from our users