DEV Community: Irvan Gerhana Septiyana

Vibe Coding with AI? Don't Forget These Security Fundamentals

Irvan Gerhana Septiyana — Tue, 22 Apr 2025 00:47:36 +0000

🧠 Vibe Coding with AI? Don't Forget These Frontend Security Fundamentals

AI is changing how we write frontend code.

We autocomplete faster, generate entire UI components, even build APIs with a prompt.

But while you're shipping faster, are you securing smarter?

Here’s a Frontend Security Cheatsheet designed for modern devs coding with AI assistants (Copilot, GPT, etc).

🔐 JWT (JSON Web Token) Security Tips

Your Copilot might scaffold token handling fast, but make sure you:

Never store JWTs in localStorage
Prefer HttpOnly, Secure cookies
Always verify token on backend
Rotate access tokens + secrets periodically
Set short-lived access tokens with refresh strategies

⚠️ Many AI suggestions use insecure defaults. Double-check token logic.

🧼 Preventing XSS (Cross-Site Scripting)

LLMs love dangerouslySetInnerHTML, but you shouldn’t.

Always sanitize user input (DOMPurify)
Escape dynamic content in your components
Use strong CSP headers
Never blindly trust what comes from GPT-generated data injection

🧨 Prevent SQLi via your UI

It’s a backend issue — but your frontend may accidentally leak patterns.

Sanitize form data before send
Validate with zod/yup before fetch
Never expose raw queries or GraphQL playgrounds to public users
Use enums and schemas, not raw strings

🧷 CSRF Prevention Essentials

If your Copilot-built backend uses cookie-based auth:

Always use SameSite=Strict or Lax
Prefer token-based auth via Authorization headers
Use CSRF tokens for sensitive forms
Don’t trust origin headers unless validated

🛡️ Secure API Design with AI Tools

Validate data on both ends
Use role-based access control (RBAC)
Rate-limit endpoints — especially AI-enhanced features
Use HTTPS + proper CORS configuration
Never expose admin tools via public routes

🧠 AI scaffolds APIs quickly — but securing them takes conscious review.

✨ Bonus: Vibe Coding ≠ Secure Coding

Your GPT might build the login system —

But it’s your job to think like an attacker.

🎁 Want to go deeper?

I’ve built a complete eBook + Snippet Repo for AI-enhanced coding teams.

It’s packed with examples, cheatsheets, and modern security best practices — for both frontend & backend.

👉 https://uigerhana.gumroad.com/l/vibe-coding-security

Perfect for:

Web devs coding with Copilot / GPT
Teams using AI tools to scaffold their apps
Frontend engineers who care about real-world security

Let’s build cool stuff — and keep it safe.

Let me know what security holes you've seen from AI-generated code 👇

The Hidden Risks of Coding with AI Agents (and How to Avoid Them)

Irvan Gerhana Septiyana — Wed, 16 Apr 2025 16:37:36 +0000

AI can speed up your workflow. But hidden beneath that convenience are risks you can’t afford to ignore.

In the rush to adopt AI-powered coding agents like ChatGPT, Claude, Cursor, and GitHub Copilot, many developers forget a basic truth: code is not just about what works—it’s about what’s safe, secure, and maintainable.

This article explores the hidden risks of AI-assisted development, based on real-world experience, and offers clear, actionable strategies to avoid those pitfalls.

Risk #1: Code That Looks Right But Fails Silently

AI often generates syntactically correct code that compiles and runs—but behaves incorrectly under specific conditions.

Real Case: Silent Data Corruption in an AI-Suggested Function

// AI-generated
function updateInventory(itemId, quantity) {
  db.items.find({ id: itemId }).quantity += quantity;
}

Looks fine, right? But it's not updating the database—find() returns a copy, not a reference. This can silently corrupt logic across production.

Fix:

await db.items.updateOne({ id: itemId }, { $inc: { quantity } });

Avoid it: Always verify the data model and database methods used. AI doesn’t know your schema.

Risk #2: Security Loopholes from Missing Context

AI often omits critical context like authentication, authorization, and sanitization—especially for dynamic routes or forms.

Real Case: No Authorization Check in Admin Route

app.get('/admin/export', async (req, res) => {
  const data = await getSensitiveData();
  res.send(data);
});

No middleware. No access control. This route might be exposed in production.

Fix:

app.get('/admin/export', isAuthenticated, isAdmin, async (req, res) => {
  const data = await getSensitiveData();
  res.send(data);
});

