Frontend Academy · Pelajaran

Pencegahan XSS: Pengodean Output CSP

Pahami XSS berbasis refleksi, tersimpan, dan DOM, escape output yang dikendalikan pengguna, hindari innerHTML dengan data tidak tepercaya, dan tambahkan header Content Security Policy.

Pencegahan XSS: Pengodean Output CSP adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu XSS?

Skrip Lintas Situs terjadi saat penyerang menyisipkan JavaScript yang dapat dijalankan ke halaman Anda. Browser menjalankannya dengan hak akses asal Anda — mencuri cookie, membajak sesi, mengubah tampilan halaman, dan mengarahkan pengguna ke perangkat lunak berbahaya.

Tiga Jenis XSS

Tersimpan: skrip berbahaya disimpan dalam basis data dan disajikan kepada setiap pengunjung. Terpantul: input dipantulkan kembali dalam respons (?q=<script>...). Berbasis DOM: JS sisi klien menulis data yang tidak tepercaya ke dalam DOM.

Akar Masalah: innerHTML dengan Data yang Tidak Tepercaya

Menggunakan innerHTML (atau v-html, dangerouslySetInnerHTML) dengan string yang dikendalikan pengguna adalah vektor XSS nomor satu.

// BAD: user input rendered as HTML
el.innerHTML = userComment;  // attacker submits <img onerror=alert(1)>

// Vue equivalent:
<div v-html="userComment"></div>  // same bug

// React equivalent:
<div dangerouslySetInnerHTML={{ __html: userComment }} />  // same bug

Pengodean Output (Bawaan yang Aman)

Perlakukan string yang tidak tepercaya sebagai teks, bukan HTML. React, Vue, Angular, dan Svelte semuanya melakukan hal ini secara bawaan dalam interpolasi {value}.

// SAFE: text content, not HTML
el.textContent = userComment;  // <script> shows as literal text

// React (auto-escaped):
<div>{userComment}</div>

// Vue (auto-escaped):
<div>{{ userComment }}</div>

Membersihkan Saat Anda Harus Merender HTML

Jika Anda benar-benar perlu merender HTML pengguna (editor teks kaya), bersihkan dengan DOMPurify — jangan pernah membuat pembersih regex sendiri.

import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(userHtml);
el.innerHTML = clean; // strips <script>, on* handlers, dangerous URLs

Validasi URL

URL yang dikendalikan pengguna dalam href atau src dapat memicu XSS melalui skema javascript:.

// BAD:
<a href={userUrl}>Click</a>
// attacker submits: javascript:alert(1)

// GOOD: whitelist protocols:
function safeUrl(url) {
  if (!/^https?:\/\//.test(url) && !url.startsWith('/')) return '#';
  return url;
}

Kebijakan Keamanan Konten (CSP)

CSP adalah header respons HTTP yang memberi tahu browser sumber skrip, gaya, gambar, dan sebagainya yang diizinkan. Bahkan jika penyerang menyisipkan skrip, browser menolak menjalankannya.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.trusted.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:

CSP Ketat dengan Nonce

Untuk skrip sebaris yang Anda kendalikan, gunakan nonce per permintaan. Skrip yang disisipkan penyerang tidak akan memiliki nonce yang cocok.

// Server generates a random nonce per request:
const nonce = crypto.randomBytes(16).toString('base64');
res.setHeader('Content-Security-Policy', `script-src 'nonce-${nonce}' 'strict-dynamic'`);

// Inject into the HTML:
<script nonce="abc123">/* trusted inline code */</script>

Cookie HttpOnly + Secure

Tetapkan cookie sesi dengan HttpOnly agar JavaScript tidak dapat membacanya — bahkan jika XSS terjadi, penyerang tidak dapat mengambil token sesi.

Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Strict

Integritas Subresource (SRI)

Saat memuat skrip pihak ketiga melalui CDN, gunakan SRI untuk memverifikasi bahwa kontennya sesuai dengan hash. CDN yang disusupi tidak dapat menyajikan skrip berbahaya tanpa membuat pemeriksaan hash gagal.

<script
  src="https://cdn.example.com/lib.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"
></script>

Tipe Tepercaya (Eksperimental)

Tipe Tepercaya adalah fitur peramban (berbasis Chromium) yang memaksa titik penerima berbahaya (innerHTML) untuk menerima objek Tipe Tepercaya—sehingga string sama sekali tidak dapat disisipkan.

Menguji XSS

Coba sisipkan <img src=x onerror=alert(1)> ke setiap masukan teks yang ditampilkan kembali. Jika Anda melihat peringatan, berarti terdapat celah XSS. Gunakan alat seperti OWASP ZAP untuk pemindaian otomatis.

Pemeriksaan Singkat

Mengapa {userInput} milik React aman secara bawaan, sedangkan dangerouslySetInnerHTML tidak?

Rangkuman: Pencegahan XSS

Gunakan perenderan teks secara bawaan (ekspresi {x} milik React dan {{ x }} milik Vue aman). Bersihkan dengan DOMPurify saat merender HTML. Izinkan hanya protokol URL. Header CSP (dengan nonce atau 'strict-dynamic') memblokir skrip yang disisipkan. Kuki HttpOnly mencegah pencurian oleh JS. Gunakan hash SRI untuk skrip CDN. Uji masukan dengan muatan klasik.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pencegahan XSS: Pengodean Output CSP” gratis?

Ya — teks lengkap “Pencegahan XSS: Pengodean Output CSP” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pencegahan XSS: Pengodean Output CSP”?

Pahami XSS berbasis refleksi, tersimpan, dan DOM, escape output yang dikendalikan pengguna, hindari innerHTML dengan data tidak tepercaya, dan tambahkan header Content Security Policy. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Pencegahan XSS: Pengodean Output CSP” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy