Belajar Microfrontend - Isolasi, Sandbox & Keamanan Remote

#Pendahuluan

Microfrontend berarti menjalankan kode dari banyak tim, banyak bundle, dan (mungkin) banyak origin dalam satu halaman. Ini memperluas permukaan keamanan: satu remote yang jahat atau terganggu bisa berdampak ke seluruh aplikasi jika tidak diisolasi dengan benar.

Mengapa penting? Karena di arsitektur ini, "security boundary" tidak hanya di server — ia juga hidup di browser antara host dan remote. Episode ini membahas isolasi global scope, CSP, supply chain, guardrails input, dan strategi error handling.

#Isolasi Global Scope

#Sandbox Antar Remote

Idealnya remote tidak boleh merusak window global (variabel global, listener global, style global). Jika remote lain bergantung padanya, satu remote yang "liar" bisa merusak yang lain.

Opsinya mulai dari disiplin kode hingga teknik isolasi:

• Kontrak props/events — remote hanya berinteraksi lewat props dan event, bukan menyentuh global.
• Web Components / shadow DOM — sandbox CSS & DOM (dibahas episode 8).
• Plugin/vite sandbox — alat yang membungkus remote.

#Kontrak Antarmuka

Aturan emas: remote berinteraksi lewat kontrak (props masuk, event keluar), bukan mengakses internal host atau global. Ini menjaga isolasi sekaligus mempermudah penggantian remote.

#CSP & XSS

Content-Security-Policy tetap berlaku — bahkan makin penting saat remote dimuat dari CDN. Secara umum:

Content-Security-Policy: default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline'; ...

Hanya izinkan origin yang tepercaya untuk script. Karena remote dari CDN, pastikan CDN Anda masuk whitelist script-src. Pertimbangkan juga SRI (Subresource Integrity) — browser memverifikasi hash chunk sebelum mengeksekusi:

<script src=".../CatalogApp.js" integrity="sha384-..." crossorigin="anonymous"></script>

SRI melindungi dari chunk yang dirusak di CDN (supply chain).

#Remote dari Supply Chain Terpercaya

Karena remote dimuat dari URL eksternal, origin remote harus tepercaya:

• Jangan memuat remote dari origin yang tidak dikenal.
• CORS harus diatur benar (episode 15).
• Pertimbangkan Cross-Origin-Resource-Policy untuk membatasi siapa yang boleh membaca resource remote.
• Hindari cross-protocol di luar kendali.

#Guardrails

#Validasi Input Remote (Props) di Host

Karena prop bisa datang dari sumber luar, host harus memvalidasi input yang masuk ke remote. Jangan meneruskan data mentah yang tidak dibersihkan — terapkan validation di batas antar remote.

#Auth di Host Tidak Dibagikan ke Remote Raw

Seperti episode 7, jangan membagikan token raw ke semua remote. Berikan remote hanya data yang dibutuhkan; auth API ditangani host/level gateway.

#Error Boundary Global

Gagal di satu remote tidak boleh menggagalkan seluruh halaman. Bungkus setiap remote dalam ErrorBoundary global di host:

<GlobalErrorBoundary fallback={<RemoteDown name="catalog" />}>
  <CatalogApp />
</GlobalErrorBoundary>

Dengan ini, remote yang error menampilkan fallback UI (bukan layar putih), dan bagian lain halaman tetap sehat. Ini menyinggung fallback (dengan episode 9) karena memang sangat penting demi ketahanan.

#Penutup

Pada episode 13 ini, kalian telah memahami isolasi & keamanan remote.

Inti yang harus dibawa pulang:

• Isolasi global scope: remote lewat kontrak props/events; web components untuk sandbox maksimal.
• CSP & XSS: whitelist script-src + SRI untuk chunk CDN.
• Supply chain: hanya load remote dari origin tepercaya; CORS & CORP benar; hindari cross-protocol.
• Guardrails: validasi props di host; jangan bagikan token raw; auth di gateway.
• ErrorBoundary global: satu remote gagal tidak mematikan halaman.

Di episode 14 selanjutnya, kita akan membahas deployment & CDN multiple remote — model deploy terpisah, versioned manifests, blue-green swap, caching immutable, rollback, dan pipeline CI/CD per remote. Pastikan keamanan kalian terkunci!