Dosya Yapısı:

my-nextjs-app/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Ana Dosyalar:

• app/page.tsx: Kök yoluna / gelen istekleri işler.
• app/layout.tsx: Uygulamanın düzenini tanımlar, tüm sayfaların etrafını sarar.

Uygulama:

tsxCopy code// app/page.tsx

export default function HomePage() {
return (
<div>
<h1>Welcome to the Home Page!</h1>
<p>This is the root route.</p>
</div>
);
}

Açıklama:

• Yol Tanımı: app dizininin altındaki page.tsx dosyası / yoluna karşılık gelir.
• Renderlama: Bu bileşen ana sayfa içeriğini renderlar.
• Düzen Entegrasyonu: HomePage bileşeni, başlıklar, alt bilgiler ve diğer ortak öğeleri içerebilen layout.tsx ile sarılmıştır.

Örnek: /about Yolu

Dosya Yapısı:

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── about/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Uygulama:

// app/about/page.tsx

export default function AboutPage() {
return (
<div>
<h1>About Us</h1>
<p>Learn more about our mission and values.</p>
</div>
)
}

Açıklama:

• Yol Tanımı: about klasörü içindeki page.tsx dosyası /about yoluna karşılık gelir.
• Renderlama: Bu bileşen, hakkında sayfası için içeriği renderlar.

Dinamik yollar, değişken segmentlere sahip yolları yönetmeyi sağlar, uygulamaların ID'ler, slug'lar gibi parametrelere dayalı içerik göstermesine olanak tanır.

Örnek: /posts/[id] Yolu

Dosya Yapısı:

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── posts/
│   │   └── [id]/
│   │       └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Uygulama:

tsxCopy code// app/posts/[id]/page.tsx

import { useRouter } from 'next/navigation';

interface PostProps {
params: { id: string };
}

export default function PostPage({ params }: PostProps) {
const { id } = params;
// Fetch post data based on 'id'

return (
<div>
<h1>Post #{id}</h1>
<p>This is the content of post {id}.</p>
</div>
);
}

Açıklama:

