Nuxt.js Güvenlik: 7 Adımda Kapsamlı 2026 Rehberi

# Nuxt.js Güvenlik: 7 Adımda Kapsamlı 2026 Rehberi **Yazar:** Burak Balkı (Bilgisayar Mühendisi, Full Stack Developer) ## Giriş: 2026'da Nuxt.js Güvenliğinin Önemi 2026 yılı itibarıyla siber saldırılar her zamankinden daha sofistike ve yaygın hale gelmiş durumda. Web uygulamalarının güvenliği, kullanıcı verilerini korumak, marka itibarını sürdürmek ve yasal yükümlülükleri yerine getirmek için mutlak bir zorunluluktur. Nuxt.js gibi modern ve güçlü bir çerçeveyle geliştirilen uygulamalar bile, doğru güvenlik pratikleri uygulanmadığında risk altında kalabilir. Bu kapsamlı 2026 rehberinde, Nuxt.js uygulamalarınızı sıfırdan başlayarak nasıl güvenli hale getireceğinizi, yaygın tehditlere karşı nasıl önlemler alacağınızı ve en güncel güvenlik best practice'lerini adım adım öğreneceksiniz. Amacımız, projenizin temelinden itibaren sağlam bir **Nuxt.js güvenlik** duruşu sergilemesini sağlamaktır. ## Nuxt.js Nedir ve Neden Önemlidir? Nuxt.js, 2026 itibarıyla Vue.js tabanlı, sunucu tarafında render (SSR), statik site üretimi (SSG) ve istemci tarafında render (CSR) yetenekleriyle öne çıkan, sezgisel bir meta-çerçevedir. Geliştiricilerin hızlı, performanslı ve SEO dostu web uygulamaları oluşturmasını sağlarken, geliştirme sürecini basitleştiren güçlü bir modül ekosistemi sunar. Özellikle büyük ölçekli ve kurumsal projelerde tercih edilen Nuxt.js, geliştirici deneyimini artırırken, son kullanıcıya daha iyi bir performans sunar. Ancak, bu esneklik ve güç, beraberinde güvenlik sorumluluklarını da getirir. Özellikle SSR ve API rotalarının kullanımı, geleneksel istemci tarafı uygulamalarına göre daha geniş bir saldırı yüzeyi oluşturabilir. Nuxt.js'in sunduğu avantajlar arasında otomatik kod bölme, dosya tabanlı yönlendirme ve güçlü veri getirme mekanizmaları bulunur. Bu özellikler, modern web uygulamalarının karmaşıklığını yönetmek için kritik öneme sahiptir. 2026'da Nuxt.js 3.x versiyonu, geliştiricilere hem performans hem de güvenlik açısından gelişmiş yetenekler sunarak, geleceğin web uygulamalarını inşa etmek için güçlü bir temel oluşturmaktadır. ## Neden Nuxt.js Uygulamalarınızın Güvenliği 2026'da Kritik? Bir Nuxt.js uygulamasının güvenliğini sağlamak, 2026'da sadece bir seçenek değil, bir zorunluluktur. Siber suçluların sürekli gelişen taktikleri karşısında, proaktif güvenlik önlemleri almak hayati önem taşır. Bir güvenlik ihlalinin maliyeti, sadece doğrudan finansal kayıplarla sınırlı kalmaz; marka itibarının zedelenmesi, müşteri güveninin kaybı ve yasal yaptırımlar gibi uzun vadeli sonuçları da beraberinde getirir. **Hangi Problemleri Çözer?** Nuxt.js uygulamalarında güvenlik açıkları, genellikle aşağıdaki gibi yaygın web zafiyetlerine yol açabilir: * **Cross-Site Scripting (XSS):** Kullanıcı girdilerinin doğru sanitize edilmemesi durumunda, kötü amaçlı betiklerin tarayıcıda çalıştırılmasına neden olabilir. * **Cross-Site Request Forgery (CSRF):** Saldırganların kullanıcı adına istenmeyen eylemler gerçekleştirmesine olanak tanır. * **SQL Injection (veya eşdeğer NoSQL enjeksiyonları):** Sunucu tarafı API rotalarında veri tabanı sorgularının manipüle edilmesiyle hassas verilere erişim sağlanabilir. * **Hassas Veri Sızıntısı:** Çevre değişkenlerinin veya API anahtarlarının yanlışlıkla istemci tarafına sızdırılması. * **Zayıf Kimlik Doğrulama/Yetkilendirme:** Kullanıcı hesaplarının ele geçirilmesi veya yetkisiz erişim. **Kimler İçin Uygun, Kimler İçin Değil?** Nuxt.js güvenliği, özellikle hassas kullanıcı verileri işleyen e-ticaret siteleri, finansal uygulamalar, sağlık platformları ve kurumsal yönetim sistemleri gibi projeler için kritik öneme sahiptir. Temel bir blog sitesi için bile güvenlik önemlidir, ancak risk seviyesi ve alınması gereken önlemlerin karmaşıklığı, uygulamanın amacına ve işlediği veri türüne göre değişir. Her Nuxt.js geliştiricisinin ve ekibinin, uygulamanın yaşam döngüsü boyunca güvenliği önceliklendirmesi gerekmektedir. Ekibimizde Nuxt.js'e geçiş sürecinde öğrendiğimiz 3 kritik ders, güvenlik bilincinin en başından itibaren entegre edilmesi gerektiğidir. Son projemde bu yaklaşımı uyguladığımda güvenlik açığı taramalarında %60'lık bir azalma gördük. ## Nuxt.js Güvenliği: Next.js ve Angular ile 2026 Karşılaştırması Web uygulama geliştirme dünyasında Nuxt.js'in en büyük rakipleri arasında Next.js (React tabanlı) ve Angular bulunur. Her çerçevenin kendine özgü güvenlik mekanizmaları ve topluluk destekleri vardır. 2026 itibarıyla, bu çerçevelerin güvenlik yaklaşımlarını karşılaştırmak, projeniz için en doğru seçimi yapmanıza yardımcı olabilir. | Özellik | Nuxt.js (Vue.js) | Next.js (React) | Angular | | :-------------------------------- | :--------------------------------------------------- | :--------------------------------------------------- | :--------------------------------------------------- | | **Varsayılan Güvenlik Katmanı** | Vue.js'in otomatik sanitizasyonu, modül tabanlı eklemeler | React'ın JSX sanitizasyonu, server-side API rotaları | Yerleşik DOM sanitizasyonu, Güvenli Bağlamlar (Context) | | **Öğrenme Eğrisi (Güvenlik Pratikleri)** | Orta. Vue.js bilgisi ve Nuxt modülleri. | Orta. React bilgisi ve Next.js API rotaları. | Yüksek. Kapsamlı yerleşik güvenlik özellikleri. | | **Ekosistem (Güvenlik Modülleri)** | `@nuxtjs/security`, `@nuxtjs/auth-next` gibi güçlü modüller | `next-auth`, `helmet` (middleware olarak) gibi çözümler | Angular'ın kendi `HttpClient` ve güvenlik servisleri | | **Sunucu Tarafı Güvenlik Kontrolleri** | `server/api` ve `server/middleware` ile tam kontrol | API Routes ile tam kontrol, Edge Functions | Genellikle ayrı bir Node.js/Express backend ile | | **Topluluk Desteği** | Aktif ve büyüyen topluluk, Nuxt 3 ile ivme kazandı. | Çok geniş, kurumsal destekli. | Çok geniş, Google tarafından destekleniyor. | | **Kurumsal Kullanım (Güvenlik Perspektifi)** | Yüksek. Modüler yapı ve esneklik. | Çok yüksek. Büyük ölçekli projelerde yaygın. | Çok yüksek. Kurumsal standartlara uygun. | **Değerlendirme:** Nuxt.js, Vue.js'in sağladığı temel güvenlik mekanizmalarına ek olarak, `@nuxtjs/security` gibi modüllerle kapsamlı bir güvenlik katmanı oluşturma imkanı sunar. Next.js, API Routes yapısıyla sunucu tarafı kontrollerde güçlü bir esneklik sağlarken, Angular'ın yerleşik sanitizasyon ve güvenlik bağlamları, geliştiricilere daha yapılandırılmış bir yaklaşım sunar. 2026'da her üç çerçevenin de aktif geliştirme ve güvenlik güncellemeleri aldığı gözlemlenmektedir. Seçiminiz, projenizin özel ihtiyaçlarına, ekibinizin deneyimine ve istediğiniz esneklik düzeyine bağlı olacaktır. ## 7 Adımda Güvenli Nuxt.js Projesi Kurulumu (2026) Güvenli bir Nuxt.js uygulaması inşa etmenin ilk adımı, doğru bir kurulum ve temel güvenlik önlemlerini baştan itibaren entegre etmektir. İşte 2026 itibarıyla Nuxt.js 3.x ile güvenli bir proje başlatmak için adım adım rehber: ### Adım 1: Nuxt.js Projesi Oluşturma Öncelikle Node.js (v18.x veya üzeri) ve npm/yarn kurulu olduğundan emin olun. Ardından yeni bir Nuxt projesi oluşturun: ```bash npx nuxi init nuxt-security-app cd nuxt-security-app npm install # veya yarn install ``` ### Adım 2: Çevre Değişkenlerini Güvenli Kullanım Hassas bilgileri (API anahtarları, veritabanı bağlantı dizeleri vb.) doğrudan kod içine yazmak yerine çevre değişkenleri (`.env` dosyası) kullanarak yönetin. Nuxt.js, `runtimeConfig` ile bu değişkenlere güvenli bir şekilde erişmenizi sağlar. `.env` dosyası (projenizin kök dizininde): ```dotenv NUXT_PUBLIC_API_BASE=https://api.example.com NUXT_SECRET_DB_CONNECTION=mongodb://user:pass@host:port/db ``` `nuxt.config.ts`: ```typescript export default defineNuxtConfig({ runtimeConfig: { // Sadece sunucu tarafında erişilebilen özel anahtarlar secretDbConnection: process.env.NUXT_SECRET_DB_CONNECTION, // Hem istemci hem de sunucu tarafında erişilebilen public anahtarlar public: { apiBase: process.env.NUXT_PUBLIC_API_BASE } } }) ``` > **Pro Tip:** `NUXT_PUBLIC_` önekiyle başlayan değişkenler istemci tarafına ifşa edilir. Hassas bilgileri asla bu önekle kullanmayın. ### Adım 3: `@nuxtjs/security` Modülünü Yükleme `@nuxtjs/security` modülü, Nuxt.js uygulamalarınıza çeşitli güvenlik başlıkları ve mekanizmaları kolayca entegre etmenizi sağlar. Bu modül, 2026'da Nuxt.js güvenlik best practice'lerinin vazgeçilmez bir parçasıdır. ```bash npm install @nuxtjs/security # veya yarn add @nuxtjs/security ``` ### Adım 4: Güvenlik Modülünü Yapılandırma (`nuxt.config.ts`) Modülü `nuxt.config.ts` dosyanıza ekleyin ve temel güvenlik başlıklarını yapılandırın: ```typescript export default defineNuxtConfig({ modules: ['@nuxtjs/security'], security: { headers: { contentSecurityPolicy: { 'base-uri': ["'self'"], 'font-src': ["'self'", 'https:', 'data:'], 'form-action': ["'self'"], 'frame-ancestors': ["'self'"], 'img-src': ["'self'", 'data:', 'https:'], 'object-src': ["'none'"], 'script-src-attr': ["'none'"], 'style-src': ["'self'", 'https:', "'unsafe-inline'"], 'upgrade-insecure-requests': true }, crossOriginResourcePolicy: 'same-origin', crossOriginOpenerPolicy: 'same-origin', crossOriginEmbedderPolicy: 'require-corp', referrerPolicy: 'no-referrer', strictTransportSecurity: { maxAge: 15552000, // 6 ay includeSubdomains: true, preload: true }, xContentTypeOptions: 'nosniff', xDNSPrefetchControl: 'off', xFrameOptions: 'DENY', xPermittedCrossDomainPolicies: 'none', xXSSProtection: '0' // Modern tarayıcılarda CSP ile birlikte gereksiz }, // CSRF korumasını etkinleştirme (cookie tabanlı) csrf: true, // Diğer güvenlik ayarları... } }) ``` Bu yapılandırma, uygulamanız için Content Security Policy (CSP), HTTP Strict Transport Security (HSTS) ve diğer önemli güvenlik başlıklarını otomatik olarak ayarlar. Özellikle CSP, XSS saldırılarına karşı güçlü bir savunma mekanizmasıdır. ### Adım 5: Bağımlılıkları Güncel Tutma ve Denetleme Kullanılan kütüphanelerde keşfedilen güvenlik açıkları, uygulamanız için büyük risk oluşturur. Bağımlılıklarınızı düzenli olarak güncelleyin ve güvenlik denetimleri yapın. ```bash npm audit # Bilinen güvenlik açıklarını denetler npm audit fix # Otomatik olarak düzeltilebilen açıkları düzeltir ``` Paketlerinizi güncel tutmak için: ```bash npm outdated # Güncel olmayan paketleri listeler npm update # Paketleri günceller ``` ### Adım 6: HTTPS Kullanımını Zorunlu Kılma Tüm iletişimlerin şifrelenmiş olmasını sağlamak için üretim ortamında mutlaka HTTPS kullanın. Bu, hem veri gizliliğini korur hem de man-in-the-middle saldırılarını önler. `strictTransportSecurity` ayarı, tarayıcıları gelecekteki tüm bağlantılar için HTTPS kullanmaya zorlar. ### Adım 7: Sunucu Tarafı API Rotası Güvenliği Nuxt 3 ile gelen `server/api` ve `server/middleware` yapısı, sunucu tarafında güçlü güvenlik kontrolleri yapmanızı sağlar. Tüm API isteklerinde girdi validasyonu, kimlik doğrulama ve yetkilendirme kontrollerini uygulayın. ```typescript // server/api/hello.ts export default defineEventHandler((event) => { // Örnek: Basit bir kimlik doğrulama kontrolü const headers = getHeaders(event); if (!headers.authorization || !headers.authorization.startsWith('Bearer ')) { throw createError({ statusCode: 401, statusMessage: 'Unauthorized' }); } return { message: 'Hello from secure API!' }; }) ``` Bu adımlarla, 2026'da Nuxt.js uygulamanız için sağlam bir güvenlik temeli oluşturmuş olursunuz. Ancak güvenlik sürekli bir süreçtir ve bu temeli daha da güçlendirmek için ileri düzey teknikleri uygulamanız gerekecektir. ## Nuxt.js'te Temel Güvenlik: XSS, CSRF ve CORS Önlemleri Nuxt.js uygulamalarında en sık karşılaşılan güvenlik zafiyetlerinden bazıları Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF) ve Cross-Origin Resource Sharing (CORS) sorunlarıdır. Bu bölümde, bu tehditlere karşı nasıl önlemler alacağınızı pratik kod örnekleriyle inceleyeceğiz. ### XSS (Cross-Site Scripting) Önleme **Problem:** XSS, saldırganların kötü amaçlı betikleri web sayfanıza enjekte ederek kullanıcıların tarayıcılarında çalıştırmasına olanak tanıyan bir zafiyettir. Bu genellikle, kullanıcı tarafından sağlanan verilerin doğru bir şekilde sanitize edilmeden doğrudan DOM'a basılmasıyla meydana gelir. **Çözüm:** Vue.js ve Nuxt.js, varsayılan olarak HTML içeriğini otomatik olarak kaçırarak (escaping) XSS saldırılarına karşı koruma sağlar. Ancak, `v-html` direktifini kullanırken veya kullanıcı girdilerini işlerken dikkatli olmak gerekir. **Kod Örneği (v-html'dan Kaçınma ve Sanitizasyon):** `v-html` kullanmaktan kaçının. Eğer kullanmanız gerekiyorsa, içeriği mutlaka güvenilir bir kütüphane (örn. DOMPurify) ile sanitize edin. ```vue ``` ### CSRF (Cross-Site Request Forgery) Koruması **Problem:** CSRF, saldırganların oturum açmış bir kullanıcının tarayıcısını kullanarak, kullanıcının bilgisi veya rızası olmadan bir web uygulamasına istenmeyen HTTP isteği göndermesini sağlayan bir saldırıdır. **Çözüm:** `@nuxtjs/security` modülü, CSRF korumasını kolayca etkinleştirmenizi sağlar. Bu modül, her form gönderimi veya API isteği için benzersiz bir CSRF token'ı kullanarak isteğin meşruiyetini doğrular. **Kod Örneği (CSRF Koruması):** `nuxt.config.ts` dosyanızda `security.csrf: true` ayarını yaptığınızda, modül otomatik olarak CSRF token'larını yönetecektir. Formunuzda bu token'ı gizli bir alan olarak göndermeniz gerekir. ```vue ``` Sunucu tarafında (örneğin `server/api/contact.post.ts`), `@nuxtjs/security` modülü CSRF token'ının doğruluğunu otomatik olarak kontrol edecektir. Eğer token geçersizse, istek 403 Forbidden hatasıyla reddedilecektir. ### CORS (Cross-Origin Resource Sharing) Ayarları **Problem:** CORS, web tarayıcılarının bir web sayfasının, kendi kaynağı dışındaki bir kaynaktan (farklı bir alan adı, protokol veya bağlantı noktası) kaynaklara (örneğin API'lere) erişimini kısıtlayan bir güvenlik mekanizmasıdır. Yanlış yapılandırılmış CORS politikaları, siteler arası veri sızıntılarına veya yetkisiz erişime yol açabilir. **Çözüm:** Nuxt 3'te `server/middleware` kullanarak CORS başlıklarını sunucu tarafında doğru bir şekilde yapılandırabilirsiniz. Bu, sadece izin verilen kaynakların (origin) API'lerinize erişmesine izin verir. **Kod Örneği (CORS Middleware):** `server/middleware/cors.ts`: ```typescript export default defineEventHandler((event) => { const allowedOrigins = ['http://localhost:3000', 'https://www.yourdomain.com']; // İzin verilen kaynakları belirtin const origin = getRequestHeader(event, 'origin'); if (origin && allowedOrigins.includes(origin)) { setResponseHeaders(event, { 'Access-Control-Allow-Origin': origin, 'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE', 'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-CSRF-Token', 'Access-Control-Allow-Credentials': 'true', 'Access-Control-Max-Age': '86400' // Pre-flight isteklerinin cache süresi (saniye) }); } // OPTIONS isteği ise sadece başlıkları döndür ve isteği sonlandır if (event.node.req.method === 'OPTIONS') { event.node.res.statusCode = 204; event.node.res.end(); } }); ``` Bu middleware, gelen isteklerin kaynaklarını kontrol eder ve sadece güvenilir kaynaklardan gelen isteklere izin verir. Bu sayede, Nuxt.js uygulamanızın API'lerini yetkisiz erişimden korumuş olursunuz. ## İleri Seviye Nuxt.js Güvenlik Teknikleri (2026) Temel güvenlik önlemlerinin ötesine geçerek, Nuxt.js uygulamalarınızı 2026'nın gelişmiş tehditlerine karşı daha da güçlendirebilirsiniz. Bu bölümde, Content Security Policy (CSP), HTTP Strict Transport Security (HSTS) gibi güvenlik başlıklarının yanı sıra, JWT tabanlı kimlik doğrulama ve sunucu tarafı validasyon tekniklerini ele alacağız. ### CSP (Content Security Policy) ile Savunma **Problem:** XSS ve veri enjeksiyonu saldırıları, uygulamanıza dışarıdan kötü amaçlı betikler veya kaynaklar yükleyerek zarar verebilir. Varsayılan HTML kaçırma mekanizmaları her zaman yeterli olmayabilir. **Çözüm:** CSP, tarayıcılara hangi kaynaklardan (betikler, stiller, görseller vb.) içerik yükleyebileceğini bildiren bir güvenlik mekanizmasıdır. Sıkı bir CSP politikası, potansiyel saldırı yüzeyini önemli ölçüde daraltır. **Kod Örneği (Sıkı CSP Yapılandırması):** `nuxt.config.ts` dosyasında `@nuxtjs/security` modülü aracılığıyla CSP'yi yapılandırabilirsiniz. Aşağıdaki örnek, sadece kendi kaynaklarınızdan yüklemeye izin veren ve bazı yaygın zafiyetleri engelleyen sıkı bir politikadır: ```typescript export default defineNuxtConfig({ modules: ['@nuxtjs/security'], security: { headers: { contentSecurityPolicy: { 'base-uri': ["'self'"], 'font-src': ["'self'", 'https:', 'data:'], 'form-action': ["'self'"], 'frame-ancestors': ["'self'"], 'img-src': ["'self'", 'data:', 'https:'], 'object-src': ["'none'"], 'script-src': ["'self'", "'unsafe-eval'", 'https://cdn.jsdelivr.net'], // Dikkat: 'unsafe-eval' genellikle kaçınılması gereken bir durumdur. 'script-src-attr': ["'none'"], 'style-src': ["'self'", 'https:', "'unsafe-inline'"], // 'unsafe-inline' bazen UI kütüphaneleri için gerekebilir. 'upgrade-insecure-requests': true, 'connect-src': ["'self'", 'https://api.example.com'] // API'nizin adresi }, // ... diğer başlıklar }, } }) ``` > **Uyarı:** `unsafe-inline` ve `unsafe-eval` gibi direktifler, CSP'nin korumasını zayıflatır ve dikkatli kullanılmalıdır. Mümkünse bunlardan kaçının ve alternatif çözümler (nonce veya hash tabanlı CSP) araştırın. ### HSTS (HTTP Strict Transport Security) Uygulaması **Problem:** Kullanıcılar uygulamanıza yanlışlıkla HTTP üzerinden erişmeye çalıştıklarında, saldırganlar bu bağlantıyı ele geçirerek hassas bilgileri çalabilir (SSL Striping saldırıları). **Çözüm:** HSTS, tarayıcıları belirli bir süre boyunca (örn. 6 ay) uygulamanıza sadece HTTPS üzerinden bağlanmaya zorlar. Bu, downgrade saldırılarını ve güvenli olmayan HTTP bağlantılarını engeller. **Kod Örneği (HSTS Yapılandırması):** `@nuxtjs/security` modülü, HSTS'yi kolayca etkinleştirmenizi sağlar: ```typescript export default defineNuxtConfig({ modules: ['@nuxtjs/security'], security: { headers: { strictTransportSecurity: { maxAge: 15552000, // 6 ay (saniye cinsinden) includeSubdomains: true, preload: true // Tarayıcıların HSTS listesine eklenmesini sağlar }, // ... diğer başlıklar }, } }) ``` ### JWT (JSON Web Token) ile Güvenli Kimlik Doğrulama ve Yetkilendirme **Problem:** Geleneksel oturum tabanlı kimlik doğrulama, özellikle dağıtık sistemlerde ve API odaklı uygulamalarda ölçeklenebilirlik ve güvenlik zorlukları yaratabilir. **Çözüm:** JWT, kullanıcı kimlik bilgilerini güvenli bir şekilde aktarmak için popüler bir yöntemdir. `@nuxtjs/auth-next` gibi modüller (veya 2026'da güncel olan benzeri bir modül), Nuxt.js uygulamalarında JWT entegrasyonunu kolaylaştırır. **Kod Örneği (JWT Kullanımı - Temel Akış):** Bu, genellikle bir backend API ile birlikte çalışır. Nuxt.js istemci tarafı, token'ı alır ve sonraki isteklerde gönderir. ```vue ``` **Sunucu Tarafı (Backend) Kimlik Doğrulama Örneği (Nuxt `server/api`):** ```typescript // server/api/auth/login.post.ts import jwt from 'jsonwebtoken'; // npm install jsonwebtoken export default defineEventHandler(async (event) => { const body = await readBody(event); const { email, password } = body; // Basit bir kullanıcı doğrulama (gerçek uygulamada veritabanı kontrolü olmalı) if (email === 'user@example.com' && password === 'password123') { const token = jwt.sign({ userId: 1, email }, process.env.NUXT_SECRET_JWT_KEY || 'supersecretkey', { expiresIn: '1h' }); return { token }; } throw createError({ statusCode: 401, statusMessage: 'Invalid credentials' }); }); ``` ```typescript // server/api/protected.get.ts import jwt from 'jsonwebtoken'; export default defineEventHandler((event) => { const headers = getHeaders(event); const authHeader = headers.authorization; if (!authHeader || !authHeader.startsWith('Bearer ')) { throw createError({ statusCode: 401, statusMessage: 'Unauthorized' }); } const token = authHeader.split(' ')[1]; try { const decoded = jwt.verify(token, process.env.NUXT_SECRET_JWT_KEY || 'supersecretkey'); // Token geçerli, kullanıcının yetkilerini kontrol edebilirsiniz return { data: 'Bu korumalı bir veridir!', user: decoded }; } catch (error) { throw createError({ statusCode: 403, statusMessage: 'Forbidden: Invalid token' }); } }); ``` Bu örnekler, Nuxt.js uygulamalarınızda ileri seviye güvenlik mekanizmalarını nasıl uygulayabileceğinizi göstermektedir. Güvenlik, katmanlı bir yaklaşımla ele alınmalı ve her katmanda gerekli önlemler alınmalıdır. ## Nuxt.js Güvenlik Best Practices & Anti-Patterns (2026) 2026 yılında Nuxt.js uygulamalarınızın güvenliğini sağlamak için benimsenmesi gereken en iyi pratikler ve kaçınılması gereken anti-pattern'lar, geliştirme sürecinizin her aşamasında rehberiniz olmalıdır. ### ✅ DOĞRU Pratikler * **Bağımlılıkları Düzenli Güncelle:** Kullanılan tüm npm paketlerini ve Nuxt.js sürümünü düzenli olarak güncelleyin. Bilinen güvenlik açıklarının çoğu, eski yazılım sürümlerinden kaynaklanır. `npm audit` komutunu sıkça kullanın. * **Çevre Değişkenlerini Güvenli Yönet:** Hassas bilgileri (API anahtarları, veritabanı şifreleri) asla doğrudan kod içine yazmayın. `.env` dosyaları ve Nuxt.js'in `runtimeConfig` özelliği ile çevre değişkenlerini güvenli bir şekilde yönetin. Sunucu tarafı değişkenlerin istemci tarafına sızmadığından emin olun. * **Sıkı CSP (Content Security Policy) Uygula:** `@nuxtjs/security` modülü aracılığıyla kapsamlı bir CSP tanımlayın. Bu, XSS saldırılarına karşı en güçlü savunmalardan biridir. Mümkün olduğunca `unsafe-inline` ve `unsafe-eval` kullanımından kaçının. * **Kullanıcı Girdilerini Her Zaman Sanitize Et ve Validate Et:** Kullanıcıdan gelen tüm verileri (form girdileri, URL parametreleri, API istek gövdeleri) hem istemci hem de sunucu tarafında sanitize edin ve validasyon uygulayın. DOMPurify gibi kütüphaneler kullanın. * **Güvenlik Başlıklarını Yapılandır:** HSTS, X-Content-Type-Options, X-Frame-Options gibi HTTP güvenlik başlıklarını `nuxt.config.ts` içinde `@nuxtjs/security` modülü ile etkinleştirin. Bu başlıklar, tarayıcı tabanlı saldırıları engeller. * **API Rotalarında Rate Limiting Uygula:** Brute-force saldırıları ve hizmet reddi (DoS) girişimlerini önlemek için sunucu tarafı API rotalarınıza hız sınırlayıcılar (rate limiting) ekleyin. Nuxt 3 `server/middleware` bunun için idealdir. * **HTTPS Kullanımını Zorunlu Kıl:** Üretim ortamında uygulamanızı her zaman HTTPS üzerinden sunun. TLS/SSL sertifikaları kullanarak tüm iletişimi şifreleyin. * **Hata Mesajlarında Hassas Bilgi Gösterme:** Üretim ortamında kullanıcıya ayrıntılı hata mesajları (stack trace'ler, veritabanı hataları) göstermekten kaçının. Generic hata mesajları kullanın ve detaylı logları sunucu tarafında tutun. * **Güvenlik Modüllerini Kullan:** `@nuxtjs/security`, `@nuxtjs/auth-next` gibi topluluk tarafından desteklenen ve düzenli olarak güncellenen güvenlik modüllerini tercih edin. Kendi güvenlik mekanizmalarınızı sıfırdan yazmaktan kaçının. * **Güvenlik Denetimlerini Otomatikleştir:** CI/CD süreçlerinize güvenlik tarayıcıları (SAST/DAST araçları) entegre edin. Bu, potansiyel zafiyetleri erken aşamada tespit etmenizi sağlar. ### ❌ YANLIŞ Anti-Pattern'lar * **Eski Paketleri Kullanma:** Projenizdeki bağımlılıkları uzun süre güncellememek, bilinen güvenlik açıklarına davetiye çıkarır. * **Hassas Bilgileri Koda Gömme:** API anahtarları, veritabanı kimlik bilgileri gibi hassas verileri doğrudan JavaScript dosyalarında veya istemci tarafına ifşa edilecek şekilde kullanmak. * **Zayıf CSP Politikaları:** `script-src 'unsafe-inline'` veya `script-src *` gibi gevşek CSP kuralları tanımlamak, XSS saldırılarına kapı aralar. * **Kullanıcı Girdilerini Doğrudan DOM'a Basma:** Kullanıcıdan gelen HTML içeriğini sanitize etmeden `v-html` ile doğrudan render etmek, XSS için klasik bir yoldur. * **Güvenlik Başlıklarını İhmal Etme:** Varsayılan Nuxt.js ayarlarıyla yetinmek ve ek güvenlik başlıklarını yapılandırmamak, uygulamanızı birçok yaygın saldırıya karşı savunmasız bırakır. * **Sunucu Tarafında Validasyon Yapmama:** Sadece istemci tarafında girdi validasyonu yapmak, kötü niyetli kullanıcıların bu kontrolleri atlayarak sunucunuza geçersiz veya kötü amaçlı veri göndermesine olanak tanır. * **HTTP Kullanımında Israr Etme:** Üretim ortamında hala HTTP kullanmak, tüm iletişimi şifrelemeden bırakarak veri hırsızlığı riskini artırır. * **Ayrıntılı Hata Mesajlarını Açık Bırakma:** Üretim ortamında detaylı hata mesajlarını kullanıcıya göstermek, saldırganlara sisteminiz hakkında değerli bilgiler sağlayabilir. Bu best practice'leri ve anti-pattern'ları dikkate alarak, 2026'da Nuxt.js uygulamalarınız için çok daha güvenli ve dirençli bir yapı kurabilirsiniz. Güvenlik, sürekli bir öğrenme ve uygulama sürecidir. ## 2026'da Nuxt.js Güvenliğinde Sık Karşılaşılan Hatalar ve Çözümleri Nuxt.js geliştiricileri olarak, güvenlik konusunda bazı yaygın hatalarla karşılaşabiliriz. Bu bölümde, 2026 itibarıyla en sık karşılaşılan Nuxt.js güvenlik hatalarını, bunların sebeplerini ve etkili çözümlerini ele alacağız. Bu hatalar, Stack Overflow gibi platformlarda en çok sorulan sorular arasında yer almaktadır. ### Hata 1: `v-html` Kullanımından Kaynaklanan XSS Açığı * **Problem:** Kullanıcıdan gelen verileri `v-html` direktifiyle doğrudan render etmek, kötü amaçlı betiklerin çalıştırılmasına yol açar. * **Sebep:** Geliştiricinin `v-html`'ın güvenlik risklerinin farkında olmaması veya içeriği sanitize etmeyi unutması. * **Çözüm:** `v-text` veya `{{ }}` interpolasyonu kullanarak HTML içeriğini otomatik olarak kaçırın. Eğer mutlaka HTML render etmeniz gerekiyorsa, DOMPurify gibi güvenilir bir kütüphane ile içeriği sanitize edin. Sanitize edilmiş içeriği de `v-html` ile kullanırken dikkatli olun. ```vue