Trusted Types API: Mengurangi Risiko DOM XSS pada Aplikasi Web

Aplikasi web modern sering menyisipkan data ke halaman tanpa memuat ulang dokumen. Nama pengguna, hasil pencarian, komentar, dan respons API dapat dimasukkan ke DOM oleh JavaScript. Jika data tidak tepercaya diperlakukan sebagai HTML atau kode, penyerang berpotensi menjalankan skrip di browser korban. Risiko ini dikenal sebagai DOM-based cross-site scripting (DOM XSS).

Trusted Types API membantu developer mengendalikan jalur data menuju API browser yang sensitif. Fitur ini bukan pembersih input otomatis; manfaatnya muncul ketika kebijakan Trusted Types digabungkan dengan sanitasi yang benar dan Content Security Policy (CSP).

Apa Itu Trusted Types API?

Trusted Types menyediakan objek bertipe seperti TrustedHTML, TrustedScript, dan TrustedScriptURL. Objek tersebut dibuat melalui kebijakan yang didefinisikan aplikasi, bukan dengan mengandalkan string biasa dari sumber yang tidak tepercaya. Browser dapat memeriksa tipe nilai sebelum nilai tersebut masuk ke injection sink, misalnya Element.innerHTML.

Bayangkan halaman menampilkan komentar pengguna. Jika komentar langsung dimasukkan sebagai HTML, konten berbahaya dapat ditafsirkan browser sebagai markup aktif. Dengan Trusted Types, developer dapat membuat jalur eksplisit yang menyaring konten sebelum mengizinkannya masuk ke sink tersebut.

Bagaimana Trusted Types Bekerja?

Alurnya terdiri dari tiga bagian. Pertama, aplikasi mengidentifikasi titik yang menerima string berisiko. Kedua, aplikasi membuat kebijakan yang menerapkan transformasi tepercaya—biasanya sanitasi menggunakan pustaka yang terpelihara. Ketiga, CSP dapat mewajibkan tipe tepercaya pada sink yang didukung dan membatasi nama kebijakan yang boleh dibuat.

Tanpa penegakan CSP, kode masih dapat melewatkan string biasa ke sejumlah sink. Karena itu, membuat kebijakan saja belum cukup. Direktif require-trusted-types-for 'script' digunakan untuk mengaktifkan penegakan pada browser yang mendukungnya, sedangkan direktif trusted-types membatasi nama kebijakan yang diizinkan.

Contoh Implementasi dengan Sanitasi

Contoh berikut memakai DOMPurify untuk membersihkan HTML. Pastikan pustaka berasal dari sumber tepercaya, diperbarui secara berkala, dan dikonfigurasi sesuai jenis konten yang memang perlu ditampilkan.

const htmlPolicy = trustedTypes.createPolicy("app-html", {
  createHTML(input) {
    return DOMPurify.sanitize(input, {
      RETURN_TRUSTED_TYPE: false
    });
  }
});

const target = document.querySelector("#preview");
target.innerHTML = htmlPolicy.createHTML(untrustedComment);

Opsi RETURN_TRUSTED_TYPE: false membuat fungsi sanitasi mengembalikan string yang kemudian dibungkus sebagai TrustedHTML oleh kebijakan. Jangan mengganti sanitasi dengan fungsi yang sekadar mengembalikan input apa adanya; kebijakan seperti itu memberi kesan aman tanpa mengurangi risiko.

Contoh header CSP untuk ilustrasi:

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

Nama setelah trusted-types harus sesuai dengan kebijakan yang benar-benar dipakai aplikasi. Jika framework atau pustaka lain membuat kebijakan sendiri, audit kebutuhan tersebut sebelum menambahkannya ke daftar yang diizinkan. Jangan menyalin header ini langsung ke produksi tanpa menguji halaman dan dependensi.

Langkah Penerapan di Proyek Nyata

1. Inventarisasi sink berisiko. Cari penggunaan innerHTML, outerHTML, insertAdjacentHTML, document.write, dan pola lain yang memproses string sebagai markup atau kode. Tinjau juga komponen pihak ketiga.
2. Kurangi penggunaan HTML dinamis. Jika hanya perlu menampilkan teks, pilih textContent atau buat elemen DOM secara eksplisit. Cara ini biasanya lebih sederhana daripada menyusun HTML dari string.
3. Tetapkan kebijakan minimal. Buat kebijakan terpisah sesuai kebutuhan, gunakan sanitiser yang terpelihara, dan batasi format HTML yang diperbolehkan. Jangan membuat kebijakan generik yang menerima semua input tanpa pemeriksaan.
4. Uji tanpa memblokir lebih dahulu. Gunakan lingkungan pengujian dan mode pelaporan CSP untuk mengidentifikasi bagian aplikasi yang belum siap. Periksa log browser, formulir, pencarian, editor konten, dan widget pihak ketiga.
5. Aktifkan penegakan bertahap. Setelah temuan diperbaiki, terapkan CSP yang mewajibkan Trusted Types pada sebagian kecil lalu lintas atau lingkungan terlebih dahulu. Pantau error sebelum memperluas penerapan.

Manfaat dan Batasannya

Trusted Types membantu memusatkan proses penanganan HTML berisiko sehingga lebih mudah diaudit. Ketika penegakan aktif, upaya memasukkan string biasa ke sink yang dilindungi dapat menghasilkan kesalahan, sehingga jalur kode yang belum diperbaiki lebih mudah ditemukan saat pengujian.

Namun, fitur ini tidak menggantikan validasi server, otorisasi, pengodean output sesuai konteks, atau sanitasi. Kebijakan yang terlalu permisif dapat melemahkan manfaatnya. Dukungan browser juga bergantung pada versi dan lingkungan; periksa matriks kompatibilitas untuk browser yang dipakai pengunjung, termasuk WebView dan perangkat lama.

Trusted Types juga tidak otomatis mengamankan semua cara mengeksekusi kode atau semua sumber XSS. Tetap lakukan tinjauan kode, pembaruan dependensi, pengujian keamanan, serta pemantauan laporan CSP. Untuk lapisan pertahanan yang lebih luas, terapkan beberapa kontrol secara bersamaan. Gunakan sanitasi HTML yang sesuai konteks, validasi input di sisi server, pengodean output, pembaruan dependensi, serta pengujian keamanan berkala. Tinjau pula kebijakan CSP agar tidak terlalu longgar dan pastikan laporan pelanggaran dipantau.

Kesalahan yang Perlu Dihindari

Jangan membuat kebijakan Trusted Types yang hanya mengembalikan input tanpa sanitasi. Hindari pula mengizinkan semua nama kebijakan melalui CSP tanpa alasan yang jelas. Kebijakan yang terlalu luas dapat membuat perlindungan kehilangan manfaatnya. Jangan menganggap bahwa data yang sudah divalidasi di browser pasti aman, karena validasi sisi klien dapat dilewati.

Perhatikan juga perbedaan antara menampilkan teks dan menampilkan HTML. Untuk komentar atau nama pengguna yang tidak membutuhkan markup, gunakan textContent. Jika HTML memang diperlukan, batasi elemen dan atribut yang diperbolehkan melalui sanitiser yang aktif dipelihara, lalu uji hasilnya pada browser yang menjadi target.

Checklist Sebelum Produksi

• Semua penggunaan sink HTML dinamis sudah diinventarisasi dan ditinjau.
• Input yang memang perlu ditampilkan sebagai HTML dibersihkan dengan sanitiser yang tepercaya.
• Kebijakan Trusted Types memiliki nama dan fungsi yang spesifik, bukan menerima semua input begitu saja.
• Header CSP diuji di lingkungan staging dan kompatibilitas browser sudah diperiksa.
• Formulir, pencarian, editor, widget, serta pustaka pihak ketiga diuji setelah penegakan diaktifkan.
• Laporan pelanggaran dan error browser dipantau agar masalah kompatibilitas dapat segera ditangani.

Kesimpulan

Trusted Types API membantu mengurangi risiko DOM XSS dengan membuat jalur yang lebih terkontrol untuk memasukkan data ke sink DOM yang sensitif. Perlindungan terbaik diperoleh saat kebijakan ini dipadukan dengan sanitasi yang benar, penggunaan textContent untuk teks biasa, serta CSP yang diuji dan diterapkan secara bertahap. Audit kode dan pemantauan tetap diperlukan karena Trusted Types bukan pengganti seluruh praktik keamanan aplikasi web.

Untuk lapisan pertahanan yang lebih luas, terapkan sanitasi sesuai konteks, validasi input di server, pengodean output, pembaruan dependensi, serta pengujian keamanan berkala. Tinjau kebijakan CSP agar tidak terlalu longgar dan pantau laporan pelanggarannya.

Kesimpulan

Trusted Types API membantu mengurangi risiko DOM XSS dengan mengendalikan jalur data menuju sink DOM yang sensitif. Hasil terbaik dicapai dengan kebijakan yang ketat, sanitasi HTML yang benar, penggunaan textContent untuk teks biasa, dan CSP yang diuji bertahap. Fitur ini bukan pengganti validasi server, audit kode, maupun pemantauan keamanan berkelanjutan.