Apa itu Subresource Integrity?

SRI (Subresource Integrity) adalah fitur keamanan browser yang memverifikasi bahwa file yang diambil dari CDN atau server eksternal tidak dimodifikasi. Browser membandingkan hash file yang diunduh dengan hash yang ada di atribut integrity.

Kenapa SRI Penting?

• CDN bisa di-compromise — penyerang mengganti file dengan versi berbahaya
• Supply chain attack — library populer dimodifikasi untuk menyisipkan malware
• Man-in-the-middle — file dimodifikasi dalam perjalanan (jika CDN tidak pakai HTTPS)

Cara Menggunakan SRI

<!-- Tanpa SRI — tidak ada verifikasi -->
<script src="https://cdn.example.com/lib.js"></script>

<!-- Dengan SRI — browser verifikasi hash sebelum eksekusi -->
<script
    src="https://cdn.example.com/lib.js"
    integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8w"
    crossorigin="anonymous"
></script>

<!-- SRI juga bisa untuk CSS -->
<link
    rel="stylesheet"
    href="https://cdn.example.com/styles.css"
    integrity="sha384-abc123..."
    crossorigin="anonymous"
/>

Generate SRI Hash

# Menggunakan openssl di terminal
cat lib.js | openssl dgst -sha384 -binary | openssl base64 -A
# Output: oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8w

# Menggunakan shasum
shasum -b -a 384 lib.js | awk '{ print $1 }' | xxd -r -p | base64

# Online tool: https://www.srihash.org/

Multiple Hashes

<!-- Bisa menyediakan beberapa hash algorithm -->
<script
    src="https://cdn.example.com/lib.js"
    integrity="sha256-abc123... sha384-def456..."
    crossorigin="anonymous"
></script>
<!-- Browser menggunakan hash algorithm yang paling kuat -->

SRI di Build Tools

// Vite: generate SRI otomatis
// vite.config.js
import sri from "rollup-plugin-sri";
export default {
    plugins: [sri()]
};

// Webpack: html-webpack-plugin dengan SRI
const SriPlugin = require("webpack-subresource-integrity");
module.exports = {
    output: { crossOriginLoading: "anonymous" },
    plugins: [new SriPlugin({ hashFuncNames: ["sha384"] })]
};

Keterbatasan SRI

• Hanya bekerja untuk script dan link (CSS) — tidak untuk image, font, dll.
• File harus persis sama — dynamic content (file berubah-ubah) tidak bisa pakai SRI
• Perlu update hash setiap kali library di-update
• Memerlukan crossorigin="anonymous" untuk resource cross-origin

Best Practices

• Gunakan SRI untuk semua external scripts dan CSS
• Automatisasi SRI hash generation di build pipeline
• Gunakan sha384 atau sha512 (sha256 minimum)
• Selalu sertakan crossorigin="anonymous"