🛡️ SupaShield

Platform Edukasi & Penetration Testing Keamanan Database Supabase
Uji kekuatan Row Level Security (RLS) Anda sebelum penyerang yang melakukannya.

---

📖 Tentang

SupaShield adalah platform berbasis web yang membantu developer menguji dan memahami kerentanan keamanan pada database Supabase. Dengan antarmuka bergaya Neon Brutalist (cyber-terminal), pengguna dapat melakukan simulasi serangan langsung terhadap API PostgREST untuk memverifikasi apakah kebijakan Row Level Security (RLS) mereka bekerja dengan benar.

⚠️ Disclaimer: SupaShield dibuat untuk tujuan edukasi dan pengujian keamanan pada lingkungan development/staging milik sendiri. Jangan gunakan alat ini pada sistem yang bukan milik Anda.

---

✨ Fitur Utama

🔫 Konsol Penetrasi Langsung

• Injeksi URL langsung — Paste satu URL penuh Supabase REST API beserta semua query filter
• Semua metode HTTP — GET, POST, PUT, PATCH, DELETE
• Payload Builder ganda — Mode Key-Value atau Raw JSON Editor dengan validasi realtime, prettify, dan minify
• CORS Bypass — Request diproxy melalui backend Next.js server-side, melewati pembatasan browser
• Analisis Forensik otomatis — Verdict keamanan instan (Rentan / Aman / Benteng Aktif)

📚 Modul Edukasi

• Anatomi serangan pada database Supabase
• Panduan kerentanan umum: RLS tidak aktif, IDOR, SECURITY DEFINER, eskalasi privilege
• Seluruh konten dalam Bahasa Indonesia

🧪 Template Injeksi Siap Pakai

6 skenario kerentanan umum berdasarkan riset keamanan PostgREST:

Template	Metode	Severity
Dump Seluruh Tabel Users	GET	🔴 Tinggi
Eskalasi Privilege (is_admin)	PATCH	🔴 Kritis
Baca Data Pengguna Lain (IDOR)	GET	🔴 Tinggi
Panggil RPC Tanpa Auth	POST	🔴 Kritis
Hapus Baris Anonim	DELETE	🔴 Kritis
Sisipkan Data Palsu	POST	🟡 Sedang

---

🛠️ Teknologi

Layer	Teknologi
Framework	Next.js 16 (App Router, TypeScript)
Styling	Tailwind CSS v4 (@theme syntax)
Database	Supabase (Postgres + RLS)
Font	Space Grotesk, JetBrains Mono
Desain	Neon Brutalist (0px radius, cyber-terminal aesthetic)

---

🚀 Persiapan & Instalasi

Prasyarat

• Node.js ≥ 18.x
• npm atau pnpm
• Akun Supabase (untuk testing)

1. Clone Repository

git clone https://github.com/ddettaa/SupaShield.git
cd SupaShield

2. Pasang Dependensi

npm install

3. Konfigurasi Environment

Buat file .env.local di root proyek:

# URL proyek Supabase Anda (untuk fitur internal, opsional)
NEXT_PUBLIC_SUPABASE_URL=https://YOUR-PROJECT.supabase.co

# Anon Key proyek Supabase Anda (untuk fitur internal, opsional) 
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOi...

Catatan: Variabel .env.local di atas hanya diperlukan jika Anda ingin mengintegrasikan fitur internal SupaShield (seperti menyimpan log scan). Untuk menggunakan konsol penetrasi, Anda memasukkan URL & Key target langsung di halaman Tool.

4. Setup Database (Opsional)

Jalankan migrasi SQL di dashboard Supabase Anda:

# File: supabase/migrations/00000000000000_initial_schema.sql
# Salin dan jalankan isi file ini di Supabase SQL Editor

5. Jalankan Development Server

npm run dev

Buka http://localhost:3000 di browser.

---

📁 Struktur Proyek

SupaShield/
├── app/
│   ├── api/
│   │   └── scan/
│   │       └── route.ts          # Backend proxy (bypass CORS)
│   ├── education/
│   │   └── page.tsx              # Halaman edukasi keamanan
│   ├── security-guide/
│   │   └── page.tsx              # Panduan protokol keamanan
│   ├── tool/
│   │   └── page.tsx              # Konsol penetrasi utama
│   ├── globals.css               # Design tokens & custom utilities
│   ├── layout.tsx                # Root layout (fonts, navbar, footer)
│   └── page.tsx                  # Landing page
├── components/
│   ├── Navbar.tsx                # Navigasi global (desktop + mobile)
│   └── Footer.tsx                # Footer
├── supabase/
│   └── migrations/
│       └── 00000000000000_initial_schema.sql  # Skema database + RLS 
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── .env.local                    # Variabel environment (tidak di-commit)

---

🔒 Arsitektur Keamanan Database

Skema database SupaShield mengimplementasikan RLS (Row Level Security) ketat pada 3 tabel:

┌──────────────┐    ┌──────────────┐    ┌──────────────┐
│   profiles   │    │ leaderboards │    │  scan_logs   │
├──────────────┤    ├──────────────┤    ├──────────────┤
│ RLS: ON      │    │ RLS: ON      │    │ RLS: ON      │
│ SELECT: All  │    │ SELECT: All  │    │ SELECT: Own  │
│ INSERT: Own  │    │ INSERT: Own  │    │ INSERT: Own  │
│ UPDATE: Own  │    │ UPDATE: Own  │    │ UPDATE: None │
│ DELETE: None │    │ DELETE: None │    │ DELETE: None │
└──────────────┘    └──────────────┘    └──────────────┘

• profiles — Data profil publik, hanya bisa diubah oleh pemilik
• leaderboards — Skor publik dengan constraint max 100.000
• scan_logs — Log hasil scan bersifat privat dan immutable (tidak bisa diubah/dihapus)

---

🎨 Sistem Desain

SupaShield menggunakan estetika Neon Brutalist yang terinspirasi dari antarmuka terminal retro:

• Warna: Hijau neon (#00ff41), cyan (#00d2fd), merah (#ff7351) di atas latar hitam pekat
• Tipografi: Space Grotesk (heading) + JetBrains Mono (code/terminal)
• Border Radius: 0px di semua elemen (brutalist)
• Efek: Scanline overlay, glitch text hover, animasi pulse/bounce

---

🗺️ Roadmap

• Landing page & navigasi responsif
• Modul edukasi keamanan
• Konsol penetrasi dengan proxy bypass CORS
• Template injeksi cepat (6 skenario)
• Raw JSON payload editor
• Integrasi payment gateway (Midtrans/Xendit)
• Edge Functions testing
• Export laporan scan ke PDF
• Autentikasi pengguna & riwayat scan
• Leaderboard komunitas

---

📄 Lisensi

Proyek ini dibuat untuk tujuan edukasi. Gunakan secara bertanggung jawab.

---

Dibangun dengan ☕ dan kecintaan terhadap keamanan siber
_{SupaShield — Karena keamanan database bukan opsional.}