Belajar Microfrontend - Networking: CORS, Headers & Cross-Origin

#Pendahuluan

Ketika remote di-deploy ke CDN di origin berbeda (atau path berbeda), kita berhadapan dengan kebijakan same-origin browser dan CORS. Ini salah satu penyebab paling umum microfrontend tiba-tiba "tidak jalan" di produksi padahal di localhost mulus.

Mengapa penting? Karena microfrontend secara alami memuat resource dari banyak origin, dan memahami aturan browser di sini menyelamatkan kalian dari debugging yang menguras waktu. Episode ini membahas CORS, hosting origin, headers, dan keamanan eksposur.

#CORS untuk Remote

#Remote di Domain/Path Berbeda

Jika host di app.example.com memuat remote dari cdn.example.com, browser mengirim preflight/CORS check untuk fetch lintas-origin. Server CDN remote harus mengirim header yang benar:

http

Access-Control-Allow-Origin: https://app.example.com

Hanya izinkan origin host yang tepercaya, jangan * untuk data sensitif.

#Sama-Domain Hosting (Path) Meminimalkan CORS

Cara paling sederhana menghindari repot CORS: hosting remote di path domain yang sama dengan host — misal host di app.example.com dan remote di app.example.com/remote1/, app.example.com/remote2/. Karena same-origin, tidak ada CORS sama sekali; browser memperlakukan mereka sebagai satu origin.

Strategi	Origin	CORS
Cross-origin CDN	host `app.` + remote `cdn.`	Butuh CORS headers
Same-origin path	`app.example.com/remote1/`	Tidak perlu CORS

Same-origin sangat membantu saat keamanan/operasional network ketat. Trade-off-nya Anda kehilangan isolasi origin penuh.

#Headers & Caching

#`Cache-Control` untuk Hash Chunks

Untuk chunk yang namanya ber-content-hash (episode 14), gunakan caching agresif:

http

Cache-Control: public, max-age=31536000, immutable

#`Cross-Origin-Resource-Policy`

Untuk melindungi remote publik dari dibaca origin lain yang tidak diinginkan, terapkan CORP:

http

Cross-Origin-Resource-Policy: same-origin
# atau
Cross-Origin-Resource-Policy: cross-origin   # hanya jika memang perlu di-load cross-origin

CORP membatasi resource mana yang boleh dimuat oleh situs lain — lapisan pertahanan penting saat remote publik di CDN.

Warning

Jangan mencampur Access-Control-Allow-Origin dan CORP secara sembarangan — keduanya bekerja sama di kebijakan browser. Jika CORS mengizinkan (access) tetapi CORP melarang (no-corp), request akan ditolak. Uji kombinasi header di target produksi.

#Eksposur Host

#Remote Entry Tidak Boleh Expose API Sensitif

File remote entry hanya boleh berisi kode module — jangan meletakkan secret, token, atau API endpoint internal yang sensitif di dalamnya. Karena remote bisa dibaca siapa pun yang punya URL.

#Auth Tetap di API Gateway Server

Jangan pernah meletakkan logika autentikasi/permissi penting di client (remote). Auth & otorisasi untuk data sensitif tetap di API gateway server (backend), bukan di JavaScript yang bisa di-inspeksi. Client hanya menampilkan UI; server yang memutuskan akses.

#Pola Kunci (Referrer/Path Whitelist)

Jika remote di-hosting di CDN publik, pertimbangkan membatasi siapa yang boleh memuatnya:

Referrer whitelist — server CDN hanya merespons bila header Referer berasal dari host tepercaya.
Path/secret token — URL remote berisi token rahasia hanya host yang tahu (meski ini kurang tahan karena token bisa bocor dari URL).

Referrer whitelist lebih umum karena tidak menyimpan secret di URL.

#Penutup

Pada episode 15 ini, kalian telah memahami networking & cross-origin microfrontend.

Inti yang harus dibawa pulang:

Remote lintas-origin butuh CORS yang benar (Access-Control-Allow-Origin scoped, bukan *).
Same-origin path hosting meminimalkan CORS — pilihan paling sederhana saat network ketat.
Cache-Control: immutable untuk chunk hash; terapkan CORP untuk melindungi remote publik.
Remote entry tidak boleh expose API/secret sensitif; auth tetap di API gateway server.
Referrer/path whitelist bila remote di CDN publik.

Di episode 16 selanjutnya, kita akan membahas observability frontend multi-app — metrik per remote, error rate & error boundary capture, tracing request, SDK analytics singleton, dan KPI time-to-clickable. Pastikan networking kalian stabil!