Veiligheidsgids · Veilig vibecoden
Waarom een API-sleutel in je code of frontend een open voordeur is, en hoe je het goed doet.
Een API-sleutel is een wachtwoord voor een dienst. Wie hem heeft, kan op jouw kosten AI-modellen aanroepen, je database lezen of mails versturen. Gelekte sleutels worden binnen minuten gevonden door bots die GitHub en websites afzoeken.
Bij vibecoding gaat dit vaak mis: de AI zet de sleutel direct in de code om het werkend te krijgen, en die code belandt op GitHub of in de browser van elke bezoeker.
Alles wat in de browser draait, is voor iedereen zichtbaar via de ontwikkelaarstools. Een sleutel in frontend-code is dus publiek.
Ook als je hem later verwijdert, blijft hij in de git-geschiedenis staan. Bij een publieke repository is hij direct gelekt.
Een sleutel met admin-rechten richt meer schade aan dan een sleutel die alleen kan lezen.
Zonder uitgavenlimiet kan een gelekte AI-sleutel in korte tijd een hoge rekening opleveren.
De browser praat met jouw eigen server-route. Alleen de server kent de sleutel, via een environment variable die niet in git staat.
Loop dit na voordat je verder gaat of iets online zet.
De tien fouten die in bijna elke AI-gegenereerde app zitten, en hoe je ze vindt voordat een aanvaller dat doet.
De vangnetten die elke vibecoder nodig heeft: versiebeheer, terug kunnen naar een werkende versie en je code veilig online zetten.
Een tool die een CV naast een vacature legt en uitlegt waar het past en waar niet. Voor sollicitanten om hun CV te verbeteren.
Van idee naar een betaalbaar product met accounts, een AI-functie, limieten en een veilige productieomgeving.
Een chatbot die vragen van bezoekers beantwoordt op basis van jouw eigen informatie, en eerlijk zegt als hij het niet weet.
Een snelle, professionele website voor jezelf of je bedrijf, gebouwd met een AI-app builder en online gezet.
Spreek je klus in, en krijg een offerte terug op basis van je eigen prijslijst. Gebouwd voor installateurs, klussers en zzp'ers.
// Draait in de browser: iedereen kan deze sleutel zien
const res = await fetch("https://api.example-ai.com/v1/chat", {
headers: { Authorization: "Bearer sk-live-abc123..." },
body: JSON.stringify({ prompt }),
});// app/api/chat/route.ts: draait alleen op de server
export async function POST(req: Request) {
const { prompt } = await req.json();
const res = await fetch("https://api.example-ai.com/v1/chat", {
headers: { Authorization: `Bearer ${process.env.AI_API_KEY}` },
body: JSON.stringify({ prompt }),
});
return Response.json(await res.json());
}