Avoid it: Add security prompts, then review every route manually for access control.

Risk #3: Dependency Injection with Untrusted Inputs

AI might unknowingly suggest logic that injects user-controlled variables into unsafe contexts.

Real Case: Template Injection via Unescaped Variables

res.send(`<div>Hello ${req.query.name}</div>`);

If nameis <script>alert(1)</script>, you've got XSS.

Fix:

const escape = require('escape-html');
res.send(`<div>Hello ${escape(req.query.name)}</div>`);

Avoid it: Never trust output that uses user input—always escape or sanitize.

How to Use AI Without Falling into These Traps

Prompt defensively: Include terms like "secure", "safe", "type-checked", and "idiomatic" in your prompt.
Audit everything: Assume nothing is production-ready. Review for correctness, safety, and context.
Pair with static analysis: Use tools like ESLint, SonarQube, or SAST to catch structural flaws.
Write tests (with AI): Ask AI to generate edge case tests, then extend them yourself.
Use AI as a second brain—not a second engineer.

Final Take
AI agents are brilliant at surfacing ideas and saving time. But when it comes to secure, maintainable code—you’re still the expert in the room.

Trust your judgment, not the autocomplete.

Let’s Talk: What’s the worst AI-generated bug you’ve seen? What’s your system for catching subtle mistakes before they go live?

How I Use AI Agents Without Compromising Code Quality & Security

Irvan Gerhana Septiyana — Mon, 14 Apr 2025 04:49:36 +0000

I'm not anti-AI. But I don't trust AI-generated code blindly either.

In the past year, I’ve integrated multiple AI coding assistants into my workflow—tools like Cursor, Claude, and GitHub Copilot. They’ve helped me work faster, think clearer, and explore more creative solutions. But one thing has never changed: I’m responsible for the code I ship.

So this article isn’t about how cool AI is (though it is). It’s about how I use AI responsibly—without compromising on quality or security.

Why You Shouldn’t Trust AI Code Blindly

AI code often looks right—but that doesn’t mean it is right. Here’s why I treat AI suggestions like I’m mentoring a junior dev:

Surface-level correctness: AI might give you working code, but with poor performance, edge case issues, or security holes.
Contextual gaps: AI doesn't always understand the broader architecture or business logic of your app.
Security ignorance: Most AI doesn’t sanitize inputs, escape dangerous characters, or follow security best practices unless prompted very explicitly.

My AI Coding Workflow (With Safety Layers)

I break down my workflow into these steps:

1. Prompting Like an Engineer
"Build a secure login form using Express + TypeScript. Use input validation and avoid SQL injection vulnerabilities."

2. Review Every Line
Never trust a copy-paste. I manually review and revise code from AI, focusing on:

Error handling
Type safety
Dependency usage
Potential edge cases

3. Run Static Analysis & Linting
I treat every AI output like PR code:

ESLint / Prettier for style
TypeScript strict mode
SonarQube or similar tools for security/code smell audits

4. Test Everything
I often ask the AI to help me generate tests too:
"Write unit tests for this function using Jest."
Then I run them and look for edge cases it might’ve missed.

5. Stay in the Loop on Vulnerabilities

npm audit, yarn audit, or pnpm audit
Watch out for AI-suggested libraries with low downloads or suspicious reputations
Use tools like Snyk or Dependabot for ongoing dependency scanning

Secure Coding Principles I Stick To (Even with AI)

No hardcoded secrets – Use .env or secret managers
Never eval() anything blindly – Especially AI-suggested dynamic code
Validate user inputs – Always, even in internal tools
Use parameterized queries – Avoid string concatenation in DB queries
Isolate unsafe code – Sanbox where possible (e.g., with iframes or workers)

What AI Still Gets Wrong (and You Need to Catch)

Suggesting outdated or vulnerable libraries
Repeating logic that bloats your codebase
Skipping null-checks and runtime validation
Missing authorization checks in protected routes

Final Thoughts

AI can be an incredible ally—but only if you’re still the engineer in charge. If you care about your users, your app’s stability, and your own sanity, treat AI like a junior assistant—not an autopilot.

The future of development isn’t AI replacing you. It’s you learning how to lead AI in writing better, safer, and smarter code.

Let’s Discuss: How do you make sure your AI-assisted code is safe and production-ready? What tools or habits do you swear by?

Memahami Fundamental TypeScript: Panduan Lengkap untuk Pemula

