Apa Itu Subresource Integrity (SRI)?

Subresource Integrity (SRI) adalah fitur keamanan yang memungkinkan browser memverifikasi bahwa file yang dimuat dari sumber eksternal — seperti CDN — tidak telah diubah atau dikompromikan. Ketika Anda menambahkan atribut integrity ke tag <script> atau <link>, browser membandingkan hash file yang diunduh dengan hash yang diharapkan. Jika tidak cocok, browser memblokir sumber daya tersebut.

Mengapa Menggunakan SRI?

Memuat JavaScript atau CSS dari CDN pihak ketiga sangat nyaman, tetapi memperkenalkan risiko keamanan. Jika CDN dikompromikan, penyerang dapat menyuntikkan kode berbahaya ke situs web Anda. SRI menghilangkan risiko ini dengan memastikan bahwa hanya versi file yang tepat dan terverifikasi yang dijalankan.

Cegah Serangan Rantai Pasokan

Blokir skrip yang dimanipulasi agar tidak berjalan di situs Anda dan lindungi dari sumber daya CDN yang dikompromikan.

Lindungi Data Pengguna

Hentikan kode yang disuntikkan dari mencuri kredensial, token sesi, atau informasi pengguna yang sensitif.

Patuhi Standar Keamanan

SRI direkomendasikan oleh OWASP dan W3C sebagai praktik terbaik keamanan web.

Bagaimana Cara Kerjanya?

SRI menggunakan fungsi hash kriptografi (SHA-256, SHA-384, atau SHA-512) untuk membuat sidik jari konten file. Hash ini ditambahkan ke tag HTML sebagai atribut integrity, bersama dengan crossorigin="anonymous" untuk mengaktifkan verifikasi berbasis CORS.

Cara kerjanya: Ketika browser mengunduh sumber daya, browser menghitung hash file yang diterima dan membandingkannya dengan hash integrity yang Anda berikan. Jika cocok, sumber daya dijalankan. Jika tidak, browser memblokir sepenuhnya.

Cara Menggunakan Pembuat Hash SRI

Tempel Konten File

Salin konten lengkap file JavaScript atau CSS yang ingin Anda lindungi, dan tempel ke textarea Konten. Hash dihasilkan secara otomatis saat Anda mengetik atau menempel.

Pilih Algoritma

Pilih algoritma hash dari toolbar. SHA-384 dipilih secara default dan merupakan pilihan yang direkomendasikan untuk SRI. Anda juga dapat menggunakan SHA-256 atau SHA-512 tergantung pada kebutuhan Anda.

Atur Jenis Tag

Pilih apakah sumber daya adalah <script> (JavaScript) atau <link> (stylesheet CSS). Jika Anda memasukkan URL dengan ekstensi .js atau .css, jenis tag terdeteksi secara otomatis.

Tambahkan URL Sumber Daya (Opsional)

Masukkan URL CDN sumber daya di bidang URL Sumber Daya. URL ini akan digunakan dalam atribut src atau href tag HTML yang dihasilkan. Jika dibiarkan kosong, URL placeholder digunakan.

Salin Output

Salin hash integrity saja atau tag HTML lengkap menggunakan tombol salin. Tempel tag langsung ke HTML Anda untuk mengaktifkan perlindungan SRI.

Tips pro: Selalu uji sumber daya yang dilindungi SRI di lingkungan pengembangan terlebih dahulu untuk memastikan hash cocok dan sumber daya dimuat dengan benar.

Fitur Utama

Beberapa Algoritma Hash

Hasilkan hash SRI menggunakan SHA-256, SHA-384, atau SHA-512. SHA-384 adalah algoritma default dan direkomendasikan sesuai spesifikasi SRI W3C.

SHA-256 untuk keamanan dasar
SHA-384 (direkomendasikan)
SHA-512 untuk kekuatan maksimal
Pengalihan algoritma instan

Deteksi Otomatis Jenis Tag

Ketika Anda memasukkan URL sumber daya, alat secara otomatis mendeteksi apakah itu file JavaScript atau stylesheet CSS dan memilih jenis tag yang sesuai.

Mendeteksi file .js secara otomatis
Mendeteksi file .css secara otomatis
Penggantian manual tersedia
Parsing URL cerdas

Output HTML Siap Pakai

