Frontend'de kullanılan ortam değişkenleri neden gizli değildir? Build-time ve runtime config farkı nedir?

Frontend kodu kullanıcının tarayıcısında çalışır. Build sırasında koda gömülen her değişken JS bundle'ın içine düz metin olarak yazılır ve herkes DevTools'tan okuyabilir. Bu yüzden frontend'de secret olmaz.

// Next.js: NEXT_PUBLIC_ öneki olan değişken bundle'a gömülür
const apiUrl = process.env.NEXT_PUBLIC_API_URL; // public, sorun değil

// Vite: VITE_ öneki olanlar import.meta.env ile açığa çıkar
const key = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY; // publishable key, sorun değil

Ne frontend'e konabilir, ne konamaz

• Konabilir: API base URL, Stripe publishable key, Google Maps key (domain kısıtlamalı), analytics ID.
• Konamaz: veritabanı şifresi, Stripe secret key, OpenAI API key, JWT imzalama anahtarı. Bunlar sadece backend'de veya serverless fonksiyonda tutulur; frontend bu servislere backend üzerinden erişir.

Build-time ve runtime config

• Build-time: değer build sırasında koda yazılır. Değeri değiştirmek için yeniden build gerekir. Aynı image'ı staging ve production'da kullanmayı zorlaştırır.
• Runtime: değer uygulama açılırken okunur. Örneğin sunucu /config.json sunar veya SSR sırasında HTML'e window.__CONFIG__ basılır. Böylece "bir kez build et, her ortama deploy et" mümkün olur.

Sık yapılan hata: secret bir değişkene yanlışlıkla NEXT_PUBLIC_ öneki vermek. Bu durumda anahtar artık sızmış kabul edilir ve hemen rotate edilmelidir.