Nuxt.js Güvenlik Rehberi: Kurumsal Uygulamalarda Tam Koruma
Yazar: Burak Balkı | Kategori: Security | Okuma Süresi: 10 dk
Bu derinlemesine inceleme rehberinde, Nuxt.js uygulamalarında güvenlik mimarisi, CSP yapılandırması, CSRF koruması, güvenli SSR yönetimi ve nuxt-security mod...
## Nuxt.js Güvenlik Mimarisi: SSR ve Client-Side Arasındaki Denge
**Nuxt.js**, Vue.js ekosisteminin en güçlü framework'lerinden biri olarak, hem sunucu taraflı render (SSR) hem de istemci taraflı çalışma (CSR) yeteneklerini birleştirir. Ancak bu hibrit yapı, beraberinde karmaşık güvenlik gereksinimlerini getirir. Bir Nuxt.js uygulamasında güvenlik, sadece ön yüzdeki formları doğrulamak değil, aynı zamanda **Nitro** sunucu motorunu, API rotalarını ve veri hidrasyon (hydration) süreçlerini de korumayı kapsar.
Modern web uygulamalarında en büyük riskler; veri sızıntıları, **Cross-Site Scripting (XSS)** ve **Cross-Site Request Forgery (CSRF)** saldırılarıdır. Nuxt.js, varsayılan olarak bazı korumalar sağlasa da, kurumsal ölçekte bir uygulama için derinlemesine savunma (defense-in-depth) stratejisi uygulanmalıdır.
## Nuxt Security Modülü ile Temel Yapılandırma
Nuxt ekosisteminde güvenliği sağlamanın en etkili yolu, topluluk tarafından geliştirilen ve standart haline gelen `nuxt-security` modülünü kullanmaktır. Bu modül, uygulamanıza otomatik olarak **HTTP Security Headers** ekler ve yaygın saldırı vektörlerini kapatır.
### Kurulum ve Aktivasyon
Öncelikle modülü projenize dahil etmelisiniz:
```bash
npm install nuxt-security
```
Ardından `nuxt.config.ts` dosyasına modülü ekleyerek temel yapılandırmayı gerçekleştirebilirsiniz:
```typescript
export default defineNuxtConfig({
modules: ['nuxt-security'],
security: {
headers: {
crossOriginEmbedderPolicy: 'require-corp',
contentSecurityPolicy: {
'upgrade-insecure-requests': true
}
},
rateLimiter: {
tokensPerInterval: 150,
interval: 'hour'
}
}
})
```
## Content Security Policy (CSP) Uygulama Stratejileri
**Content Security Policy (CSP)**, tarayıcının hangi kaynaklardan (script, stil, resim) veri yükleyebileceğini belirleyen bir güvenlik katmanıdır. XSS saldırılarını engellemede en kritik araçtır.
Nuxt.js projelerinde dinamik olarak nonce üretmek, inline scriptlerin güvenli bir şekilde çalışmasını sağlar. Aşağıdaki örnekte, sıkı bir CSP politikasının nasıl yapılandırılacağı gösterilmektedir:
```typescript
// nuxt.config.ts
export default defineNuxtConfig({
security: {
contentSecurityPolicy: {
'default-src': ["'self'"],
'script-src': ["'self'", "'nonce-{{nonce}}'", "https://trusted-scripts.com"],
'style-src': ["'self'", "'unsafe-inline'"],
'img-src': ["'self'", "data:", "https://images.remote.com"],
'font-src': ["'self'", "https://fonts.gstatic.com"]
}
}
})
```
> **Önemli Not:** CSP yapılandırması sırasında `'unsafe-inline'` kullanımını minimumda tutmak, saldırganların zararlı kod enjekte etmesini zorlaştırır.
## Cross-Site Request Forgery (CSRF) Engelleme Yöntemleri
CSRF saldırıları, kullanıcının haberi olmadan onun oturumu üzerinden istek atılmasını hedefler. Nuxt.js ve Nitro, bu tür saldırılara karşı **Double Submit Cookie** veya **Synchronizer Token Pattern** yöntemlerini kullanabilir.
`nuxt-security` modülü ile CSRF korumasını aktif etmek oldukça basittir:
```typescript
// nuxt.config.ts
export default defineNuxtConfig({
security: {
csrf: true
}
})
```
Sunucu tarafında (Nitro handler) CSRF token kontrolü şu şekilde işler:
```typescript
// server/api/protected.post.ts
export default defineEventHandler(async (event) => {
// CSRF token otomatik olarak nuxt-security tarafından doğrulanır
const body = await readBody(event);
return { status: 'success', data: body };
});
```
## Veri Doğrulama ve XSS Koruması: Input Sanitization
Kullanıcıdan alınan her türlü veri "kirli" kabul edilmelidir. Verilerin hem istemci tarafında hem de sunucu tarafında doğrulanması (validation) ve temizlenmesi (sanitization) gerekir.
**Zod** kütüphanesi ile sunucu rotalarında veri doğrulama örneği:
```typescript
import { z } from 'zod';
const contactSchema = z.object({
email: z.string().email(),
message: z.string().min(10).max(500)
});
export default defineEventHandler(async (event) => {
const result = await readValidatedBody(event, (body) => contactSchema.safeParse(body));
if (!result.success) {
throw createError({
statusCode: 400,
statusMessage: 'Geçersiz veri girişi'
});
}
return { message: 'Veri başarıyla alındı' };
});
```
## Runtime Config ve Çevre Değişkenlerinin Güvenli Yönetimi
Nuxt.js'de hassas verilerin (API anahtarları, DB şifreleri) istemci tarafına sızmaması hayati önem taşır. `runtimeConfig` özelliği, hangi değişkenlerin sadece sunucuda kalacağını, hangilerinin tarayıcıya açık olacağını belirler.
```typescript
// nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
// Sadece sunucu tarafında erişilebilir
apiSecret: process.env.NUXT_API_SECRET,
public: {
// Hem sunucu hem istemci tarafında erişilebilir
apiBase: '/api'
}
}
})
```
Uygulama içinde kullanım:
```typescript
// server/api/external.ts
export default defineEventHandler((event) => {
const config = useRuntimeConfig();
const secret = config.apiSecret; // Güvenli erişim
// ...
});
```
## Server-Side Rendering (SSR) Süreçlerinde Güvenlik Riskleri
SSR sırasında, sunucuda render edilen HTML içine kullanıcı verisi gömülürken dikkatli olunmalıdır. `v-html` direktifi, sanitize edilmemiş veriyle kullanıldığında XSS'e davetiye çıkarır.
| Tehdit | Açıklama | Çözüm |
| :--- | :--- | :--- |
| **XSS** | HTML içine zararlı script enjeksiyonu. | `v-text` kullanın veya veriyi sanitize edin. |
| **Hydration Mismatch** | Sunucu ve istemci verisinin uyuşmaması. | State yönetimini `useState` ile yapın. |
| **Memory Leak** | Sunucu tarafında temizlenmeyen global değişkenler. | Global state kullanımından kaçının. |
## API Güvenliği ve Proxy Yapılandırması
Nuxt 3 ile gelen Nitro motoru, API isteklerini proxy üzerinden yönlendirerek CORS (Cross-Origin Resource Sharing) sorunlarını aşmanıza ve gerçek API URL'inizi gizlemenize olanak tanır.
```typescript
// server/api/[...].ts
export default defineEventHandler(async (event) => {
const config = useRuntimeConfig();
const target = 'https://internal-api.company.com' + event.path.replace('/api', '');
return proxyRequest(event, target, {
headers: {
Authorization: `Bearer ${config.apiSecret}`
}
});
});
```
## Güvenli Cookie ve Session Yönetimi
Oturum yönetimi için kullanılan cookie'lerin `HttpOnly`, `Secure` ve `SameSite` flag'leri ile korunması gerekir. Bu, JavaScript'in cookie'ye erişmesini engelleyerek XSS tabanlı session theft riskini azaltır.
```typescript
// server/api/login.post.ts
export default defineEventHandler((event) => {
setCookie(event, 'auth_token', 'token_degeri', {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'strict',
maxAge: 60 * 60 * 24 // 1 gün
});
return { success: true };
});
```
## Nuxt.js Uygulamalarında Hata Yönetimi ve Bilgi Sızıntısını Önleme
Hata mesajları, saldırganlara sistem mimarisi hakkında ipucu verebilir. Üretim ortamında (production) detaylı hata loglarını kullanıcıya göstermemelisiniz.
```typescript
// server/middleware/error-handler.ts
export default defineEventHandler((event) => {
try {
// İşlemler
} catch (error) {
console.error(error); // Sunucuya logla
throw createError({
statusCode: 500,
statusMessage: 'Bir iç sunucu hatası oluştu.', // Genel mesaj ver
fatal: true
});
}
});
```
## Performans ve Güvenlik: Header Optimizasyonu
Güvenlik header'ları bazen tarayıcı cache mekanizmalarını etkileyebilir. Özellikle `Strict-Transport-Security` (HSTS) başlığı, uygulamanın her zaman HTTPS üzerinden yüklenmesini zorunlu kılar ve bu da hem güvenlik hem de SEO için olumludur.
```typescript
// nuxt.config.ts
security: {
headers: {
strictTransportSecurity: {
maxAge: 31536000,
includeSubdomains: true,
preload: true
}
}
}
```
## Nuxt.js Güvenlik Kontrol Listesi (Checklist)
- [ ] `nuxt-security` modülü yüklendi mi?
- [ ] CSP politikaları yapılandırıldı mı?
- [ ] Hassas veriler `runtimeConfig` (private) içinde mi?
- [ ] Tüm API rotalarında `rate limiting` aktif mi?
- [ ] Cookie'ler `httpOnly` ve `secure` olarak işaretlendi mi?
- [ ] Kullanıcı girişleri `Zod` veya benzeri bir kütüphane ile doğrulanıyor mu?
- [ ] `v-html` kullanımı denetlendi mi?
## Sık Sorulan Sorular
**1. Nuxt.js varsayılan olarak güvenli mi?**
Nuxt.js, Vue.js'in sağladığı otomatik HTML escaping gibi temel korumaları sunar ancak SSR ve API katmanı için ek yapılandırma (CSP, CSRF) gerektirir.
**2. nuxt-security modülü performansı düşürür mü?**
Hayır, bu modül temel olarak HTTP header'larını yönetir ve sunucu tarafında çok düşük bir overhead ile çalışır.
**3. Runtime config neden .env dosyasından daha iyidir?**
Runtime config, değişkenlerin tip güvenliğini sağlar ve hangi verinin tarayıcıya (public) hangi verinin sunucuya (private) gideceğini kesin olarak ayırır.
**4. SSR'da XSS nasıl önlenir?**
Sunucuda render edilen veriler mutlaka sanitize edilmeli ve tarayıcıya gönderilmeden önce güvenli hale getirilmelidir.
**5. CSRF saldırıları Nuxt'ta nasıl engellenir?**
`nuxt-security` modülünün sağladığı CSRF koruması ile her istekte benzersiz bir token kontrolü yapılarak engellenir.
## Özet ve Sonuç
Nuxt.js ile güvenli bir uygulama geliştirmek, framework'ün sunduğu araçları doğru yapılandırmaktan geçer. **Nitro** sunucu motorunun gücünü, `nuxt-security` modülünün sağladığı katmanlarla birleştirerek, kurumsal düzeyde korunmuş web uygulamaları inşa edebilirsiniz. Unutmayın, güvenlik bir varış noktası değil, sürekli devam eden bir süreçtir. Düzenli bağımlılık güncellemeleri ve güvenlik denetimleri ile uygulamanızı güncel tehditlere karşı korumaya devam etmelisiniz.