Check yourself before you wreck yourself with vibe coding
Tips to avoid becoming a vibe coding cautionary tale
The era of vibe coding has arrived. I've been seeing more and more social media posts about folks taking AI coding tools for a spin and creating all sorts of cool things with them. This is honestly great. I feel that technology almost always gets better when more people have the opportunity to express their creativity and solve problems with it. I totally support vibe coding.
Yet not all the vibes around vibe coding are good. As more vibe coding projects are going live, I'm starting to see more and more posts like this one:
If you can't see this image, it's an X-Twitter post that says:
I just hacked @lovable_dev top launched sites.
Wait, what?
In less time than it took me to finish my lunch (47 mins), I extracted from live production apps:
- Personal debt amounts
- Home addresses
- API keys (admin access)
- Spicy prompts
Screenshots in thread
Not as a hacker - as a curious dev with 15 lines of Python.
This isn't a breach story (I reported it), this is a wake-up call.
Be cautious which 'vibe coder' you trust with your personal data.
Posts like these are a great reminder that relying blindly on AI tools for, well, anything right now can be really risky. These tools are just as likely to hallucinate code as they are to hallucinate historical facts or medical treatments. No doubt these tools will improve over time, but there will likely never be a point where vibe coding is completely risk-free.
That being said, I don't think you people should stop vibe coding. I think with a bit more education and awareness, vibe coders can avoid many of the security fails we're seeing. If you want to be a successful vibe coder though, here are some things you need to think about before you launch your application and splash it all over your social media feeds.
Check your vibe code for secrets
When I say check your code for secrets, I'm not talking about the emoji slang or secret codes middle schoolers text each other. I'm talking about things like API keys or user names and passwords or encryption keys. Generally, when you see these things in code they look like massive blobs of numbers and characters. You don't want to see them in your code though because coding secrets directly into your application is VERY bad. Hard-coding a secret into your final code is like adding a KICK ME sign to your app.
People often get confused because copy-pasting secrets into an app is usually necessary to get it to work on your local machine when you're testing it. However, there's a big difference between code that lives on your machine and code that lives on the web. You can get away with using secrets directly on your machine because you're the only one who has access to it. When a lot more people can access your app, you need to take more precautions.
Check your vibe code for anything that resembles a secret. If you find something secret-like, do more research on how to use that secret safely in production code before you publish it. Including production in your searches or AI prompts should help you figure out the best security approach. Also, the documentation for your app hosting service usually has recommendations on storing secrets. For example, Heroku recommends setting them as config variables.
Doublecheck any vibe code connected to payments
Most drama involves money and relationships. So, if you want to minimize potential drama related to your app, you doublecheck any code in your project related to collecting payments. You definitely get what you pay for when it comes to code for handling payments. I strongly recommend using a third-party service like Stripe for managing anything related to money. Even if you're using a third-party service, take extra time to check that any configuration in your vibe code doesn't directly include your account number or user credentials. A reputable vendor will provide instructions on how to securely connect your app to their service.
Take an extra look at forms and uploads
One of the most common attack points in an app is any part of the app where a user can submit their own information. While most users are rules-following do-gooders who return shopping carts and park between the lines, you need to prepare for the ones who aren't. That means you need to make sure forms and upload fields only accept the information you want them to accept.
This is a practice called validation, and good validation makes sure that you don't have people submitting server-crashing text files or injecting code directly into your database when all you asked them for was their favorite pizza topping (my favorite is mushrooms btw 🍄). Most forms can be coded with restrictions on the number of characters or the type of data that can be submitted. Prompt your vibe coding AI tool to make sure those restrictions are included or do some extra research on good validation practices for the coding language or framework you're using.
Consider the overall data risks of your app
If you want to share your vibe-coded application with people who aren't your friends or family, you need to consider the risks of random people accessing data through your app on the Internet.
For example, say you vibe-coded a video game about steampunk birds defending their trees against zombie badgers. Before play testing it with a group of strangers, think about what data you're asking people to give you and what obligations you have to protect it. A free game where you collect just an email address is fairly low risk. Exposing a list of email addresses if you're hacked is still not great, but it doesn't come with the same level of risk as bank account numbers or health data.
If you do want to vibe-code an application that collects sensitive information, you should at the very least get it reviewed by an expert before you let strangers use it. Or you could invest in a really good lawyer for the inevitable legal trouble that comes from people (and governments) being mad at you about exposing sensitive data to the darker forces of the Internet. It's your choice, but the first option is almost always cheaper.
Choose technologies that have good security baked in
Since you're vibe coding, you might not necessarily care what framework or coding language you're using for your app. (If you don't even know what a framework is, this wiki article is calling your name.) I think you should care though because they are not all created equal when it comes to keeping data secure.
One of the reasons our content management system, Wagtail, is built on top of a Python framework called Django is that it is extra difficult to publish a Django app with bad security. Why? Because Django production code absolutely will not work unless certain security-minded criteria are met. This forces people to practice good security whether they like it or not.
When you start vibe coding your app, ask your AI assistant what framework or coding tools it's using to create your app. Then do some reading on those tools. Search Reddit to see if you can find some honest reviews from other coders that mention security practices or vulnerabilities. If you don't like what you see, generate your app with another framework or tool. You may have to try different combinations before you find the right the best option for you.
Iterate and have fun!
While there are a lot of ethical and environmental and security quandaries concerning AI-powered coding tools in general, one big upside is vibe coding empowers even more people to problem-solve with code. A very smart guy on the Internet named Morten Rand-Hendriksen says that vibe coding means "we're shifting from engineering-driven software development to service-driven software development." That's a very big shift, and I think it's a shift that will come with growing pains. But I ultimately think the headaches will be worth it.
So go forth vibe coders! Take these tips I have shared with you and build software that makes your world a better place even if it all it does is automatically categorize your vacation photos. I can't wait to see what problems you solve.
(PS: If you want to vibe code with Wagtail, I highly recommend giving our Starter Kit a go. I'll drop a link for you to get started with!)
The image for this post was generated with ChatGTP using the following prompt: Generate an illustration that shows the words VIBE and CODING crashing into each other. Use a color palette that incorporates the hex codes #262626, #2E1F5E, 007D7E, and B3E7E8.
