Security Checklist untuk Vibe Coding

Panduan ini berisi checklist keamanan yang wajib kamu ikutin supaya aplikasi yang kamu bikin dengan vibe coding aman dari serangan umum.

Banyak tools kayak Vercel, Netlify, dan Supabase udah handle beberapa security basics secara otomatis. Tapi tetap penting untuk paham dan implement security measures tambahan sesuai kebutuhan aplikasi kamu.

Frontend Security

1. HTTPS Everywhere

Pastikan website kamu pakai HTTPS, bukan HTTP.

Kabar baiknya: Platform modern (Vercel, Netlify, Lovable) udah otomatis pakai HTTPS. Kamu nggak perlu setup manual.

Kenapa penting: HTTPS mencegah eavesdropping dan man-in-the-middle attacks.

2. Input Validation & Sanitization

Selalu validasi dan sanitasi input dari user untuk mencegah XSS (Cross-Site Scripting) attacks.

// ❌ BAHAYA: Langsung pakai user input
element.innerHTML = userInput;

// ✅ AMAN: Sanitasi dulu sebelum pakai
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);

Prompt untuk minta bantuan AI:

Help me validate and sanitize inputs to protect against XSS attacks

3. Jangan Simpan Data Sensitif di Browser

JANGAN taruh secrets di tempat-tempat ini:

Tempat	Kenapa Bahaya
localStorage	Bisa diakses JavaScript manapun, termasuk malicious scripts
sessionStorage	Sama kayak localStorage
Client-side JavaScript	Source code bisa dilihat siapa aja (View Source)
Cookies tanpa security attributes	Bisa dicuri via XSS

Prompt untuk minta bantuan AI:

Help me keep sensitive data out of the browser. Am I doing this correctly?

4. CSRF Protection

Implement Cross-Site Request Forgery (CSRF) protection untuk forms:

// Contoh implementasi CSRF token
const csrfToken = generateToken();
session.csrfToken = csrfToken;

// Di form, include token sebagai hidden field
<input type="hidden" name="_csrf" value={csrfToken} />

Prompt untuk minta bantuan AI:

Help me implement CSRF tokens for forms

5. Jangan Expose API Keys di Frontend

API credentials harus selalu di server-side.

// ❌ BAHAYA: API key di frontend
const response = await fetch('https://api.openai.com/v1/chat', {
  headers: {
    'Authorization': 'Bearer sk-1234567890' // EXPOSED!
  }
});

// ✅ AMAN: Call backend kamu, backend yang pegang API key
const response = await fetch('/api/chat', {
  method: 'POST',
  body: JSON.stringify({ message: userMessage })
});

Backend Security

1. Authentication Fundamentals

Kalau implement authentication:

Pakai auth service kalau bisa (Clerk, Auth0, Supabase Auth, NextAuth)
Kalau bikin custom auth, pakai library yang established
JANGAN PERNAH simpan password dalam plain text

// ❌ BAHAYA: Plain text password
db.insert({ password: userPassword });

// ✅ AMAN: Hash password dengan bcrypt
import bcrypt from 'bcrypt';
const hashedPassword = await bcrypt.hash(userPassword, 10);
db.insert({ password: hashedPassword });

Prompt untuk minta bantuan AI:

Help me implement authentication for my application

2. Authorization Checks

Selalu verify permissions sebelum perform actions:

// Contoh authorization check
async function deletePost(postId, userId) {
  const post = await db.posts.findById(postId);
  
  // ❌ BAHAYA: Langsung delete tanpa check
  // await db.posts.delete(postId);
  
  // ✅ AMAN: Check dulu apakah user punya akses
  if (post.authorId !== userId) {
    throw new Error('Access denied');
  }
  
  await db.posts.delete(postId);
}

Prompt untuk minta bantuan AI:

Help me implement authorization checks for my application

3. API Endpoint Protection

Amankan API endpoints kamu:

