Your Progress 0%

⚠️ Critical: Don't Skip Security

AI tools are amazing at generating code fast, but they don't always generate SECURE code. Every app you build needs security review before going live. This checklist will help you catch 95% of common vulnerabilities.

20-Point Security Checklist

Run through this checklist before deploying ANY app. Check off each item as you verify it.

Common Vulnerabilities in Vibe-Coded Apps

AI tools often generate code with these security issues. Learn to spot them:

1. Exposed API Keys

The Problem: AI might put API keys directly in frontend code where anyone can see them.

❌ BAD - Never do this:
const apiKey = "sk_live_abc123xyz";
fetch(`https://api.example.com?key=${apiKey}`);
✅ GOOD - Use environment variables:
// .env.local
NEXT_PUBLIC_API_KEY=sk_live_abc123xyz

// Your code
const apiKey = process.env.NEXT_PUBLIC_API_KEY;

Better: Don't expose keys at all. Make API calls from server-side routes.

2. No Authentication

The Problem: AI might create features that should be protected without adding auth checks.

❌ BAD - Anyone can delete anything:
app.delete('/api/posts/:id', async (req, res) => {
await db.posts.delete({ id: req.params.id });
});
✅ GOOD - Check user owns the post:
app.delete('/api/posts/:id', requireAuth, async (req, res) => {
const post = await db.posts.findOne({ id: req.params.id });
if (post.authorId !== req.user.id) return res.status(403).send();
await db.posts.delete({ id: req.params.id });
});

3. SQL Injection

The Problem: Concatenating user input into SQL queries allows attackers to execute malicious code.

❌ BAD - User can inject SQL:
const query = `SELECT * FROM users WHERE username = '${username}'`;
✅ GOOD - Use parameterized queries:
const query = 'SELECT * FROM users WHERE username = ?';
db.query(query, [username]);

4. XSS (Cross-Site Scripting)

The Problem: Displaying user input without sanitization lets attackers inject malicious scripts.

❌ BAD - Dangerous in vanilla JS:
element.innerHTML = userComment;
✅ GOOD - React auto-escapes:
<div>{userComment}</div>

// Or sanitize with a library:
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userComment);

Free Security Testing Tools

Use these tools to scan your apps for vulnerabilities:

npm audit

FREE - Built into npm

Scans your dependencies for known vulnerabilities. Run `npm audit` in your project directory.

OWASP ZAP

FREE - Open source

Web application security scanner. Finds XSS, SQL injection, and other common issues.

Snyk

FREE for open source

Continuous security scanning for dependencies. Integrates with GitHub.

SSL Labs

FREE - Web-based

Test your HTTPS configuration. Go to ssllabs.com/ssltest and enter your domain.

Security Headers

FREE - Web-based

Check your security headers (CSP, HSTS, etc.). Visit securityheaders.com

Burp Suite Community

FREE - Desktop app

Intercept and analyze HTTP traffic. Great for testing APIs.

The 5-Minute Security Audit

Do this before every deployment:

  1. Check .env in .gitignore

    Run: `git status`. Make sure .env files are not staged. If they are, add to .gitignore immediately.

  2. Search for Hardcoded Secrets

    Search your codebase for: "api_key", "password", "secret", "token". Any matches should use environment variables.

  3. Test Unauthenticated Access

    Open an incognito window. Try to access protected pages/APIs. You should be redirected or get 401/403 errors.

  4. Run npm audit

    In terminal: `npm audit`. Fix any HIGH or CRITICAL vulnerabilities with `npm audit fix`.

  5. Test HTTPS Redirect

    Visit your site with http:// (not https://). You should be automatically redirected to HTTPS.

🎯 Make It a Habit

Copy this audit into your deployment checklist. Better yet, automate it with a pre-deploy script. Security isn't a one-time thing — it's a practice.