Dalam mengembangkan sebuah aplikasi berbasis web, sudah sangat umum bagi kita untuk load sebuah library menggunakan CDN, selain bisa membuat loading website kita lebih cepat juga bisa mengurangi bandwidth dan beban server.
Akan tetapi, walaupun menggunakan CDN menawarkan beberapa keuntungan diatas, salah satu kekhawatiran developer adalah bagaimana jika library yang kita panggil dari CDN tersebut ternyata suatu saat dirusak (tampered) oleh attacker? Solusinya adalah menggunakan Subresource Integiry.
Apa itu Subresource Integrity (SRI)?
Dikutip dari Wikipedia, pengertiannya adalah seperti ini:
Subresource Integrity or SRI is a W3C recommendation to provide a method to protect website delivery. Specifically, it validates assets served by a third party, such as a content delivery network(CDN). This ensures these assets have not been compromised for hostile purposes.
Jadi, Subresource Integirity ini merupakan rekomedasi dari W3C (World Wide Web Consurtium) untuk melindungi website jika suatu saat ada resource yang dipanggil dari luar website kita di rusak.
Misal kita perlu library bootstrap menggunakan CDN, cara cepatnya kita tinggal menambahkan kode seperti ini di website kita:
<script src="https://azis-cdn.net/library/bs-5/bootstrap.min.js"></script>
Sekilas tidak ada yang aneh, semua akan berjalan baik-baik saja dan bisa langsung kita gunakan. Masalah besar bisa terjadi jika suatu saat file bootstrap.min.js dirusak oleh orang yang tidak bertanggung jawab, mungkin tidak banyak, tapi impactnya bisa sangat besar pada website kita. Seperti:
alert('hacked by 42is, no syst3m 1s safe 😜');
atau
location.href = "https://kokads.com"
Walaupun mungkin sangat kecil kemungkinan hal ini terjadi, tapi kita bisa antisipasi hal ini agar kita bisa hidup dengan tenang.
Btw walaupun di artikel ini saya sering nyebut kata CDN, tapi SRI ini penggunaannya bukan hanya untuk CDN, tapi semua resource external yang akan kita load pada website kita.
Cara Kerja Subresource Integrity
Untuk menggunakan SRI kita diharuskan untuk menyertakan cryptographic hash dari resource (file) yang kita panggil, saat browser me-load resource tersebut maka browser akan membandingkan apakah hash yang kita sertakan cocok dengan hash hasil komputasi browser, jika tidak cocok maka browser akan mengabaikan dan tidak akan mengeksekusi resource yang kita panggil tadi.
Kurang lebih seperti ini penampakan pada Console Log browser jika integrity hash tidak cocok:
Penggunaan hashing untuk mengecek integritas data juga pernah sedikit saya bahas pada artikel ini
Saat artikel ini dibuat Subresource Integrity sudah disupport oleh sebagian besar browser modern yang ada:
Cara Menggunakan SRI
Untuk menggunakan SRI kita perlu menambahkan atribut integrity="algoritma-nilaihash"dan juga crossorigin="anonymous" pada saat memanggil resource file. SRI ini bisa kita gunakan baik pada tag <script> ataupun juga tag <link>.
Kita bebas menentukan algoritma apa yang ingin digunakan, saat ini yang didukung: sha256, sha384, dan sha512. Untuk hasil hash yang dimasukan adalah hasil hash yang sudah di encode dengan base64.
Untuk generate hash kita bisa menggunakan openssl di command line seperti dibawah:
Jika kita males untuk melakukan proses diatas secara manual, kita bisa menggunakan bantuan tools SRI Hash Generator, kita cukup memasukan URL dari resource yang ingin kita load, kemudian kita pilih algoritma yang ingin digunakan, tinggal copas deh.
Saat ini sudah banyak provider CDN yang sudah menyediakan kode yang sudah include integrity seperti dibawah sehingga kita tidak perlu repot-repot untuk generate hash secara manual.
Terima kasih atas kunjungannya, semoga bermanfaat 🙂