Tambah authentication ke sensitive endpoints
Implement proper CORS settings
Consider rate limiting

// Contoh protected endpoint
app.get('/api/user/profile', authenticate, (req, res) => {
  // authenticate middleware check apakah user logged in
  res.json(req.user);
});

// CORS settings
app.use(cors({
  origin: 'https://yourdomain.com', // Jangan pakai '*' di production
  credentials: true
}));

Prompt untuk minta bantuan AI:

How do I properly authenticate endpoints in my app?

4. SQL Injection Prevention

Kalau pakai ORM (Prisma, Drizzle, Supabase), kamu udah relatively aman. Tapi kalau nulis raw query:

// ❌ BAHAYA: String concatenation dalam query
db.query(`SELECT * FROM users WHERE username = '${username}'`);

// Input malicious: "admin'; DROP TABLE users; --"
// Hasil: SELECT * FROM users WHERE username = 'admin'; DROP TABLE users; --'
// 💀 Goodbye database!

// ✅ AMAN: Parameterized queries
db.query('SELECT * FROM users WHERE username = ?', [username]);

5. Security Headers

Tambahkan security headers ke aplikasi kamu:

<!-- Di index.html atau via backend -->
<meta http-equiv="X-Frame-Options" content="DENY">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Cek security headers kamu di: securityheaders.com

Prompt untuk minta bantuan AI:

Can you add security headers to my application?

Practical Security Habits

1. Keep Dependencies Updated

Regularly check untuk outdated packages yang mungkin punya vulnerabilities:

# Check vulnerabilities
npm audit

# Fix automatically (kalau bisa)
npm audit fix

# Update semua packages
npm update

2. Proper Error Handling

Jangan expose sensitive information di error messages:

// ❌ BAHAYA: Expose database error details
catch (err) {
  res.status(500).send(`Database error: ${err.message}`);
  // User bisa lihat: "Database error: Connection to postgres://user:password@host..."
}

// ✅ AMAN: Generic error message
catch (err) {
  console.error(err); // Log internally untuk debugging
  res.status(500).send('An error occurred. Please try again.');
}

3. Secure Cookies

Kalau pakai cookies:

res.cookie('session', sessionId, {
  httpOnly: true,  // Prevent JavaScript access
  secure: true,    // Only send over HTTPS
  sameSite: 'lax', // Prevent CSRF
  maxAge: 24 * 60 * 60 * 1000 // 24 hours
});

Attribute	Fungsi
`httpOnly`	JavaScript nggak bisa akses cookie ini
`secure`	Cookie cuma dikirim via HTTPS
`sameSite`	Prevent CSRF attacks

4. File Upload Security

Kalau aplikasi kamu allow file uploads:

// Validasi yang harus dilakukan:

// 1. Restrict file types
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!allowedTypes.includes(file.mimetype)) {
  throw new Error('File type not allowed');
}

// 2. Restrict file size
const maxSize = 5 * 1024 * 1024; // 5MB
if (file.size > maxSize) {
  throw new Error('File too large');
}

// 3. Generate new filename (jangan pakai user-provided)
const newFilename = `${uuid()}.${extension}`;

// 4. Store di proper storage (Supabase Storage, S3, etc.)
await storage.upload(newFilename, file);

5. Rate Limiting

Implement rate limiting untuk API endpoints, especially authentication-related ones:

import rateLimit from 'express-rate-limit';

// General API rate limit
const apiLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 menit
  max: 100, // Max 100 requests per 15 menit per IP
  message: 'Too many requests, please try again later.'
});

// Stricter limit untuk auth endpoints
const authLimiter = rateLimit({
  windowMs: 60 * 60 * 1000, // 1 jam
  max: 5, // Max 5 login attempts per jam
  message: 'Too many login attempts, please try again later.'
});

app.use('/api/', apiLimiter);
app.use('/api/auth/', authLimiter);