// PHASE 1 · HTML, CSS & JavaScript Basics

HTML, CSS & JavaScript Basics

Kenapa HTML/CSS/JS Penting untuk Bug Hunter?

Bug hunter yang memahami frontend bisa menemukan bug yang tidak terdeteksi scanner otomatis. XSS, client-side injection, dan DOM-based vulnerability hanya bisa ditemukan jika kamu mengerti cara kerja browser.

HTML — Struktur Halaman

HTML membentuk struktur halaman web. Yang perlu diperhatikan bug hunter:

<!-- Form — sering jadi entry point bug -->
<form action="/login" method="POST">
  <input type="text" name="username">
  <input type="hidden" name="csrf_token" value="abc123">
</form>

<!-- Hidden input — sering menyimpan data sensitif -->
<input type="hidden" name="price" value="99000">

Hidden input fields adalah target klasik. Nilai di dalamnya bisa diubah oleh user — jika server tidak memvalidasi ulang, ini bisa menghasilkan price manipulation atau privilege escalation.

JavaScript — Client-Side Logic

JavaScript menjalankan logika di browser. Bug hunter perlu memahami JS untuk:

Menemukan endpoint API yang tersembunyi
Menemukan API key atau secret yang ter-hardcode
Memahami alur autentikasi client-side
Menemukan DOM XSS

// Contoh JS yang mengandung info sensitif
const API_KEY = "sk-prod-abc123secret"; // ← Bug!
const baseUrl = "/api/v2/internal"; // ← Endpoint tersembunyi

// DOM XSS vulnerable code
document.getElementById('output').innerHTML = location.hash; // ← DOM XSS!

DOM — Document Object Model

DOM adalah representasi HTML sebagai objek yang bisa dimanipulasi JavaScript. Memahami DOM penting untuk menemukan DOM-based XSS.

Sumber Data Berbahaya (Sources)

location.hash — bagian URL setelah #
location.search — query string (?param=value)
document.referrer — URL halaman sebelumnya
localStorage / sessionStorage — data tersimpan di browser

Sink Berbahaya (Tempat data dieksekusi)

innerHTML — render HTML langsung
document.write() — tulis ke dokumen
eval() — eksekusi string sebagai JS
setTimeout(string) — eksekusi string sebagai JS

Developer Tools — Teman Terbaik Bug Hunter

Tab DevTools	Fungsi untuk Bug Hunter
Network	Lihat semua HTTP request/response
Console	Eksekusi JS, lihat error
Elements/Inspector	Lihat & edit HTML/CSS live
Sources	Baca semua file JS
Application	Lihat cookies, localStorage, session

// CEK PEMAHAMAN

Kode JavaScript mana yang rentan terhadap DOM XSS?

Adocument.getElementById("x").textContent = location.hash

Bdocument.getElementById("x").innerHTML = location.hash

Cconsole.log(location.hash)

DJSON.parse(location.hash)

HTTP/HTTPS Protocol Networking Basics