Dapatkan tag HTML lengkap dengan atribut integrity dan crossorigin yang sudah disertakan. Cukup salin dan tempel ke dokumen HTML Anda.

Tag <script> lengkap
Tag <link> lengkap
Atribut CORS disertakan
Tidak perlu pengeditan manual

Salin dengan Satu Klik

Salin nilai hash integrity atau tag HTML lengkap dengan satu klik. Konfirmasi visual muncul ketika konten disalin ke clipboard Anda.

Salin hash saja
Salin tag HTML lengkap
Konfirmasi visual
Akses clipboard instan

Pemrosesan Sisi Klien

Semua komputasi hash dilakukan sepenuhnya di browser Anda menggunakan Web Crypto API. Konten file Anda tidak pernah diunggah ke server mana pun.

100% berbasis browser
Tidak ada unggahan server
Privasi lengkap
Bekerja offline

Pembuatan Real-Time

Nilai hash dihitung secara instan saat Anda mengetik atau menempel konten. Tidak perlu mengklik tombol generate atau menunggu pemrosesan.

Perhitungan hash instan
Pembaruan pratinjau langsung
Tidak ada penundaan atau menunggu
Pemrosesan efisien

Pertanyaan yang Sering Diajukan

Algoritma mana yang harus saya gunakan untuk SRI?

SHA-384 direkomendasikan oleh W3C dan merupakan algoritma yang paling banyak digunakan untuk SRI. Ini memberikan keseimbangan yang kuat antara keamanan dan kinerja. SHA-256 dan SHA-512 juga didukung oleh semua browser modern.

Praktik terbaik: Gunakan SHA-384 kecuali Anda memiliki persyaratan khusus untuk SHA-256 (ukuran hash lebih kecil) atau SHA-512 (keamanan maksimal).

Apakah saya memerlukan atribut crossorigin?

Ya. Atribut crossorigin="anonymous" diperlukan agar SRI berfungsi dengan sumber daya yang dimuat dari asal yang berbeda (seperti CDN). Tanpanya, browser tidak dapat memverifikasi integritas sumber daya lintas asal.

Nilai anonymous berarti tidak ada kredensial (cookie, autentikasi HTTP) yang dikirim dengan permintaan, yang merupakan konfigurasi standar untuk sumber daya CDN publik.

Apa yang terjadi jika hash tidak cocok?

Jika hash file yang diunduh tidak cocok dengan atribut integrity, browser akan menolak untuk menjalankan skrip atau menolak untuk menerapkan stylesheet. Ini melindungi situs Anda dari memuat file yang dikompromikan.

Penting: Browser juga akan mencatat kesalahan di konsol, yang membantu Anda mengidentifikasi kapan sumber daya telah dimodifikasi atau ketika Anda perlu memperbarui hash integrity setelah pembaruan file yang sah.

Apakah CDN perlu mendukung CORS?

Ya. Server yang menghosting sumber daya harus menyertakan header Access-Control-Allow-Origin agar verifikasi SRI berfungsi. Sebagian besar CDN populer (jsDelivr, cdnjs, unpkg) sudah mendukung CORS.

Jika Anda menggunakan CDN yang tidak mendukung CORS, verifikasi SRI akan gagal dan sumber daya tidak akan dimuat. Dalam hal ini, Anda perlu beralih ke CDN yang mendukung CORS atau menghosting sumber daya di domain Anda sendiri.

Apakah konten saya dikirim ke server?

Tidak. Semua hashing dilakukan secara lokal di browser Anda menggunakan Web Crypto API. Konten file Anda tidak pernah meninggalkan perangkat Anda.

Jaminan privasi: Alat ini bekerja sepenuhnya offline setelah dimuat. Anda bahkan dapat memutuskan koneksi internet dan terus menghasilkan hash SRI untuk file Anda.

Bisakah saya menggunakan beberapa algoritma dalam satu tag?

Ya, spesifikasi SRI memungkinkan beberapa hash yang dipisahkan oleh spasi (misalnya, sha256-abc sha384-xyz). Browser akan menggunakan algoritma terkuat yang didukungnya. Alat ini menghasilkan satu hash sekaligus — Anda dapat menggabungkannya secara manual jika diperlukan.

Menggunakan beberapa hash memberikan kompatibilitas mundur dengan browser yang lebih lama sambil memastikan browser yang lebih baru menggunakan algoritma terkuat yang tersedia.