Belajar Astro - Security & Best Practices

#Pendahuluan

Situs statis memang tidak punya database di sisi server, tetapi bukan berarti kebal terhadap masalah keamanan. Episode 12 ini membahas lapisan keamanan yang wajib kalian pasang: secure headers, Content Security Policy (CSP), mitigasi cross-site scripting (XSS), dan pengamanan token.

Banyak serangan pada situs modern tidak menyerang server, melainkan pengunjung: skrip jahat yang disuntikkan lewat konten atau komentar, link phishing, atau pemuatan resource tidak dikenal. Pertahanan terbaik adalah mencegah di tingkat header dan sanitasi — bukan hanya mengandalkan satu framework.

Episode ini membekali kalian checklist keamanan yang bisa langsung diterapkan setelah deployment.

#Secure Headers dan Content Security Policy

#Memasang Secure Headers

Secure headers adalah HTTP response headers yang membatasi perilaku browser. Pasang lewat file platform hosting. Contoh di vercel.json:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
        { "key": "Strict-Transport-Security", "value": "max-age=31536000; includeSubDomains" }
      ]
    }
  ]
}

Header X-Content-Type-Options: nosniff mencegah browser menebak tipe file, dan Strict-Transport-Security memaksa koneksi HTTPS. Ketiganya menutup celah umum tanpa perubahan kode.

#Content Security Policy

CSP mengontrol sumber script, style, dan gambar yang boleh dimuat. Ini pertahanan terdepan terhadap XSS. Contoh CSP sederhana:

default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'

Kebijakan script-src 'self' hanya mengizinkan script dari domain sendiri — skrip dari sumber lain diblokir browser. Perluasan domain lain ditulis eksplisit:

script-src 'self' https://cdn.contoh.dev; img-src 'self' data:

Saat menambah domain CDN atau analytics, daftarkan di CSP. Setiap penyimpangan akan terlihat di console browser — mulailah dari kebijakan ketat lalu longgarkan hanya bila perlu.

#XSS Mitigation dan Sanitization Content

#Astro Mewaspadai XSS secara Default

Salah satu kekuatan Astro: semua output di-escape secara otomatis. Nilai seperti {variabel} dirender sebagai teks polos, bukan HTML. Ini menghalau injeksi skrip lewat data yang tidak tepercaya.

#Sanitasi Konten dari Sumber Eksternal

Konten yang berasal dari CMS atau input pengguna harus disanitasi sebelum dirender. Astro menyediakan helper render() untuk konten collection yang sudah aman. Untuk HTML mentah dari sumber lain, gunakan library sanitasi:

Sanitasi HTML sebelum dirender

import sanitizeHtml from "sanitize-html";
 
const htmlAman = sanitizeHtml(kontenDariCms, {
  allowedTags: ["b", "i", "em", "strong", "a"],
  allowedAttributes: { a: ["href", "target"] },
});

Fungsi sanitizeHtml(konten, { allowedTags }) membuang semua tag yang tidak diizinkan. Dengan daftar putih (whitelist) seperti di atas, hanya formatting dasar dan link yang lolos.

#Secure API Calls dan Token Handling

#Token Hanya di Sisi Server

Token dan API key tidak boleh masuk bundle klien. Ingat aturan episode 8: hanya variabel PUBLIC_ yang terkirim ke browser. Token rahasia dipakai di build time atau di endpoint server:

Token server di frontmatter

const res = await fetch("https://api.contoh.dev/data", {
  headers: { Authorization: `Bearer ${import.meta.env.API_TOKEN}` },
});

import.meta.env.API_TOKEN hanya ada di proses build atau runtime server — tidak pernah ter-expose ke HTML. Pastikan variabel itu di-set di environment CI/CD, bukan di commit.

#Melindungi Konten Sensitif di Static Sites

Konten sensitif — seperti dashboard internal — tidak boleh dirender statis begitu saja. Semua orang yang tahu URL bisa membacanya. Solusi yang tepat: halaman tersebut dirender di server dengan autentikasi (episode 13), atau dipindahkan ke aplikasi terpisah. Untuk situs statis, "sembunyikan lewat URL aneh" bukan keamanan.

#Checklist Keamanan Pra-Deployment

#Periksa Sebelum Meluncur

Sebelum deploy ke produksi, jalankan checklist ini:

curl -sI https://situs-kalian.dev | grep -i -E "x-content-type-options|strict-transport|content-security"

Perintah curl -sI mengambil header respons dan memfilter yang berkaitan dengan keamanan. Jika baris kosong, header belum terpasang.

#Audit Berkelanjutan

Setelah checklist terpenuhi, jadikan pemeriksaan sebagai bagian rutin: cek header setiap deploy, tinjau ulang CSP saat menambah skrip pihak ketiga, dan selalu sanitasi input. Keamanan bukan langkah sekali jalan, melainkan proses berkelanjutan.

#Penutup

Episode 12 mempersenjatai kalian dengan praktik keamanan: secure headers dan CSP, mitigasi XSS lewat escaping default dan sanitasi konten, pengamanan token agar tidak bocor ke klien, serta kesadaran bahwa konten sensitif butuh autentikasi server, bukan URL rahasia.

Inti yang harus dibawa pulang:

• Pasang secure headers dan CSP sebelum deployment.
• Astro me-escape semua output secara default — manfaatkan itu.
• Sanitasi HTML dari sumber eksternal dengan daftar putih tag.
• Token rahasia hanya di build time atau runtime server.
• Konten sensitif membutuhkan autentikasi, bukan sekadar URL rahasia.
• Periksa header dengan curl -sI setelah setiap deployment.

Di episode 13 selanjutnya kita akan membahas authentication dan protected content: pola autentikasi untuk situs statis, client-side auth dengan astro-auth atau provider eksternal, melindungi rute dan konten berbayar, serta manajemen session dan secure cookies. Konten sensitif kalian akan memiliki pintu masuk yang aman.