• Dinamik Segment: [id], URL'den id parametresini yakalayan bir dinamik segmenti belirtir.
• Parametrelere Erişim: params nesnesi, bileşen içinde erişilebilen dinamik parametreleri içerir.
• Yol Eşleşmesi: /posts/* ile eşleşen herhangi bir yol, örneğin /posts/1, /posts/abc vb., bu bileşen tarafından işlenecektir.

Next.js, dizin yapısını yansıtan hiyerarşik yol yapıları için iç içe yönlendirmeyi destekler.

Örnek: /dashboard/settings/profile Yolu

Dosya Yapısı:

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── dashboard/
│   │   ├── settings/
│   │   │   └── profile/
│   │   │       └── page.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Uygulama:

tsxCopy code// app/dashboard/settings/profile/page.tsx

export default function ProfileSettingsPage() {
return (
<div>
<h1>Profile Settings</h1>
<p>Manage your profile information here.</p>
</div>
);
}

Açıklama:

• Derin Yerleştirme: dashboard/settings/profile/ içindeki page.tsx dosyası, /dashboard/settings/profile rotasına karşılık gelir.
• Hiyerarşi Yansıması: Dizin yapısı, URL yolunu yansıtarak bakım kolaylığı ve netlik sağlar.

Her şeye açık rotalar, birden fazla iç içe segmenti veya bilinmeyen yolları yönetir, rota yönetiminde esneklik sağlar.

Örnek: /* Rotası

Dosya Yapısı:

my-nextjs-app/
├── app/
│   ├── [..slug]/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Uygulama:

// app/[...slug]/page.tsx

interface CatchAllProps {
params: { slug: string[] }
}

export default function CatchAllPage({ params }: CatchAllProps) {
const { slug } = params
const fullPath = `/${slug.join("/")}`

return (
<div>
<h1>Catch-All Route</h1>
<p>You have navigated to: {fullPath}</p>
</div>
)
}

Açıklama:

• Catch-All Segment: [...slug] kalan tüm yol segmentlerini bir dizi olarak yakalar.
• Kullanım: Kullanıcı tarafından oluşturulan yollar, iç içe geçmiş kategoriler gibi dinamik yönlendirme senaryolarını yönetmek için yararlıdır.
• Yol Eşleştirme: /anything/here, /foo/bar/baz gibi yollar bu bileşen tarafından işlenir.

XSS saldırıları, kötü niyetli betiklerin güvenilir web sitelerine enjekte edilmesiyle gerçekleşir. Saldırganlar, kullanıcıların tarayıcılarında betikleri çalıştırarak verileri çalabilir veya kullanıcı adına eylemler gerçekleştirebilir.

Güvenlik Açığı Olan Kod Örneği:

// Dangerous: Injecting user input directly into HTML
function Comment({ userInput }) {
return <div dangerouslySetInnerHTML={{ __html: userInput }} />
}

Neden Zayıf: dangerouslySetInnerHTML'yi güvenilmeyen girdi ile kullanmak, saldırganların kötü niyetli scriptler enjekte etmesine olanak tanır.

Kullanıcı girdilerinin şablonlarda yanlış bir şekilde işlenmesi durumunda meydana gelir, bu da saldırganların şablonları veya ifadeleri enjekte edip çalıştırmasına olanak tanır.

Zayıf Kodu Örneği:

import React from "react"
import ejs from "ejs"

function RenderTemplate({ template, data }) {
const html = ejs.render(template, data)
return <div dangerouslySetInnerHTML={{ __html: html }} />
}

Neden Zayıf: Eğer template veya data kötü niyetli içerik içeriyorsa, istenmeyen kodun çalıştırılmasına yol açabilir.

Bu, saldırganların istemci tarafı yollarını manipüle ederek istenmeyen eylemler gerçekleştirmesine olanak tanıyan bir zayıflıktır; örneğin, Cross-Site Request Forgery (CSRF). Sunucu tarafı yol geçişinin sunucunun dosya sistemini hedef almasının aksine, CSPT, meşru API isteklerini kötü niyetli uç noktalara yönlendirmek için istemci tarafı mekanizmalarını istismar etmeye odaklanır.

Zayıf Kod Örneği:

Bir Next.js uygulaması, kullanıcıların dosya yüklemesine ve indirmesine olanak tanır. İndirme özelliği istemci tarafında uygulanmıştır; burada kullanıcılar indirmek için dosya yolunu belirtebilir.

// pages/download.js
import { useState } from "react"

export default function DownloadPage() {
const [filePath, setFilePath] = useState("")

const handleDownload = () => {
fetch(`/api/files/${filePath}`)
.then((response) => response.blob())
.then((blob) => {
const url = window.URL.createObjectURL(blob)
const a = document.createElement("a")
a.href = url
a.download = filePath
a.click()
})
}

return (
<div>
<h1>Download File</h1>
<input
type="text"
value={filePath}
onChange={(e) => setFilePath(e.target.value)}
placeholder="Enter file path"
/>
<button onClick={handleDownload}>Download</button>
</div>
)
}

Saldırı Senaryosu

1. Saldırganın Amacı: filePath'ı manipüle ederek kritik bir dosyayı (örneğin, admin/config.json) silmek için bir CSRF saldırısı gerçekleştirmek.
2. CSPT'yi Kötüye Kullanma:

• Kötü Amaçlı Girdi: Saldırgan, filePath'ı manipüle edilmiş bir URL oluşturur, örneğin ../deleteFile/config.json.
• Sonuçlanan API Çağrısı: İstemci tarafındaki kod, /api/files/../deleteFile/config.json adresine bir istek gönderir.
• Sunucunun İşlemesi: Sunucu filePath'ı doğrulamıyorsa, isteği işler ve hassas dosyaları silme veya ifşa etme riski taşır.

3. CSRF'yi Gerçekleştirme:

• Hazırlanan Bağlantı: Saldırgan, kurbanına manipüle edilmiş filePath ile indirme isteğini tetikleyen bir bağlantı gönderir veya kötü amaçlı bir script gömülü bir şekilde iletir.
• Sonuç: Kurban, farkında olmadan işlemi gerçekleştirir ve yetkisiz dosya erişimi veya silme ile sonuçlanır.

Neden Zayıf

• Girdi Doğrulama Eksikliği: İstemci tarafı, keyfi filePath girdilerine izin vererek yol geçişine olanak tanır.
• İstemci Girdilerine Güvenme: Sunucu tarafındaki API, filePath'ı temizlemeden güvenerek işler.
• Potansiyel API Eylemleri: Eğer API uç noktası durum değiştiren eylemler gerçekleştiriyorsa (örneğin, dosyaları silme, değiştirme), CSPT aracılığıyla kötüye kullanılabilir.

Next.js 13+ aynı route.js veya route.ts dosyası içinde belirli HTTP yöntemleri için işleyiciler tanımlamanıza olanak tanır, bu da daha net ve düzenli bir kodu teşvik eder.

Örnek:

// app/api/users/[id]/route.js

export async function GET(request, { params }) {
const { id } = params
// Fetch user data based on 'id'
return new Response(JSON.stringify({ userId: id, name: "Jane Doe" }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

export async function PUT(request, { params }) {
const { id } = params
// Update user data based on 'id'
return new Response(JSON.stringify({ message: `User ${id} updated.` }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

export async function DELETE(request, { params }) {
const { id } = params
// Delete user based on 'id'
return new Response(JSON.stringify({ message: `User ${id} deleted.` }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

Açıklama:

• Birden Fazla İhracat: Her HTTP yöntemi (GET, PUT, DELETE) kendi ihraç edilen fonksiyonuna sahiptir.
• Parametreler: İkinci argüman, params aracılığıyla rota parametrelerine erişim sağlar.
• Gelişmiş Yanıtlar: Yanıt nesneleri üzerinde daha fazla kontrol, hassas başlık ve durum kodu yönetimi sağlar.

Next.js 13+ gelişmiş yönlendirme özelliklerini destekler, bu da catch-all rotaları ve iç içe API rotalarını mümkün kılarak daha dinamik ve ölçeklenebilir API yapıları sağlar.

Catch-All Rota Örneği:

// app/api/[...slug]/route.js

export async function GET(request, { params }) {
const { slug } = params
// Handle dynamic nested routes
return new Response(JSON.stringify({ slug }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

Açıklama:

• Sözdizimi: [...] tüm iç içe geçmiş yolları yakalayan bir kapsayıcı segmenti belirtir.
• Kullanım: Farklı yol derinliklerini veya dinamik segmentleri işlemek için gereken API'ler için yararlıdır.

İç İçe Geçmiş Yollar Örneği:

// app/api/posts/[postId]/comments/[commentId]/route.js

export async function GET(request, { params }) {
const { postId, commentId } = params
// Fetch specific comment for a post
return new Response(
JSON.stringify({ postId, commentId, comment: "Great post!" }),
{
status: 200,
headers: { "Content-Type": "application/json" },
}
)
}

Açıklama:

• Derin Yerleştirme: Kaynak ilişkilerini yansıtan hiyerarşik API yapıları için olanak tanır.
• Parametre Erişimi: params nesnesi aracılığıyla birden fazla rota parametresine kolayca erişim sağlar.

pages Dizini İçindeki API Rotaları (Next.js 12 ve Öncesi)

Next.js 13, app dizinini tanıttıktan ve yönlendirme yeteneklerini geliştirdikten önce, API rotaları esasen pages dizini içinde tanımlanıyordu. Bu yaklaşım hala yaygın olarak kullanılmakta ve Next.js 12 ve önceki sürümlerde desteklenmektedir.

Temel API Rotası

Dosya Yapısı:

goCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── hello.js
├── package.json
└── ...

Uygulama:

javascriptCopy code// pages/api/hello.js

export default function handler(req, res) {
res.status(200).json({ message: 'Hello, World!' });
}

Açıklama:

• Konum: API yolları pages/api/ dizini altında bulunur.
• İhracat: İşlev tanımlamak için export default kullanın.
• Fonksiyon İmzası: İşlev, req (HTTP isteği) ve res (HTTP yanıtı) nesnelerini alır.
• Yönlendirme: Dosya adı (hello.js), /api/hello uç noktasına karşılık gelir.

Dinamik API Yolları

Dosya Yapısı:

bashCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── users/
│           └── [id].js
├── package.json
└── ...

Uygulama:

javascriptCopy code// pages/api/users/[id].js

export default function handler(req, res) {
const {
query: { id },
method,
} = req;

switch (method) {
case 'GET':
// Fetch user data based on 'id'
res.status(200).json({ userId: id, name: 'John Doe' });
break;
case 'PUT':
// Update user data based on 'id'
res.status(200).json({ message: `User ${id} updated.` });
break;
case 'DELETE':
// Delete user based on 'id'
res.status(200).json({ message: `User ${id} deleted.` });
break;
default:
res.setHeader('Allow', ['GET', 'PUT', 'DELETE']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}

Açıklama:

• Dinamik Segmentler: Kare parantezler ([id].js) dinamik rota segmentlerini belirtir.
• Parametrelere Erişim: Dinamik parametreye erişmek için req.query.id kullanın.
• Yöntemleri Yönetme: Farklı HTTP yöntemlerini (GET, PUT, DELETE, vb.) yönetmek için koşullu mantık kullanın.

Farklı HTTP Yöntemlerini Yönetme

Temel API rota örneği tüm HTTP yöntemlerini tek bir fonksiyon içinde yönetirken, kodunuzu her yöntemi açıkça yönetmek için yapılandırabilirsiniz, bu da daha iyi bir netlik ve sürdürülebilirlik sağlar.

Örnek:

javascriptCopy code// pages/api/posts.js

export default async function handler(req, res) {
const { method } = req;

switch (method) {
case 'GET':
// Handle GET request
res.status(200).json({ message: 'Fetching posts.' });
break;
case 'POST':
// Handle POST request
res.status(201).json({ message: 'Post created.' });
break;
default:
res.setHeader('Allow', ['GET', 'POST']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}

En İyi Uygulamalar:

• Endişelerin Ayrılması: Farklı HTTP yöntemleri için mantığı net bir şekilde ayırın.
• Yanıt Tutarlılığı: İstemci tarafında işleme kolaylığı için tutarlı yanıt yapıları sağlayın.
• Hata Yönetimi: Desteklenmeyen yöntemleri ve beklenmeyen hataları nazikçe yönetin.

Güvenlik başlıkları, tarayıcılara içeriği nasıl işleyecekleri konusunda talimat vererek uygulamanızın güvenliğini artırır. Cross-Site Scripting (XSS), Clickjacking ve MIME türü sniffing gibi çeşitli saldırıları azaltmaya yardımcı olurlar:

• Content Security Policy (CSP)
• X-Frame-Options
• X-Content-Type-Options
• Strict-Transport-Security (HSTS)
• Referrer Policy

Örnekler:

// next.config.js

module.exports = {
async headers() {
return [
{
source: "/(.*)", // Apply to all routes
headers: [
{
key: "X-Frame-Options",
value: "DENY",
},
{
key: "Content-Security-Policy",
value:
"default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval';",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
{
key: "Strict-Transport-Security",
value: "max-age=63072000; includeSubDomains; preload", // Enforces HTTPS
},
{
key: "Referrer-Policy",
value: "no-referrer", // Completely hides referrer
},
// Additional headers...
],
},
]
},
}

Next.js, performans için görüntüleri optimize eder, ancak yanlış yapılandırmalar güvenlik açıklarına yol açabilir, örneğin, güvenilmeyen kaynakların kötü niyetli içerik enjekte etmesine izin vermek.

Kötü Yapılandırma Örneği:

// next.config.js

module.exports = {
images: {
domains: ["*"], // Allows images from any domain
},
}

Sorun:

• '*': Resimlerin herhangi bir dış kaynaktan, güvenilmeyen veya kötü niyetli alanlardan yüklenmesine izin verir. Saldırganlar, kötü niyetli yükler veya kullanıcıları yanıltan içerikler içeren resimleri barındırabilir.
• Başka bir sorun, herkesin bir resim yükleyebileceği bir alanın izin verilmesidir (örneğin raw.githubusercontent.com).

Saldırganların bunu nasıl kötüye kullandığı:

Kötü niyetli kaynaklardan resimler enjekte ederek, saldırganlar kimlik avı saldırıları gerçekleştirebilir, yanıltıcı bilgiler gösterebilir veya resim işleme kütüphanelerindeki zafiyetleri istismar edebilir.

API anahtarları ve veritabanı kimlik bilgileri gibi hassas bilgileri, istemciye açığa çıkarmadan güvenli bir şekilde yönetin.

a. Hassas Değişkenlerin Açığa Çıkması

Kötü Yapılandırma Örneği:

// next.config.js

module.exports = {
env: {
SECRET_API_KEY: process.env.SECRET_API_KEY, // Exposed to the client
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, // Correctly prefixed for client
},
}

Problem:

• SECRET_API_KEY: NEXT_PUBLIC_ ön eki olmadan, Next.js değişkenleri istemciye açmaz. Ancak, yanlışlıkla ön ek verilirse (örneğin, NEXT_PUBLIC_SECRET_API_KEY), istemci tarafında erişilebilir hale gelir.

How attackers abuse it:

Eğer hassas değişkenler istemciye açılırsa, saldırganlar bunları istemci tarafı kodunu veya ağ isteklerini inceleyerek alabilir, API'lere, veritabanlarına veya diğer hizmetlere yetkisiz erişim kazanabilirler.

Uygulamanız içinde URL yönlendirmelerini ve yeniden yazmalarını yönetin, kullanıcıların uygun şekilde yönlendirilmesini sağlayın ve açık yönlendirme güvenlik açıkları oluşturmaktan kaçının.

a. Open Redirect Vulnerability

Bad Configuration Example:

// next.config.js

module.exports = {
async redirects() {
return [
{
source: "/redirect",
destination: (req) => req.query.url, // Dynamically redirects based on query parameter
permanent: false,
},
]
},
}

Sorun:

• Dinamik Hedef: Kullanıcıların herhangi bir URL belirtmesine izin verir, bu da açık yönlendirme saldırılarına olanak tanır.
• Kullanıcı Girdisine Güvenme: Kullanıcılar tarafından sağlanan URL'lere doğrulama olmadan yönlendirme yapmak, kimlik avı, kötü amaçlı yazılım dağıtımı veya kimlik bilgisi hırsızlığına yol açabilir.

Saldırganların bunu nasıl kötüye kullandığı:

Saldırganlar, sizin alan adınızdan geliyormuş gibi görünen URL'ler oluşturabilir, ancak kullanıcıları kötü amaçlı sitelere yönlendirebilir. Örneğin:

https://yourdomain.com/redirect?url=https://malicious-site.com

Kullanıcılar, orijinal alan adına güvenerek, farkında olmadan zararlı web sitelerine gidebilirler.

Next.js uygulamanız için Webpack yapılandırmalarını özelleştirin; bu, dikkatli bir şekilde ele alınmadığında güvenlik açıkları oluşturabilir.

a. Hassas Modülleri Açığa Çıkarma

Kötü Yapılandırma Örneği:

// next.config.js

module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.alias["@sensitive"] = path.join(__dirname, "secret-folder")
}
return config
},
}

Sorun:

• Hassas Yolları Açığa Çıkarma: Hassas dizinlerin takma adını vermek ve istemci tarafı erişimine izin vermek, gizli bilgilerin sızmasına neden olabilir.
• Sırları Paketleme: Hassas dosyalar istemci için paketlenirse, içerikleri kaynak haritaları veya istemci tarafı kodunu inceleyerek erişilebilir hale gelir.

Saldırganların bunu nasıl kötüye kullandığı:

Saldırganlar, uygulamanın dizin yapısına erişebilir veya bunu yeniden oluşturabilir, bu da hassas dosyaları veya verileri bulup istismar etmelerini sağlayabilir.