SSL & keamanan cepat-aman di edge

Begitu domain ada di Cloudflare, tugas berikutnya membuatnya cepat dan aman secara default. Kabar baiknya: seluruh baseline keamanan di bawah ini gratis, dan ia berlapis — tiap request dari internet diperiksa di edge Cloudflare, lapis demi lapis, sebelum ia sampai ke situs Anda. Inilah Bagian 4 dari seri deploy, dan ini soal lapisan keamanannya.

Bayangkan sebagai tumpukan gerbang. Sebuah request jatuh menembus tiap gerbang — dipaksa ke HTTPS, dienkripsi, disaring dari serangan dan bot, lalu akhirnya diberi security header Anda — dan hanya request yang bersih yang sampai ke halaman.

Di bawah gerbang terakhir ada situs & form Anda. Mari turuni tumpukannya.

HTTPS & TLS — enkripsi semuanya

TLS (Transport Layer Security, nama modern dari SSL) adalah enkripsi di balik gembok itu — ia mengacak lalu lintas agar tak ada pihak di antara pengunjung dan situs yang bisa membaca atau mengutak-atiknya. Tiga sakelar gratis melakukan pekerjaan beratnya:

• Always Use HTTPS — kalau ada yang membuka http://pangaea.id, Cloudflare mengalihkannya ke versi https://. Pintu yang tak aman ditutup; pengunjung selalu berjalan terenkripsi.
• Mode TLS → Full (strict) — ini mengatur cara Cloudflare berbicara ke server Anda (origin). "Full (strict)" mengenkripsi kedua ruas — browser↔edge dan edge↔origin — dan memastikan sertifikat origin itu asli dan tepercaya. Mode yang lebih lemah ("Flexible", "Full") membiarkan ruas kedua tak terenkripsi atau tak terverifikasi; jangan dipakai.
• Minimum TLS 1.2, dan aktifkan TLS 1.3 — tolak versi protokol yang lama dan rusak, utamakan yang terbaru dan tercepat.

HSTS — "selalu jangkau saya lewat HTTPS saja"

HSTS (HTTP Strict Transport Security) adalah header yang menyuruh browser satu hal: selalu jangkau saya lewat HTTPS saja, bahkan kalau ada yang mengetik http:// atau mengklik tautan lama. Browser mengingatnya dan otomatis meng-upgrade tiap request berikutnya — tak ada lagi lompatan pertama yang tak aman untuk disadap.

