FluentStack

Env Leakage

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 19: Security BasicsAdvanced55 menitBahasa Indonesia

Env Leakage

Membedakan configuration browser yang memang public dari secret yang hanya boleh hidup pada server environment.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan public browser configuration dan server-only secret
  • Memahami bahwa NEXT_PUBLIC_ dapat membuat value tersedia di browser bundle
  • Mengenali configuration yang tidak boleh diekspos client
  • Mengumpulkan evidence leakage tanpa menyalin credential
Environment VariablesNext.jsSecrets ManagementClient Boundaries

Isi lesson

6 blok
  1. 1.
    Prefix public menentukan browser dapat melihat valueBelum selesaiWajib
  2. 2.
    Klasifikasi nama configuration tanpa valueBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Secret exposure adalah incident, bukan bug copyBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Prefix public menentukan browser dapat melihat value

Wajib

Environment variable memisahkan configuration dari source code, tetapi tidak semua variable aman untuk browser. Dalam Next.js, variable dengan prefix NEXT_PUBLIC_ dapat di-inline ke JavaScript yang dikirim ke browser saat build. Prefix itu hanya untuk configuration yang memang dirancang public, seperti app origin atau publishable project identifier yang tetap tunduk pada policy backend. Jangan memberi prefix public pada service role key, database URL, signing secret, private API credential, atau value yang dapat menjalankan privileged operation.

Secret server-only hanya dipakai Server Component, Route Handler, Server Action, atau service layer. Menyimpan value di .env.local tidak cukup bila code client mengeksposnya melalui bundle, response, log, error message, atau repository. Saat menduga leakage, catat nama variable, runtime yang memakainya, lokasi exposure, environment, dan owner yang perlu memeriksa atau merotasi credential. Jangan menyalin value-nya ke issue.

Bagian ini memengaruhi progres lesson.

Klasifikasi nama configuration tanpa value

Wajib
ts
const environmentBoundary = {
  NEXT_PUBLIC_APP_ORIGIN: "public browser configuration",
  NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY: "public browser configuration with RLS",
  SUPABASE_SERVICE_ROLE_KEY: "server-only secret",
  DATABASE_URL: "server-only secret",
};

Contoh memakai nama variable dan kategori saja. Publishable configuration tidak memberi browser privileged access; API dan RLS tetap menegakkan policy. Service role key serta database URL tidak boleh berada di Client Component, public log, atau source control.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Classify course environment boundaries

Klasifikasikan configuration tanpa memakai value credential atau runtime environment.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis4 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Mana perubahan yang paling berisiko pada Next.js app?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Secret exposure adalah incident, bukan bug copy

Jangan cukup menyembunyikan secret dari UI atau log. Hentikan exposure, beri tahu owner sesuai proses team, rotasi credential bila perlu, dan audit pemakaian sesuai akses yang sah. Frontend contributor tidak perlu membuka atau menyebarkan value untuk membuktikan risk.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • NEXT_PUBLIC_ berarti value dapat tersedia di browser bundle.
  • Publishable configuration berbeda dari secret yang memberi privileged access.
  • Secret tidak boleh masuk Client Component, response, log public, atau repository.
  • Evidence leakage mencatat lokasi dan impact tanpa credential value.
  • Berikutnya, kita membaca trade-off lokasi token dan session evidence.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Prefix public menentukan browser dapat melihat value.

Memuat progresReview module