SRI Hash Generator Online – Atribut integrity

Q: Algoritme mana yang sebaiknya dipakai?

SHA 384 adalah pilihan yang lazim dan yang dipublikasikan sebagian besar CDN. SHA 256 dan SHA 512 juga didukung semua browser modern. MD5 dan SHA 1 tidak diizinkan di SRI.

Q: Hash saya benar, tetapi browser tetap memblokir file. Mengapa?

Pastikan server mengirim Access Control Allow Origin dan tag memiliki crossorigin . Pastikan juga CDN menyajikan byte yang sama: versi yang berbeda, minifier otomatis, atau jeda baris terakhir yang hilang semuanya mengubah hash.

Q: Mengapa kode yang saya tempel menghasilkan hash berbeda dari file-nya?

Browser mengubah akhir baris Windows CRLF menjadi LF di kolom teks, dan editor bisa menambahkan atau menghapus byte order mark atau baris baru terakhir. Buka file nya langsung untuk meng hash byte nya secara persis.

Q: Apakah SRI berlaku untuk gambar atau font?

Atribut integrity didukung pada <script dan <link rel="stylesheet" serta pada <link rel="preload" atau modulepreload untuk keduanya . Gambar dan font tidak bisa memakainya.

SRI Hash Generator

Buat hash sha384 Subresource Integrity (SRI) untuk file JavaScript atau CSS, lalu salin atribut integrity dan crossorigin yang siap pakai, secara lokal.

Tempel isi file atau buka file-nya langsung: alat ini tidak mengunduh URL. Membaca skrip dari situs lain memerlukan izin dari server tersebut (CORS) atau server milik kami untuk mengambilkannya, padahal apa pun yang Anda hash di sini tidak pernah meninggalkan browser Anda. Hash file persis yang akan Anda sajikan.

Hash Kode yang ditempel File

Isi skrip atau stylesheet

Teks di-hash sebagai UTF-8. Browser mengubah akhir baris Windows (CRLF) menjadi LF pada teks yang ditempel, dan satu byte yang berubah merusak hash: buka file-nya langsung jika ragu.

Algoritme SHA-256 SHA-384 (disarankan) SHA-512

Tag URL resource untuk cuplikan (opsional) crossorigin

URL hanya ditulis ke dalam cuplikan, tidak pernah diakses. Biarkan kosong untuk memakai nama file.

Periksa nilai integrity yang sudah ada (opsional)

Cara membuat hash SRI

Di bagian Hash, pilih Kode yang ditempel atau File.
Tempel isi persis dari skrip atau stylesheet ke Isi skrip atau stylesheet lalu tekan Buat hash SRI, atau letakkan satu atau beberapa file .js dan .css di area unggah. Hash diperbarui saat Anda mengetik.
Biarkan SHA-384 (disarankan) tercentang, atau tambahkan SHA-256 dan SHA-512. Setiap algoritme yang dicentang menambahkan satu token ke nilainya.
Pilih Tag (otomatis dari nama file, <script>, <script type="module">, atau <link rel="stylesheet">), ketik URL resource untuk cuplikan (opsional), lalu pilih mode crossorigin.
Salin nilai integrity atau tag lengkapnya.
Untuk memeriksa tag yang sudah Anda pakai, tempel nilainya atau seluruh tag ke Periksa nilai integrity yang sudah ada (opsional).

Apa fungsi Subresource Integrity

Saat sebuah halaman memuat skrip dari CDN, browser memercayai apa pun yang dikembalikan server tersebut. Jika CDN dibobol atau file-nya diubah, kode yang dimodifikasi berjalan dengan akses penuh ke halaman Anda. Subresource Integrity (W3C SRI) menutup celah itu: Anda memublikasikan hash yang diharapkan dari file tersebut di atribut integrity, browser meng-hash apa yang diunduhnya, dan browser menolak menjalankan skrip atau menerapkan stylesheet jika keduanya berbeda.

<script src="https://cdn.example.com/lib.min.js"
        integrity="sha384-H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO"
        crossorigin="anonymous"></script>

Nilainya terdiri dari nama algoritme, tanda hubung, dan digest berenkode Base64 dari byte file tersebut. Contoh di atas adalah hash dari alert('Hello, world.'); yang diambil dari spesifikasi SRI. Jika beberapa hash dicantumkan, browser hanya melihat algoritme terkuat yang ada dan menerima file jika salah satu hash dengan algoritme itu cocok. Dengan cara inilah sebuah situs bisa mencantumkan dua versi file selama proses peluncuran.

Mengapa crossorigin diperlukan

Untuk file di origin lain, browser hanya bisa memeriksa integritasnya jika respons diambil dalam mode CORS, sehingga tag memerlukan atribut crossorigin dan server harus menjawab dengan header Access-Control-Allow-Origin. Gunakan anonymous (tanpa cookie) untuk CDN publik; use-credentials untuk resource privat yang jarang dipakai. Tanpa CORS, browser memblokir file alih-alih memuatnya tanpa pemeriksaan.

Mengapa alat ini tidak mengambil URL

Alat ini hanya meng-hash kode yang Anda tempel atau file yang Anda buka. Mengunduh skrip dari URL-nya di dalam halaman hanya berhasil jika server tersebut mengizinkan pembacaan lintas origin, dan mengakalinya memerlukan server yang mengambilkan file untuk Anda, yang juga akan melihat apa yang Anda hash. Semuanya di sini berjalan di browser Anda. Cara paling sederhana adalah mengunduh file persis yang akan Anda rujuk (versi yang sama dan build minified yang sama) lalu membukanya di sini.

Pertanyaan yang sering diajukan

Algoritme mana yang sebaiknya dipakai?

SHA-384 adalah pilihan yang lazim dan yang dipublikasikan sebagian besar CDN. SHA-256 dan SHA-512 juga didukung semua browser modern. MD5 dan SHA-1 tidak diizinkan di SRI.

Hash saya benar, tetapi browser tetap memblokir file. Mengapa?

Pastikan server mengirim Access-Control-Allow-Origin dan tag memiliki crossorigin. Pastikan juga CDN menyajikan byte yang sama: versi yang berbeda, minifier otomatis, atau jeda baris terakhir yang hilang semuanya mengubah hash.

Mengapa kode yang saya tempel menghasilkan hash berbeda dari file-nya?

Browser mengubah akhir baris Windows (CRLF) menjadi LF di kolom teks, dan editor bisa menambahkan atau menghapus byte order mark atau baris baru terakhir. Buka file-nya langsung untuk meng-hash byte-nya secara persis.

Apakah saya perlu SRI untuk file di domain saya sendiri?

SRI melindungi dari perubahan yang terjadi setelah Anda menghitung hash, jadi paling penting untuk host pihak ketiga. Untuk file Anda sendiri, bundler yang membuat hash saat build biasanya lebih mudah.

Apakah SRI berlaku untuk gambar atau font?

Atribut integrity didukung pada <script> dan <link rel="stylesheet"> (serta pada <link rel="preload"> atau modulepreload untuk keduanya). Gambar dan font tidak bisa memakainya.