Kort samengevat: vibe-coded frontend auditen voor deploy
- Iedereen kan coderen, maar: Iedereen kan coderen is een marketingzin, geen securitycontrole. Lovable, Cursor, Copilot en Replit stoppen zonder blikken API-keys in de frontend, valideren auth in de browser en trekken jQuery onder 3.5.0 je build in.
- De klassieke uitglijders: Klassieke vibe-coded uitglijders zijn hardcoded secrets, auth alleen client-side en verouderde libraries met bekende CVE's. cside deobfusceert en inspecteert elk derde-partijscript dat in de browser landt, zodat een AI-verrassing geen live kwetsbaarheid wordt.
- Merge niet blind: Merge de pull request die een script-tag toevoegt pas als iemand hem én zijn netwerkbestemmingen kan benoemen. Snelheid wint de sprint, lekken verliezen het kwartaal.
Weinig tijd? Bekijk cside's AI-agentdetectie. Dit dekt alles hieronder in één deployment.
In deze blog:
- Checklist voor vibe coding-kwetsbaarheden
- Hoe vibe coding risico's versnelt
- Hoe je kwetsbaarheden door vibe coding beperkt
"Iedereen kan coderen." Dat is de belofte van AI-assistenten zoals Lovable, Claude Code of Replit. En dat is echt opwindend. Ons team gebruikt vibe coding dagelijks voor front-end aanpassingen. Maar als je snel wilt shippen, zorg dan dat het schip niet lekt.
Snel shippen + lekken shippen = diep zinken.
We mogen niet blind vertrouwen op wat er onder de motorkap zit als de prijs de veiligheid van onze gebruikers is. Fouten onder de motorkap stapelen zich op. En als er dan iets misgaat, gaat het grondig mis. Deze blog bespreekt een aantal veelvoorkomende risico's en geeft je handvatten voor wat je moet oplossen vóór je live gaat.
Vibe Coding Vulnerability Cheat Sheet
| Kwetsbaarheid | Aanvalsstrategie | Mitigatiesuggestie |
|---|---|---|
| Hard-coded secrets AI-tools kunnen hard-coded secrets zoals API-sleutels insluiten. |
Sleutels bekijken via browserpagina's of DevTools. | Controleer JS op hard-coded secrets. Gebruik server-side opslag. |
| API- en databasesleutels rechtstreeks in client-code. | Sleutels ophalen, toegang krijgen tot database of API. | Gebruik omgevingsvariabelen of vault-service-integraties. |
| Alleen client-side authenticatie AI-gegenereerde code valideert logins vaak alleen in de browser-UI zonder server-side controles. |
Backend-API's rechtstreeks aanroepen om authenticatie te omzeilen. Gebruikersdata inzien of rechten aanpassen. |
Dwing authenticatie en autorisatie af op de back-end. |
| Verouderde libraries & packages LLM's kunnen verouderde libraries gebruiken (bijv. Axios, jQuery<3.5.0) met bekende CVE's. |
Scannen op bekende kwetsbaarheden in oude libraries. Misbruik maken via aanvalsmethoden met weinig inspanning. |
Voer npm audit fix (Node) of pip-audit (Python) uit om packages te upgraden. |
| Ontbrekende beveiligingsheaders Ontbrekende CSP, X-Frame-opties of niet-geïmplementeerde CORS-instellingen zijn zichtbaar in de browser. |
Misbruik maken van ontbrekende headers voor clickjacking of script-injecties. | Gebruik middleware (helmet.js / talisman / Django-instellingen) om standaardwaarden in te stellen. |
Vibe Coding Versnelt… Risico's.
AI-gegenereerde code is gebaseerd op data uit een trainingsset die op het moment van schrijven mogelijk verouderd is. Bovendien kunnen de codeergewoonten waaruit LLM's hun informatie halen om te beginnen al van slechte kwaliteit zijn.
Overweeg ook dit: platforms zoals Lovable en v0 Vercel voegen automatisch analytics, UI-helpers of telemetriescripts toe. Zo kun je verouderde third-party scripts erven die je niet zelf hebt gekozen en waar je geen controle over hebt. Als die gecompromitteerd zijn, ben jij dat ook.
Meer risico's kunnen verborgen blijven. Copilot, Claude en Codex stellen regelmatig verouderde npm-packages voor. Soms zijn dit zelfs versies met bekende beveiligingsfouten die in exploit-databases staan. En Supabase, dat vaak samen met vibe coding wordt gebruikt, bevat standaard een anonieme sleutel in de client-code. Als RLS niet is ingeschakeld, geeft die sleutel onbeperkte toegang en kan iedereen hem gebruiken om je database te bevragen of aan te passen.
En onveilige standaardinstellingen zoals wildcard CORS, ontbrekende CSP-headers of uitgebreide source maps zijn shortcuts die leiden tot beveiligingsgaten in productie.
Het Extra Client-Side Risico in AI-Gecodeerde Projecten
Aan de server-side beheers je de toegang, zichtbaarheid en uitvoering van je code, mits correct geïmplementeerd. Aan de client-side doe je dat niet. Alles in de browser kan worden geïnspecteerd, waardoor iedereen je client-side code en alle netwerkverzoeken kan inzien. Dit geeft kwaadwillenden de perfecte sandbox om je code te bekijken, te bewerken en aan te passen terwijl ze onder de radar blijven, op zoek naar een manier om je site te misbruiken.
Client-Side Kwetsbaarheden Die Je Shipt Bij Vibe Coding
Hier zijn enkele veelvoorkomende kwetsbaarheden die een goede dag betekenen voor een kwaadwillende partij:
Hard-coded secrets: Voor quickstarts en demo's kunnen AI-tools hard-coded secrets zoals API- en databasesleutels rechtstreeks in client-code plaatsen. Als je ze over het hoofd ziet, worden ze naar de browser gestuurd, waar iedereen ze kan inzien en misbruiken via DevTools of het netwerktabblad.
Uitgebreide source maps: Het is waarschijnlijk dat Replit, Supabase of Vercel en AI-scaffolds zoals Copilot, Claude en Cursor source maps ingeschakeld houden voor eenvoudiger debuggen. Als dit in productie over het hoofd wordt gezien, kunnen aanvallers interne logica, routes en foutmeldingen gebruiken voor reverse engineering.
Alleen client-side authenticatie: AI-gegenereerde code verwerkt vaak alleen front-end logica. Client-only authenticatiecontroles kunnen er in de UI veilig uitzien, maar zonder server-side authenticatiecontroles staat de front-end wagenwijd open. Een aanvaller gebruikt de UI simpelweg niet, maar roept de backend-API-endpoints rechtstreeks aan.
Verouderde libraries: LLM's kunnen verouderde libraries met third-party scripts gebruiken, zoals oudere Axios-versies of jQuery<3.5.0, met bekende CVE's. Je riskeert uiteraard het shippen van gisterens bugs en kwetsbaarheden. HTML niet gesaniteerd of innerHTML over het hoofd gezien in de haast van vibe coding? DOM XSS importeren maakt het nog erger.
Hoe Je Kwetsbaarheden Door Vibe Coding Beperkt
Packages
Verouderde NPM-packages worden veel gebruikt in AI-gegenereerde code, waardoor bekende CVE's vanaf het begin in je project kunnen zitten. Het commando 'npm audit fix' in Node JS-omgevingen upgradet je npm-packages automatisch naar de nieuwste versies, samen met kwetsbaarheidsoplossingen als die op dat moment bekend zijn.
Voor Python-omgevingen zoals Django en Flask voert het pip-audit Python-package dezelfde acties uit op de Python-packages die in je omgeving zijn geïnstalleerd.
Beveiligingsheaders
Misconfiguraties van beveiligingsheaders, zoals ontbrekende CSP-headers, ontbrekende X-Frame-opties of niet-geïmplementeerde CORS-instellingen, zijn zichtbaar in de browser van de gebruiker wanneer die je site bezoekt.
Wanneer projecten van begin tot eind worden vibe-gecodeerd zonder een duidelijk begrip van de vereiste beveiligingsheaders, laat dat veel ruimte voor AI om instellingen te missen die niet standaard worden overwogen, wat resulteert in kwetsbaarheden.
helmet.js kan worden gebruikt met Node JS-omgevingen om algemene beveiligingsheaders te implementeren. Een vergelijkbaar hulpmiddel voor Flask-omgevingen is talisman, terwijl Django vereist dat je de officiële documentatie raadpleegt om te zorgen dat deze instellingen en hun waarden correct worden toegevoegd aan je projectconfiguratiebestand.
Het belangrijkste bij het instellen hiervan is echter dat je begrijpt wat hun doel is en wat er voor jouw website vereist is. AI deze instellingen volledig voor je laten schrijven kan resulteren in zeer soepele instellingen die de deur openzetten voor kwetsbaarheden, terwijl het gebruik van een package voor je project het tegenovergestelde effect kan hebben en resulteert in veel striktere beveiligingsinstellingen die onnodig zijn en grote functionaliteitsproblemen veroorzaken in een productieomgeving.
Wat AI-Leveranciers Doen om Beveiliging te Verbeteren
Het is niet zo dat platforms zoals Lovable, Replit of AI-assistenten zoals ChatGPT beveiliging naast zich neerleggen. Lovable heeft bijvoorbeeld net de tweede generatie van zijn Security Checker uitgerold. Het systeem markeert risico's en blokkeert kwaadaardige inhoud zoals phishing of malware. Daarnaast doen ook industriestandaarden met SOC 2 Type 2- en ISO 27001:2022-certificeringen hun intrede. Ze kondigden ook recent een samenwerking aan met HackerOne, de premium keuze voor een bug bounty-provider.
Voor bouwers en gebruikers is beveiliging niet langer een bijzaak. Replit heeft sterkere standaardbeveiligingsinstellingen toegevoegd en Copilot gebruikt scans en Autofix voor GitHub. Andere grote spelers zoals OpenAI verscherpen de controles met striktere netwerkbeleidsregels en enterprise-grade bescherming.
Q&A: Wat Je Moet Oplossen Vóór Je Live Gaat
V: Wat is de snelste manier om blootgestelde secrets te controleren? A: Gebruik git-secrets/trufflehog om te zoeken naar API-sleutels vóór het deployen, of controleer ze in DevTools.
V: Hoe controleer je CORS snel? A: Zoek in DevTools naar Access-Control-Allow-Origin. Als je '*' vindt in combinatie met credentials, specificeer dan toegestane origins en zorg dat credentials veilig worden afgehandeld.
V: Wat is de snelle en eenvoudige manier om dependencies te scannen? A: Voer npm audit fix uit. Voor een volledige scan is er Socket.dev om in je CI/CD-pipeline te integreren.
V: Vuistregel voor AI-voorgestelde code? A: Vertrouw AI-gegenereerde code niet blindelings. Scan altijd op kwetsbaarheden. Valideer de code altijd, altijd, pin dependencies aan specifieke versies en vergrendel ze om wijzigingen te voorkomen.
