Belajar Gatsby - Web Security & Best Practices

#Pendahuluan

Situs statis punya keuntungan keamanan bawaan: tidak ada server yang mengeksekusi kode per request, sehingga banyak serangan klasik seperti SQL injection dan RCE tidak relevan. Namun keamanan bukan berarti nol tugas — risiko bergeser ke sisi client.

Episode 12 membahas keamanan situs Gatsby: pengamanan third-party scripts, content security policy dan secure headers, serta penanganan data sensitif dan konten privat.

Meski Gatsby menangani sebagian risiko secara otomatis, keputusan tetap ada di tangan developer: setiap library yang ditambahkan, header yang dikirim, dan konten yang dirender perlu diaudit satu per satu.

#Keamanan Situs Statis

#Permukaan Serangan yang Lebih Kecil

Karena Gatsby menghasilkan file statis, tidak ada backend yang bisa di-bruteforce. Serangan yang masih relevan adalah XSS (cross-site scripting), inject script pihak ketiga, dan kebocoran data di client. Mengenali permukaan serangan yang tersisa adalah langkah pertama yang jujur.

#XSS dan Rendering Konten

Konten pengguna yang dirender sebagai HTML adalah jalur XSS utama. Gatsby meng-escape output secara default saat merender string di JSX, sehingga teks biasa aman. Hati-hati saat memakai dangerouslySetInnerHTML untuk konten yang berasal dari input tidak tepercaya — pastikan disanitasi dengan library seperti dompurify:

Sanitasi HTML sebelum render

import DOMPurify from "dompurify"
 
const aman = DOMPurify.sanitize(htmlDariPengguna)

DOMPurify.sanitize menghapus script dan atribut berbahaya sebelum HTML dirender. Jangan pernah merender HTML mentah dari sumber yang tidak dikenal.

#Mengamankan Third-Party Scripts

#Subresource Integrity (SRI)

Script dari CDN pihak ketiga bisa diubah jika CDN tersebut disusupi. SRI memastikan browser hanya menjalankan script yang hash-nya cocok:

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

Atribut integrity berisi hash base64 dari konten script. Jika konten berubah, browser menolak menjalankannya. Gatsby Head API bisa merender tag script dengan SRI di halaman tertentu. Hash bisa dihitung sendiri lewat command line lalu di-encode base64, atau memakai generator dari sumber yang tepercaya.

#Minimalisasi Third-Party

Semakin sedikit script eksternal, semakin kecil risiko. Audit setiap script analitik, widget, dan font: apakah benar-benar dibutuhkan? Lazy-load script yang tidak kritikal sehingga hanya dimuat saat diperlukan. Buat daftar script yang berjalan di setiap halaman, lalu cek kembali secara berkala — script yang tidak terpakai sering kali luput dibersihkan.

Perhatikan juga aspek privasi: script pihak ketiga biasanya memproses data pengunjung dan memasang cookie. Pastikan daftar script yang diizinkan sejalan dengan kebijakan privasi situs, dan beri opsi bagi pengunjung untuk menolak pelacakan yang tidak esensial. Daftar script yang pendek sekaligus mempermudah audit privasi.

#Content Security Policy dan Secure Headers

#Apa Itu CSP

Content Security Policy memberi tahu browser sumber mana yang boleh memuat script, style, dan media. Dengan CSP yang ketat, serangan injeksi script akan diblokir meskipun berhasil menyusup. Contoh header:

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "default-src 'self'; script-src 'self' https://cdn.example.com"
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"

Kebijakan di atas hanya memperbolehkan script dari domain sendiri dan CDN yang disetujui. Header lain mencegah clickjacking dan sniffing tipe konten. Mulailah dengan CSP yang ketat, lalu tambahkan domain satu per satu sesuai kebutuhan produksi — dengan begitu kalian tahu persis sumber script yang beredar di situs.

#Plugin Pendukung

Untuk mempermudah, ada gatsby-plugin-security-headers yang menghasilkan secure headers secara otomatis di banyak platform. Konfigurasinya di gatsby-config.js seperti plugin biasa. Verifikasi hasil dengan curl:

curl -I https://situs-kalian.com

Perintah curl -I menampilkan response headers — periksa apakah Content-Security-Policy, X-Frame-Options, dan lainnya sudah muncul.

#Menangani Data Sensitif dan Konten Privat

#Jangan Simpan Secret di Client

Ingat aturan episode 8: variabel GATSBY_ ikut ter-bundle ke browser. Jangan pernah menaruh API key yang harus dirahasiakan di sana. Jika fitur butuh secret — misalnya memanggil API berbayar — lakukan lewat serverless function yang dipanggil dari client.

#Konten Privat

Konten yang hanya untuk pengguna tertentu tidak boleh dirender begitu saja ke HTML statis, karena akan terlihat di source code halaman. Dua pendekatan:

• Render halaman kosong dan muat konten di client setelah autentikasi.
• Gunakan SSR/DSG untuk halaman yang dibungkus proteksi di sisi build.

Pendekatan detail autentikasi dan konten gated akan dibahas menyeluruh di episode 13. Sementara itu, pastikan setiap endpoint yang mengembalikan data privat memvalidasi identitas di sisi server, bukan hanya mengandalkan proteksi di client.

#Penutup

Episode 12 menuntaskan best practice keamanan: memahami permukaan serangan situs statis, mengamankan script pihak ketiga dengan SRI, memasang CSP dan secure headers, serta menjaga data sensitif dan konten privat.

Inti yang harus dibawa pulang:

• Situs statis mengurangi serangan server, tapi XSS dan inject script tetap relevan.
• Sanitasi HTML dari pengguna sebelum render.
• SRI melindungi dari script CDN yang dimodifikasi.
• CSP membatasi sumber script, style, dan media.
• Periksa header dengan curl -I setelah deploy.
• Secret tidak pernah masuk ke bundle client; konten privat butuh autentikasi.

Di episode 13 selanjutnya kita akan membahas authentication dan protected content — pola client-side auth untuk Gatsby, integrasi Netlify Identity dan Firebase Auth, proteksi route, serta penyimpanan token dan rendering yang aman.