Trusted Types: Cara Developer Indonesia Mencegah XSS DOM di Era CSP Strict

TL;DR: Trusted Types adalah API browser yang memaksa semua sink berbahaya seperti innerHTML dan eval hanya menerima objek yang sudah divalidasi via policy. Untuk website bisnis Indonesia yang banyak memakai script pihak ketiga, rollout Trusted Types report-only selama 4-6 minggu memberi peta lengkap pelanggaran sebelum enforcement, sehingga risiko breaking dapat ditekan di bawah 5 persen.

Saat membantu audit keamanan website fintech klien tahun lalu, satu line code lawas yang memakai innerHTML untuk inject komentar pengguna ternyata jadi pintu DOM-based XSS yang lolos dua audit sebelumnya. Masalahnya, sanitasi dilakukan di server tapi dilewati saat ada edge case karakter Unicode tertentu. Trusted Types akan menutup celah seperti ini secara otomatis.

Berdasarkan praktik yang Vito Atmo terapkan di beberapa proyek website bisnis dengan Next.js, Trusted Types layak masuk roadmap keamanan 2026 untuk siapapun yang menjalankan website transaksi atau menyimpan data pribadi pengguna.

Apa itu Trusted Types?

Trusted Types adalah standar web yang dipasang via header Content Security Policy untuk memaksa setiap string yang masuk ke sink berbahaya melewati policy yang Anda definisikan. Sink berbahaya adalah API yang bisa mengeksekusi kode jika diisi string mentah, antara lain innerHTML, outerHTML, eval, setTimeout(string), document.write, dan setAttribute('src', ...) untuk script tag.

Tanpa Trusted Types, satu bug atau script pihak ketiga yang ceroboh sudah cukup untuk DOM XSS. Dengan Trusted Types, browser menolak operasi tersebut dan melempar error yang langsung kelihatan di console.

Kenapa Indonesia Perlu Lebih Cepat Adopt?

Tiga alasan kontekstual. Pertama, banyak website bisnis Indonesia memakai banyak script pihak ketiga seperti Tawk.to, Qiscus, GTM, pixel ads dan tidak semuanya audit-friendly. Kedua, UU Pelindungan Data Pribadi yang efektif Oktober 2024 menempatkan beban tanggung jawab teknis pada pengelola data. Ketiga, audit keamanan untuk PSE kategori 1 makin ketat per 2026.

Trusted Types memberi defense in depth yang dapat ditunjukkan ke auditor sebagai kontrol teknis yang terdokumentasi.

Roadmap Rollout 6 Minggu

Pendekatan report-only ini krusial. Langsung enforcement tanpa report-only periode hampir pasti memecah experience pengguna karena script pihak ketiga jarang patuh.

Contoh Policy untuk Next.js

Untuk aplikasi Next.js modern, kebanyakan kode aman by default karena React tidak menulis ke innerHTML kecuali dipaksa via dangerouslySetInnerHTML. Berikut contoh policy default:

// app/lib/trusted-types-policy.ts
if (typeof window !== 'undefined' && window.trustedTypes?.createPolicy) {
  window.trustedTypes.createPolicy('default', {
    createHTML: (input) => {
      // Sanitasi pakai DOMPurify
      return DOMPurify.sanitize(input);
    },
    createScriptURL: (input) => {
      const url = new URL(input, window.location.origin);
      const allowed = ['ccypzcbkmfzxwbmdqkdb.supabase.co', 'vitoatmo.com'];
      if (!allowed.includes(url.hostname)) throw new Error('URL not allowed');
      return input;
    },
  });
}

Policy default adalah fallback. Untuk fitur spesifik seperti rich text editor, buat policy bernama tersendiri agar audit lebih spesifik. Dokumentasi lengkap dapat dipelajari di W3C Trusted Types Specification.

Studi Kasus: Migrasi Website Atmo LMS

Saat memigrasikan Atmo LMS ke Trusted Types, fase audit menemukan 14 sink violations dari kode sendiri (mostly komentar diskusi siswa) dan 8 dari plugin video player pihak ketiga. Kode sendiri direfactor pakai dangerouslySetInnerHTML yang sudah otomatis kompatibel via React adapter. Plugin video player diganti dengan alternatif yang sudah Trusted Types compliant.

Total durasi: 5 minggu dari audit sampai enforcement. Error rate post-enforcement di bawah 0,3 persen, semuanya dari plugin marketing yang sudah dijadwalkan migrasi terpisah.

Kelemahan dan Trade-off

Trusted Types tidak menutup semua jenis XSS. Reflected XSS dari URL parameter dan stored XSS dari konten yang dirender server tetap perlu sanitasi terpisah. Selain itu, beberapa library lawas seperti jQuery butuh wrapper khusus karena banyak panggilan internal ke innerHTML.

Browser support per April 2026 sudah baik di Chromium-based browser yang menguasai 85 persen pasar Indonesia. Safari masih partial dan Firefox eksperimental, jadi pendekatan progressive enhancement disarankan.

Pertanyaan Umum

Apakah Trusted Types memecahkan SPA berbasis React atau Vue?

Tidak, asalkan Anda tidak memakai third-party library yang menulis langsung ke DOM. React, Vue, dan Svelte sudah memiliki adapter resmi untuk Trusted Types.

Berapa effort migrasi untuk aplikasi legacy?

Untuk aplikasi PHP atau jQuery legacy dengan banyak innerHTML manual, biasanya 6-12 minggu termasuk testing. Untuk aplikasi modern berbasis framework, 2-4 minggu cukup.

Apakah Trusted Types kompatibel dengan Partytown?

Ya, dan kombinasi keduanya adalah praktik terbaik. Partytown memindahkan script pihak ketiga ke web worker, Trusted Types menutup celah sink di main thread.

Bagaimana cara monitoring violations setelah enforcement?

Pasang report-uri ke endpoint yang menyimpan log ke database. Review weekly untuk pattern dan vendor yang sering violating.

Apakah Trusted Types dibutuhkan untuk lulus audit ISO 27001?

Tidak wajib eksplisit, tapi sangat membantu sebagai bukti kontrol teknis untuk klausul A.14.2.5 (secure system engineering principles).

Penutup

Trusted Types adalah investasi keamanan yang ROI-nya tidak kelihatan sampai bug XSS pertama dicegah. Untuk tim developer Indonesia yang menjaga website bisnis dengan transaksi atau data pribadi, rollout report-only di kuartal ini dapat memberi peta lengkap risiko sebelum jadi insiden. Mulai dari satu aplikasi yang paling kritis, jangan langsung semua portfolio.