Cukup satu header di blok /*:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

max-age=31536000 adalah satu tahun (dalam detik); includeSubDomains memperluas aturan ke tiap subdomain; preload mendaftarkan Anda ke daftar bawaan browser.

Record CAA — melindungi perpanjangan otomatis sertifikat Anda

Inilah lapisan yang paling jarang didengar orang, dan justru ia yang diam-diam merusak gembok.

Record CAA (Certification Authority Authorization) adalah record DNS kecil yang mendaftar Certificate Authority mana yang boleh menerbitkan sertifikat HTTPS untuk domain Anda. Sebuah Certificate Authority (CA) adalah salah satu perusahaan tepercaya yang mengeluarkan sertifikat HTTPS — Let's Encrypt, Google Trust Services, DigiCert, dan seterusnya. Record CAA itu sebuah whitelist: kalau sebuah CA tak ada di sana, browser tak akan menghormati sertifikat yang ia terbitkan, dan CA yang patuh bahkan tak akan mencoba.

Kenapa ini penting

Cloudflare memperbarui otomatis sertifikat Universal SSL situs Anda kira-kira tiap 90 hari — diam-diam, di latar. Inilah jebakannya: kalau sebuah record CAA ada tapi melewatkan satu CA yang dipakai Cloudflare, perpanjangan otomatis berikutnya gagal. Anda tak akan sadar di hari pertama. Lalu sertifikat lama kedaluwarsa, dan tiba-tiba tiap pengunjung melihat gembok rusak dan peringatan "Tidak aman" yang menakutkan. Record CAA yang Anda tambahkan demi keamanan malah jadi hal yang menjatuhkan situs.

Langkah amannya

Inilah set CAA live untuk pangaea.id (baris letsencrypt.org milik kami; sisanya diisi otomatis Cloudflare):

@   CAA   0 issue     "letsencrypt.org"
@   CAA   0 issuewild "letsencrypt.org"
@   CAA   0 issue     "pki.goog; cansignhttpexchanges=yes"
@   CAA   0 issuewild "pki.goog; cansignhttpexchanges=yes"
@   CAA   0 issue     "ssl.com"
@   CAA   0 issuewild "ssl.com"
@   CAA   0 issue     "sectigo.com"
@   CAA   0 issuewild "sectigo.com"
@   CAA   0 issue     "comodoca.com"
@   CAA   0 issuewild "comodoca.com"
@   CAA   0 issue     "digicert.com; cansignhttpexchanges=yes"
@   CAA   0 issuewild "digicert.com; cansignhttpexchanges=yes"
@   CAA   0 iodef     "mailto:[email protected]"

Membaca kolomnya:

• @ — apex domain (pangaea.id itu sendiri).
• 0 — sebuah flag; 0 berarti "non-critical" (CA yang tak memahami record-nya tetap boleh lanjut).
• issue — siapa yang boleh menerbitkan sertifikat biasa.
• issuewild — siapa yang boleh menerbitkan sertifikat wildcard (*.pangaea.id). Yang ini wajib: sertifikat edge Cloudflare adalah wildcard, jadi set CAA tanpa issuewild akan memblok perpanjangan.
• iodef — ke mana sebuah CA mengirim email laporan kalau ada yang meminta sertifikat yang dilarang kebijakan (mailto:[email protected]).

Verifikasi

Tanya langsung ke DNS record CAA apa yang ada:

dig CAA pangaea.id +short

Dan pastikan siapa yang sebenarnya menerbitkan sertifikat live:

openssl s_client -connect www.pangaea.id:443 -servername www.pangaea.id </dev/null 2>/dev/null | openssl x509 -noout -issuer

Status di pangaea.id: terkonfigurasi dan terverifikasi. Sertifikat live diterbitkan oleh Google Trust Services, dan perpanjangan terlindungi karena CA Cloudflare terotorisasi otomatis di set CAA di atas.

Security header — instruksi di tiap response

Header adalah instruksi singkat yang Cloudflare tempelkan ke tiap response, menyuruh browser berperilaku aman. Empat header murah menutup lubang yang umum:

• X-Content-Type-Options: nosniff — hentikan browser dari menebak tipe sebuah file (yang bisa mengubah gambar yang diunggah jadi script yang dieksekusi). Ia harus memercayai tipe yang dideklarasikan saja.
• X-Frame-Options: DENY — larang siapa pun menyematkan situs di dalam <iframe>, yang mematahkan "clickjacking" (frame tersembunyi yang menipu pengguna agar mengklik).
• Referrer-Policy: strict-origin-when-cross-origin — saat pengunjung mengklik keluar ke situs lain, jangan bocorkan URL lengkap asalnya; bagikan origin-nya saja.
• Permissions-Policy: geolocation=(), microphone=(), camera=() — matikan fitur browser yang tak pernah dipakai situs, supaya tak ada script yang bisa meminta lokasi, mikrofon, atau kamera.

CSP — allowlist script

Yang terbesar adalah CSP (Content-Security-Policy): sebuah allowlist tentang dari mana script, style, font, dan gambar boleh dimuat. Apa pun yang tak ada di daftar ditolak — jadi resource yang disuntikkan atau jahat sama sekali tak pernah jalan. Inilah pertahanan tunggal terkuat terhadap cross-site scripting. Inilah policy live-nya:

default-src 'self'; script-src 'self' {{INLINE_SCRIPT_HASHES}} https://static.cloudflareinsights.com https://www.googletagmanager.com; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data: https://www.googletagmanager.com https://*.google-analytics.com; connect-src 'self' https://cloudflareinsights.com https://api.web3forms.com https://www.googletagmanager.com https://*.google-analytics.com https://*.analytics.google.com; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; object-src 'none'; upgrade-insecure-requests

Secara sederhana, beberapa directive kuncinya:

• default-src 'self' — secara default, hanya muat hal dari origin kami sendiri. Tiap directive lain menyempit dari sini.
• font-src 'self' — font dimuat hanya dari server kami sendiri. Situs meng-host sendiri font-nya, jadi tak ada font CDN yang perlu diizinkan — allowlist-nya tetap ketat.
• connect-src … https://api.web3forms.com … — contact form mengirim ke Web3Forms, jadi endpoint itu satu-satunya yang diizinkan untuk request jaringan; selebihnya diblok.
• frame-ancestors 'none' — tak ada yang boleh mem-frame situs (pasangan modern dari X-Frame-Options).
• object-src 'none' — tak ada objek Flash/plugin, sama sekali.
• upgrade-insecure-requests — diam-diam menulis ulang sub-resource http:// yang nyasar jadi https://.

Bagian menariknya script-src. Tak ada 'unsafe-inline' untuk script — yang biasanya membiarkan sembarang inline <script> jalan. Sebagai gantinya, satu-satunya inline script situs (bootstrap vite-react-ssg dan snippet gtag GA4) dipancang dengan hash SHA-256 per-build. Sebuah langkah build, apps/labs/scripts/csp-hash.mjs, men-hash script-script persis itu dan menulis hash-nya ke _headers, mengganti placeholder {{INLINE_SCRIPT_HASHES}}. Jadi hanya script persis itu yang jalan — ubah satu karakter saja dan hash-nya tak lagi cocok lalu script ditolak. Allowlist-nya tak akan pernah bergeser diam-diam.

Anti-bot & firewall, secara sederhana

Tiga sakelar terakhir menjauhkan penyalahgunaan otomatis dari situs, semuanya gratis:

• Bot Fight Mode — sakelar satu klik yang menantang bot yang jelas (scraper, brute-forcer) sebelum mereka mencapai halaman Anda. Ia sudah mengecualikan search dan AI crawler yang terverifikasi, jadi Google, Bing, dan bot answer-engine tetap meng-index situs seperti biasa.
• WAF (Web Application Firewall) — managed ruleset gratis Cloudflare memblok pola serangan yang dikenal (SQL injection, percobaan exploit umum) di edge, sebelum menyentuh aplikasi Anda. Ini baseline yang tinggal Anda nyalakan.
• Turnstile — pemeriksaan "apakah Anda manusia?" gratis dan ramah-privasi dari Cloudflare — pengganti CAPTCHA modern tanpa teka-teki. Pasang di contact form saja, jangan di seluruh situs, supaya pengunjung asli yang menjelajah halaman tak pernah melihat tantangan — hanya yang mengirim form yang diverifikasi.

Contekan

Berikutnya

Ini Bagian 4 (keamanan) dari seri deploy. Sisa jalurnya: Bagian 1 · Arahkan domain ke Cloudflare, Bagian 2 · CI/CD dengan GitHub Actions → Pages, Bagian 3 · Redirect Root → www, dan saudara caching-nya — HTTP caching di CDN Cloudflare. Cerita bahasa-sederhana kenapa kami melapisinya seperti ini ada di catatan build kami: Bikin cepat dan aman.

Sources

1. Cloudflare — Mode enkripsi SSL/TLS: Full (strict)
2. Cloudflare — Record CAA dan penerbitan sertifikat
3. MDN — Content Security Policy (CSP)