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
integritydi 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
| Bagian | Fungsi | Contoh |
|---|---|---|
integrity | Hash kriptografis file | sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC |
crossorigin | Izin CORS untuk hashing | anonymous |
| Versi pinned | Cegah hash mismatch | jquery@3.7.1 bukan latest |
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.
Artikel Terkait
Website Bisnis
Cara Marketer Indonesia Pasang Scheduler API di Next.js untuk Pulihkan Skor INP saat Tag Manager Tebal di 2026
Halaman dengan GTM, Meta Pixel, dan TikTok Pixel sering membunuh skor INP. Scheduler API postTask memungkinkan kamu menurunkan prioritas tag analytics tanpa mencopot pixel.
Website Bisnis
Cara Marketer Indonesia Pasang llms.txt di Next.js untuk Memandu Crawler AI dan Naikkan Citation di Jawaban AI Search 2026
Panduan lengkap memasang llms.txt di Next.js: file mandat baru yang dipakai ChatGPT, Claude, dan Perplexity untuk memilih konten yang dikutip.
Website Bisnis
Cara Marketer Indonesia Pasang VideoObject Schema di Next.js untuk Muncul di Carousel Video SERP 2026
Panduan praktis pasang VideoObject Schema di Next.js App Router supaya video tutorial dan demo produk muncul dengan thumbnail di hasil pencarian Google dan dikutip AI search.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang