The Front Door and the Kitchen

Narrated

Open your trip planner. Open it right now. Press F12 to open your browser’s DevTools, click the “Network” tab, and generate a trip. Now click the request your app just sent to the AI and look through its details.

There it is: your API key, riding along in plain sight. Moving it out of your code and out of your Git history in Lesson 3 mattered, but your app still does its AI-calling in the browser, so the key still has to travel to the browser to do its job. Anyone using your app can open DevTools and read it right off the wire.

This isn’t a hypothetical problem. If you put this app on the internet right now, someone could open the page, grab your key, and use it to make thousands of AI requests on your bill. People actually do this. There are bots that scan the internet for exposed API keys. Your key would be found in hours, maybe minutes.

But the problem is deeper than just a leaked key. Right now, everything your app does happens in the browser. The AI logic, the secrets, the data processing, all of it. The browser is the user’s territory. You don’t control it. They can see everything, change everything, and take everything.

Think about a restaurant. You walk in and sit down in the dining room. It’s nice. There’s a menu. You order the pasta. A few minutes later, it arrives, beautifully plated. You eat. You’re happy.

But you were never in the kitchen. You didn’t see the recipe. You didn’t touch the ingredients. You didn’t see how the oven works or where the walk-in freezer is. And that’s exactly how it should be. The dining room is designed for you. The kitchen is designed for the chef.

Right now, your app is like a restaurant where the kitchen is the dining room. The customers are sitting next to the deep fryer. They can see the recipe book. They can grab ingredients off the shelf. That’s what it means when everything runs in the browser.