Membangun Security Layer di Frontend Modern (CSP, Sanitizer API, dan Trusted Types)

Dalam dunia pengembangan web modern, ancaman terhadap keamanan aplikasi semakin meningkat, terutama serangan XSS (Cross-Site Scripting) dan injeksi kode berbahaya. Untuk menghadapinya, developer perlu menerapkan lapisan pertahanan berlapis (security layer) yang dirancang khusus untuk sisi klien. Di sinilah konsep keamanan JavaScript frontend menjadi penting — bukan hanya sekadar validasi input, tetapi juga pembatasan dan kontrol terhadap sumber konten dan eksekusi skrip. Browser modern kini menyediakan sejumlah mekanisme keamanan tingkat lanjut seperti Content Security Policy (CSP), Sanitizer API, dan Trusted Types. Ketiganya dirancang untuk bekerja sama mencegah injeksi skrip, melindungi DOM, serta memastikan hanya konten aman yang dapat dijalankan. Mari kita bahas bagaimana cara menerapkannya dengan efektif dalam proyek JavaScript modern.

Content Security Policy (CSP)

Content Security Policy (CSP) adalah header HTTP yang digunakan untuk mengontrol sumber daya apa saja yang diizinkan dimuat oleh browser. Dengan CSP, kamu bisa mencegah eksekusi skrip dari sumber yang tidak terpercaya, salah satu penyebab utama XSS.

Contoh Konfigurasi CSP di Header:

Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.google.com; object-src 'none'; base-uri 'self';

Penjelasan:

• 'self' → hanya mengizinkan skrip dari domain yang sama.

• script-src → menentukan sumber skrip yang diizinkan.

• object-src 'none' → menonaktifkan objek berisiko seperti Flash.

• base-uri 'self' → mencegah serangan berbasis URL injection.

Jika kamu menggunakan framework seperti Express.js, bisa menambahkan header CSP seperti ini:

app.use((req, res, next) => {
  res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'self'");
  next();
});

Sanitizer API: Membersihkan Input DOM

Sanitizer API adalah fitur modern yang disediakan browser (khususnya Chrome dan Edge) untuk menyaring konten HTML sebelum ditambahkan ke DOM.
Tujuannya adalah untuk mencegah penyisipan elemen berbahaya seperti <script> atau atribut onerror.

Contoh Penggunaan:

const sanitizer = new Sanitizer();
const safeContent = sanitizer.sanitize("<b>Halo</b> <script>alert('XSS')</script>");
document.body.appendChild(safeContent);

Hasilnya:

• <b>Halo</b> akan tetap muncul.

• Tag <script> akan dihapus secara otomatis.

Jika browser belum mendukung Sanitizer API, gunakan library fallback seperti DOMPurify:

const clean = DOMPurify.sanitize(userInput);
element.innerHTML = clean;

Trusted Types: Pencegahan XSS di Level Browser

Trusted Types adalah fitur keamanan yang bekerja sama dengan CSP untuk mencegah DOM XSS dengan cara hanya mengizinkan skrip tertentu yang sudah melalui validasi.

Langkah-langkah implementasi Trusted Types:

Aktifkan di CSP Header

Content-Security-Policy: trusted-types default; require-trusted-types-for 'script';

Gunakan API Trusted Types di JavaScript

const policy = trustedTypes.createPolicy('default', {
  createHTML: (input) => input.replace(/<script.*?>.*?<\/script>/g, '')
});

const safeHTML = policy.createHTML("<b>Hai</b> <script>alert('XSS')</script>");
document.body.innerHTML = safeHTML;

Dengan pendekatan ini, browser hanya akan menerima konten HTML yang berasal dari kebijakan (policy) yang terdaftar.

Integrasi Ketiga Lapisan Keamanan

Gabungan CSP + Sanitizer API + Trusted Types menciptakan defense-in-depth di frontend.
Berikut contoh implementasi berlapis:

const sanitizer = new Sanitizer();
const policy = trustedTypes.createPolicy('secure', {
  createHTML: (input) => sanitizer.sanitize(input)
});

const safeHTML = policy.createHTML(userInput);
document.getElementById("output").innerHTML = safeHTML;

Skrip di atas:

• Menyaring konten dengan Sanitizer API

• Mengamankan eksekusi dengan Trusted Types

• Diperkuat dengan CSP di level server

Hasilnya: nyaris tidak ada celah XSS yang bisa dieksploitasi bahkan jika input berisi tag atau event handler berbahaya.

Monitoring & Audit Keamanan Frontend

Setelah penerapan security layer, lakukan audit rutin:

• Gunakan Security Headers Analyzer (securityheaders.com) untuk memastikan CSP aktif.

• Jalankan Lighthouse di Chrome DevTools untuk audit keamanan.

• Gunakan Sentry atau OWASP ZAP untuk memantau potensi eksploitasi runtime.

Kesimpulan

Keamanan JavaScript frontend bukan lagi sekadar sanitasi input, tetapi kombinasi dari tiga lapisan utama — CSP, Sanitizer API, dan Trusted Types. Ketiganya membentuk security shield yang mencegah injeksi skrip dan menjaga integritas DOM dari manipulasi berbahaya.

Dengan memahami dan menerapkan teknologi ini, developer bisa membangun aplikasi web yang tidak hanya interaktif dan cepat, tapi juga aman secara menyeluruh.