Irvan Gerhana Septiyana — Thu, 27 Mar 2025 11:57:17 +0000

Pendahuluan

TypeScript adalah superset dari JavaScript yang menambahkan dukungan tipe statis. Dengan TypeScript, kita bisa menulis kode yang lebih aman, mudah di-maintain, dan lebih mudah didokumentasikan. Artikel ini membahas dasar-dasar TypeScript secara lengkap, mulai dari instalasi hingga konsep lanjutan seperti Generics dan Error Handling.

Mengapa Menggunakan TypeScript?

Deteksi Error di Waktu Kompilasi: Mengurangi bug saat runtime
Meningkatkan Produktivitas: Dukungan autocompletion dan dokumentasi di editor (seperti VSCode).
Skalabilitas: Cocok untuk proyek besar karena memiliki fitur modular dan type-checking.

Studi Kasus: Kapan Sebaiknya Menggunakan TypeScript?

Saat membangun aplikasi berskala besar.
Ketika bekerja dalam tim besar untuk meminimalisasi kesalahan.
Untuk meningkatkan performa debugging dan prediktabilitas kode.

Memulai dengan TypeScript

Global Installasi TypeScript

install -g typescript

Inisialisasi Proyek TypeScript

tsc --init

Menjalankan Kode TypeScript

tsc index.ts && node index.js

Tipe Data Dasar (Primitive Types)

String, Number, Boolean

let nama: string = "Irvan";
let usia: number = 27;
let aktif: boolean = true;

Array & Tuple

let angka: number[] = [1, 2, 3];
let biodata: [string, number] = ["Irvan", 27];

Any, Unknown, Never

let random: any = "Bebas";
let value: unknown = 42;
function throwError(): never {
  throw new Error("Terjadi Kesalahan");
}

Tipe Kompleks (Object, Enum, Union)

Object

type User = {
  id: number;
  name: string;
};

let user: User = { id: 1, name: "Irvan" };

Enum

enum Role {
  Admin,
  User,
  Guest,
}

let role: Role = Role.Admin;

Union & Intersection

let id: string | number = "123";

interface Person {
  name: string;
}

interface Employee {
  id: number;
}

type Staff = Person & Employee;

Function di TypeScript

Mendefinisikan Tipe Parameter dan Return

function tambah(a: number, b: number): number {
  return a + b;
}

Optional & Default Parameters

function sapa(nama: string, umur?: number) {
  console.log(`Halo ${nama}`);
}

function greeting(name: string = "User") {
  console.log(`Welcome, ${name}`);
}

Interface vs Type Alias

Interface

interface Person {
  nama: string;
  umur: number;
}

Type Alias

type ID = string | number;

type User = {
  id: ID;
  name: string;
};

Perbedaan Utama:

interface cocok untuk object yang besar dan dapat di-extend.
type lebih fleksibel dan cocok untuk union atau intersection types.

Class dan Inheritance di TypeScript

Class Dasar

class User {
  constructor(public name: string, private age: number) {}

  getAge(): number {
    return this.age;
  }
}

Inheritance (Pewarisan)

class Admin extends User {
  constructor(name: string, age: number, public role: string) {
    super(name, age);
  }
}

Generics (Tipe Dinamis dan Fleksibel)

Generics memungkinkan kita membuat fungsi atau class yang dapat bekerja dengan berbagai tipe data tanpa kehilangan keamanan tipe.

Generics adalah seperti wadah fleksibel yang bisa menyimpan berbagai jenis barang, seperti kotak yang bisa diisi mainan atau buku.

Contoh Penggunaan Generics

function wrap<T>(value: T): T[] {
  return [value];
}

const angka = wrap<number>(5);
const kata = wrap<string>("Hello");

Error Handling di TypeScript

TypeScript memungkinkan penanganan error dengan menggunakan try-catch dan tipe khusus.

try {
  throw new Error("Terjadi Kesalahan");
} catch (error) {
  console.error((error as Error).message);
}

Kesimpulan

TypeScript membantu membangun aplikasi yang lebih aman dan terstruktur.
Pahami dasar seperti tipe data, fungsi, class, dan generics.
Selalu gunakan strict mode di tsconfig.json untuk validasi lebih ketat.

Rekomendasi Selanjutnya:

Pelajari lebih lanjut tentang Mapped Types dan Utility Types.
Optimalkan proyek Anda dengan praktik terbaik TypeScript.

Sumber Tambahan: