Subresource Integrity (SRI): Melindungi Skrip CDN dari Perubahan Tak Terduga

Memuat pustaka JavaScript atau stylesheet dari Content Delivery Network (CDN) dapat membantu mempercepat website dan mengurangi beban server. Namun, file pihak ketiga juga membawa risiko: jika file yang disajikan berubah tanpa sepengetahuan pengelola situs, kode baru dapat berjalan di browser pengunjung. Subresource Integrity (SRI) adalah fitur browser yang membantu memeriksa apakah file eksternal yang diterima sesuai dengan hash yang ditetapkan pengembang.

SRI bukan pengganti seluruh kontrol keamanan website. Fitur ini bekerja paling baik sebagai satu lapisan perlindungan bersama HTTPS, Content Security Policy (CSP), pengelolaan dependensi, dan proses deployment yang terkontrol.

Apa Itu Subresource Integrity?

Subresource Integrity merupakan mekanisme yang memungkinkan halaman HTML menyertakan nilai kriptografis untuk sumber daya eksternal, seperti file JavaScript atau CSS. Browser mengunduh file tersebut, menghitung hash dari isinya, lalu membandingkannya dengan nilai pada atribut integrity. Jika hash tidak cocok, browser menolak menggunakan sumber daya itu.

Dengan demikian, SRI membantu mendeteksi perubahan konten yang tidak sesuai dengan versi yang disetujui. Misalnya, sebuah situs memuat pustaka dari CDN. Jika file yang diterima berbeda dari file yang telah diverifikasi ketika integrasi dibuat, browser dapat memblokirnya alih-alih menjalankan kode yang tidak cocok.

Bagaimana Cara Kerja SRI?

Pengembang menghasilkan hash dari file yang dipercaya, lalu menyimpan hash itu pada elemen HTML yang memuat sumber daya. Browser menghitung ulang hash setelah mengunduh file. Kecocokan berarti isi file sesuai dengan nilai yang dinyatakan; ketidakcocokan membuat browser menolak sumber daya tersebut.

Contoh berikut menunjukkan bentuk atributnya. Nilai hash di bawah hanyalah penanda tempat, bukan hash yang dapat langsung digunakan:

<script
  src="https://cdn.example.com/library.min.js"
  integrity="sha384-BASE64_HASH"
  crossorigin="anonymous">
</script>

Ganti BASE64_HASH dengan hash SHA-384 yang benar-benar dihitung dari file persis yang akan dipakai. Jangan menyalin contoh ini ke situs produksi sebelum nilai hash diverifikasi. SRI juga dapat digunakan pada elemen link untuk stylesheet eksternal.

Kapan SRI Berguna?

SRI paling berguna ketika situs memuat file statis dari sumber eksternal yang versinya dapat dipastikan, seperti pustaka JavaScript atau CSS yang dipatok pada versi tertentu. Contohnya, halaman dokumentasi atau situs pemasaran yang menggunakan versi tetap sebuah pustaka dari CDN.

Fitur ini kurang praktis untuk URL yang selalu menunjuk ke versi terbaru atau file yang berubah secara dinamis. Setiap perubahan isi yang sah juga mengubah hash, sehingga nilai integrity perlu diperbarui bersamaan dengan perubahan versi. Jika tidak, browser dapat memblokir file yang sebenarnya memang sengaja diperbarui.

Langkah Menerapkan SRI dengan Aman

1. Pin versi dependensi

Gunakan URL yang merujuk pada versi pustaka tertentu, bukan alias yang berubah mengikuti rilis terbaru. Versi tetap membuat file yang diharapkan lebih mudah diperiksa dan mengurangi kejutan saat penyedia CDN memperbarui aset.

2. Hitung hash dari file yang benar

Unduh atau ambil file rilis dari sumber tepercaya, pastikan versi dan asalnya, lalu hitung hash menggunakan alat yang sesuai. Sebagai contoh, perintah OpenSSL berikut menghasilkan nilai Base64 untuk SHA-384 dari file lokal:

openssl dgst -sha384 -binary library.min.js | openssl base64 -A

Tambahkan awalan sha384- pada hasil Base64 saat menaruhnya di atribut integrity. Pastikan file yang dihitung sama persis dengan file yang akan disajikan, termasuk setelah proses build atau optimasi.

3. Atur CORS untuk sumber lintas origin

Untuk sumber daya lintas origin, atribut crossorigin="anonymous" lazim digunakan bersama SRI. Server CDN juga harus memberikan header CORS yang sesuai agar browser dapat memeriksa respons tersebut. Jika konfigurasi CORS tidak cocok, sumber daya dapat gagal dimuat meskipun URL-nya benar.

4. Uji setelah setiap pembaruan

Setelah memperbarui dependensi, buat ulang hash dan uji halaman di browser. Periksa Console dan panel Network untuk melihat apakah file diblokir karena integritas atau gagal akibat CORS. Masukkan pembaruan hash ke proses code review agar perubahan tidak dilakukan secara manual tanpa pemeriksaan.

Batasan yang Perlu Dipahami

SRI memeriksa isi sumber daya yang ditandai, bukan seluruh halaman. Fitur ini tidak otomatis melindungi file yang tidak memakai atribut integritas, respons API, atau kode berbahaya yang sudah disisipkan ke HTML utama. Jika penyerang dapat mengubah HTML yang memuat nilai hash, ia mungkin juga dapat mengganti hash tersebut. Karena itu, lindungi proses deployment dan akun pengelola situs.

SRI juga bukan jaminan bahwa pustaka itu sendiri bebas kerentanan. Hash yang cocok hanya menunjukkan bahwa file sesuai dengan nilai yang ditetapkan, bukan bahwa kode tersebut aman atau cocok untuk semua kebutuhan. Tetap perbarui dependensi, tinjau sumber, dan hapus pustaka yang tidak lagi diperlukan.

Checklist Sebelum Mengaktifkan SRI

• Pastikan URL mengarah ke versi dependensi yang tetap dan tepercaya.
• Hitung hash dari file final yang akan dimuat, bukan dari file berbeda atau versi lain.
• Gunakan atribut integrity dan konfigurasi crossorigin yang sesuai.
• Uji halaman di browser dan tinjau pesan Console serta respons CORS.
• Perbarui hash secara bersamaan dengan perubahan versi, lalu lakukan code review.
• Gabungkan SRI dengan HTTPS, CSP, dan pengamanan pipeline deployment.

Kesimpulan

Subresource Integrity memberi browser cara untuk memeriksa apakah JavaScript atau CSS eksternal sama dengan file yang telah disetujui. Penerapannya relatif sederhana untuk aset statis berversi tetap, tetapi membutuhkan pengelolaan hash yang disiplin setiap kali dependensi diperbarui. Gunakan SRI sebagai lapisan pertahanan tambahan, bukan sebagai satu-satunya kontrol keamanan.

Untuk referensi teknis, baca dokumentasi Subresource Integrity di MDN dan spesifikasi terkait pada W3C.