Subresource Integrity untuk Website Bisnis Indonesia: Cara Kunci CDN Pihak Ketiga agar Tidak Jadi Pintu Masuk Skrip Jahat di 2026

TL;DR: Subresource Integrity (SRI) adalah atribut integrity di tag <script> atau <link> berisi hash kriptografis. Browser menolak file dari CDN jika hash-nya berbeda. Pasang SRI pada semua resource pihak ketiga (jQuery, Bootstrap, font, analytic) dan kunci versi spesifik. Implementasi 30 menit, perlindungan supply chain seumur hidup proyek.

Dalam beberapa proyek website bisnis di Indonesia yang saya audit selama 2024-2026, satu pola berulang muncul. Tim memuat puluhan library JavaScript dari CDN gratis seperti jsDelivr, unpkg, atau cdnjs, lalu mengabaikan apa yang terjadi jika file di CDN tersebut berubah. Ketika satu file di-compromise, semua pengunjung website otomatis menjalankan skrip baru tanpa peringatan.

Subresource Integrity menutup celah ini dengan biaya implementasi mendekati nol. Untuk konteks website bisnis Indonesia yang sering pakai CDN gratis demi menghemat bandwidth, SRI bukan opsi mewah, melainkan kebersihan dasar.

Mengapa CDN Pihak Ketiga Jadi Risiko Supply Chain

CDN populer melayani jutaan request per detik dari ribuan website. Jika satu akun maintainer dibajak, atau infrastruktur CDN sendiri ditembus, payload jahat akan tersebar ke semua website yang memuat file tersebut secara real time. Riset dari Sucuri dan StackPath sepanjang 2023-2025 mencatat puluhan kasus serangan supply chain yang berakar dari CDN populer dan paket NPM yang dirujuk lewat CDN. Insiden Polyfill.io pada Juni 2024 yang menyalahgunakan ribuan domain memperlihatkan persis pola ini.

Ketergantungan pada CDN tidak salah. Yang salah adalah memuat resource pihak ketiga tanpa mekanisme verifikasi. Itulah peran SRI.

Anatomi Atribut Integrity

Browser akan mengunduh file, menghitung hash SHA-384 atau SHA-512 lokal, lalu membandingkan. Jika cocok, eksekusi lanjut. Jika beda, file dibuang dan halaman tetap aman.

Studi Kasus: Hardening Website Klien E-commerce

Saat saya bantu hardening website Nalesha, salah satu klien e-commerce parfum di portfolio Vito Atmo, kami menemukan 9 resource pihak ketiga (jQuery, Slick carousel, Font Awesome, Google Fonts, Tag Manager, dan beberapa pixel iklan) tanpa SRI. Dalam 1 jam kami: ekstrak hash semua versi spesifik pakai openssl, kunci versi (tidak ada latest), pasang integrity plus crossorigin="anonymous" di setiap tag, lalu jalankan smoke test di staging. Tidak ada kerusakan fungsional. Performa tidak terpengaruh karena verifikasi hash terjadi paralel dengan parsing.

Untuk website bisnis dengan ratusan halaman, gunakan template global. Di Next.js, atribut integrity bisa ditambahkan via komponen <Script> dengan prop kustom. Di WordPress, plugin seperti WP Hardening menambahkan SRI otomatis untuk dependency yang dikenal.

Hubungan dengan CSP, HSTS, dan Permissions-Policy

SRI bekerja paling efektif bersama Content Security Policy yang mengunci sumber resource, HSTS yang memastikan koneksi tetap HTTPS, dan Permissions-Policy yang membatasi API browser. Empat header ini adalah baseline minimum security untuk website bisnis Indonesia di 2026 menurut praktik Google Web Fundamentals.

CSP menjawab pertanyaan: dari mana resource boleh dimuat. SRI menjawab: apakah isi resource sesuai harapan. Tanpa SRI, CSP yang permisif (mengizinkan jsDelivr) tetap rentan jika file di jsDelivr berubah.

Jebakan Implementasi

Hash mismatch karena auto-update versi adalah penyebab #1 SRI gagal di production. Solusinya: kunci versi semantic exact (@3.7.1) dan jadwalkan refresh hash saat upgrade dependency. Atribut crossorigin yang lupa dipasang juga membuat browser tidak bisa hashing dan menolak file. Logging error di Technical SEO audit perlu dipasang lewat SecurityPolicyViolationEvent agar tahu jika ada file yang ditolak diam-diam.

Pertanyaan Umum

Apakah SRI memperlambat halaman?

Tidak signifikan. Hash dihitung ulang saat unduh, paralel dengan parsing HTML. Overhead di bawah 5 ms per resource pada perangkat menengah.

Bagaimana kalau saya self-host semua library?

SRI tetap berguna sebagai sanity check terhadap perubahan file lokal yang tidak disengaja. Tapi prioritas utama SRI adalah resource pihak ketiga.

Apakah SRI wajib untuk semua resource?

Wajib untuk semua skrip dan stylesheet pihak ketiga yang menjalankan kode. Untuk gambar, font, dan video opsional karena risiko supply chain-nya jauh lebih kecil.

Bisakah SRI dipakai dengan Tag Manager?

Bisa untuk loader GTM, tapi container yang dimuat GTM secara dinamis tidak bisa di-SRI. Untuk itu pakai Server-Side GTM yang memindahkan kontrol ke server Anda sendiri.

Penutup: Kebersihan Dasar yang Sering Dilupakan

Subresource Integrity tidak akan muncul di laporan eksekutif sebagai pencapaian besar. Tapi ketika satu skrip di CDN diserang, SRI yang membedakan website yang tetap aman dengan website yang ikut menjadi vektor distribusi malware. Pasang SRI bersama CSP, HSTS, dan Permissions-Policy. Empat header, satu sore kerja, perlindungan bertahun.