Muundo wa Faili:

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

Faili Muhimu:

• app/page.tsx: Inashughulikia maombi kwa njia ya mzizi /.
• app/layout.tsx: Inabainisha layout ya programu, ikizunguka kurasa zote.

Utekelezaji:

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>
);
}

Maelezo:

• Ufafanuzi wa ruta: Faili page.tsx iliyoko moja kwa moja chini ya saraka ya app inalingana na ruta /.
• Uwasilishaji: Komponenti hii huonyesha maudhui ya ukurasa wa nyumbani.
• Uunganishaji wa Layout: Komponenti ya HomePage imezungushiwa na layout.tsx, ambayo inaweza kujumuisha header, footer, na vipengele vingine vya kawaida.

Mfano: Ruta /about

Muundo wa Faili:

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

Utekelezaji:

// app/about/page.tsx

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

Maelezo:

• Ufafanuzi wa Route: The page.tsx file inside the about folder corresponds to the /about route.
• Rendering: Component hii inaonyesha maudhui ya ukurasa wa about.

Routes dinamiki zinaruhusu kushughulikia njia zenye vipengele vinavyobadilika, kuruhusu applications kuonyesha maudhui kulingana na vigezo kama IDs, slugs, n.k.

Mfano: /posts/[id] Route

Muundo wa Faili:

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

Utekelezaji:

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>
);
}

Maelezo:

• Segmenti ya Dynamic: [id] inaonyesha segmenti inayobadilika katika ruta, ikishikilia parameter ya id kutoka kwa URL.
• Kupata Vigezo: params object ina vigezo zinazobadilika, vinavyoweza kufikiwa ndani ya komponenti.
• Upatanisho wa Njia: Njia yoyote inayolingana na /posts/*, kama /posts/1, /posts/abc, n.k., itashughulikiwa na komponenti hii.

Next.js inaunga mkono ruta zilizowekwa ndani, ikiruhusu muundo wa ruta wa kihierarkia unaoiga mpangilio wa saraka.

Mfano: Njia /dashboard/settings/profile

Muundo wa Faili:

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

Utekelezaji:

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>
);
}

Maelezo:

• Uwekaji wa tabaka nyingi: Faili page.tsx iliyoko ndani ya dashboard/settings/profile/ inalingana na route /dashboard/settings/profile.
• Uakisi wa Hierarki: Muundo wa saraka unaakisi njia ya URL, ukiboresha urahisi wa matengenezo na uwazi.

Njia za kupokea yote zinashughulikia sehemu nyingi zilizowekwa ndani au njia zisizojulikana, na kutoa unyumbufu katika kushughulikia njia.

Mfano: /* Njia

Muundo wa Faili:

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

Utekelezaji:

// 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>
)
}

Maelezo:

• Catch-All Segment: [...slug] inakamata sehemu zote za path zilizobaki kama array.
• Matumizi: Inatumika kushughulikia routing ya dinamik kama paths zinazotengenezwa na watumiaji, makundi yaliyowekwa ndani (nested categories), n.k.
• Kufanana kwa Njia: Njia kama /anything/here, /foo/bar/baz, n.k., zinasimamiwa na component hii.

Mashambulizi ya XSS hutokea wakati skripti zenye madhumuni mabaya zinaingizwa kwenye tovuti zinazoaminika. Washambuliaji wanaweza kuendesha skripti kwenye vivinjari vya watumiaji, kuiba data au kutekeleza vitendo kwa niaba ya mtumiaji.

Mfano wa Code yenye Udhaifu:

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

Kwa Nini Ni Hatari: Kutumia dangerouslySetInnerHTML na input isiyotegemewa kunaruhusu attackers kuingiza malicious scripts.

Hutokea wakati inputs za watumiaji hazishughulikiwa ipasavyo katika templates, kuruhusu attackers kuingiza na kuendesha templates au expressions.

Mfano wa Code yenye Udhaifu:

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

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

Kwa Nini Ni Hatari: Ikiwa template au data inajumuisha yaliyomo hatarishi, inaweza kusababisha utekelezaji wa code isiyokusudiwa.

Ni udhaifu unaowawezesha wadukuzi kurekebisha client-side paths ili kufanya vitendo visivyokusudiwa, kama vile Cross-Site Request Forgery (CSRF). Tofauti na server-side path traversal, ambayo inalenga filesystem ya server, CSPT inalenga kuchukua faida ya mechanisms za client-side ili kupitisha tena API requests halali kwa endpoints zenye madhumuni mabaya.

Mfano wa Vulnerable Code:

Programu ya Next.js inawawezesha watumiaji kupakia na kupakua files. Kipengele cha download kimefanywa upande wa client, ambapo watumiaji wanaweza kubainisha file path ya kupakua.

// 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>
)
}

Senario ya Shambulio

1. Lengo la Mshambuliaji: Fanya shambulio la CSRF ili kufuta faili muhimu (mfano, admin/config.json) kwa kubadilisha filePath.
2. Kuitumia CSPT:

• Ingizo Mbaya: Mshambuliaji anaunda URL yenye filePath iliyorekebishwa kama ../deleteFile/config.json.
• Kiito cha API kinachotokea: Msimbo upande wa mteja unafanya ombi kwa /api/files/../deleteFile/config.json.
• Ushughulikiaji wa Seva: Ikiwa seva haitathibitisha filePath, itashughulikia ombi hilo, na inaweza kufuta au kufichua faili nyeti.

3. Kutekeleza CSRF:

• Kiungo kilichotengenezwa: Mshambuliaji anamtumia mwathiriwa kiungo au kuingiza script hatari inayochochea ombi la kupakua lenye filePath iliyorekebishwa.
• Matokeo: Mwathiriwa kwa kutokujua anatekeleza kitendo hicho, na kusababisha upatikanaji au kufutwa kwa faili bila idhini.

Kwa Nini Ni Hatari

• Ukosefu wa Uthibitishaji wa Ingizo: Upande wa mteja unaruhusu ingizo lolote la filePath, kuruhusu path traversal.
• Kuamini Ingizo za Mteja: API upande wa seva inaamini na kushughulikia filePath bila kusafisha.
• Vitendo Vinavyowezekana vya API: Ikiwa endpoint ya API inafanya vitendo vinavyobadilisha hali (mfano, kufuta, kubadilisha faili), inaweza kutumika vibaya kupitia CSPT.

Next.js 13+ inakuwezesha kufafanua handlers kwa HTTP methods maalum ndani ya faili ile ile ya route.js au route.ts, ikichangia msimbo ulio wazi zaidi na uliopangwa vizuri.

Mfano:

// 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" },
})
}

Maelezo:

• Kuagiza Nyingi: Kila method ya HTTP (GET, PUT, DELETE) ina function yake iliyotumwa.
• Vigezo: Hoja ya pili inatoa ufikiaji wa vigezo vya njia kupitia params.
• Majibu Yaboreshewa: Udhibiti mkubwa juu ya vitu vya majibu, kuruhusu usimamizi sahihi wa headers na status codes.

Next.js 13+ inaunga mkono sifa za routing za juu kama catch-all routes na nested API routes, ikiruhusu miundo ya API yenye nguvu zaidi na inayoweza kupanuka.

Mfano wa Catch-All Route:

// 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" },
})
}

Maelezo:

• Sintaksia: [...] inaonyesha segmenti inayoshika yote, ikikamata njia zote zilizo ndani.
• Matumizi: Inafaa kwa APIs zinazohitaji kushughulikia kina tofauti za njia au segmenti zinazobadilika.

Mfano wa Nested Routes:

// 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" },
}
)
}

Maelezo:

• Uwekaji wa kina: Inaruhusu miundo ya API yenye ngazi, ikionyesha uhusiano wa rasilimali.
• Ufikiaji wa vigezo: Kupata kwa urahisi vigezo vingi vya route kupitia object ya params.

API Routes in the pages Directory (Next.js 12 and Earlier)

Kabla ya Next.js 13 kutambulisha directory ya app na kuongeza uwezo ulioboreshwa wa routing, API routes ziliainishwa hasa ndani ya directory ya pages. Mbinu hii bado inatumiwa sana na inasaidiwa katika Next.js 12 na matoleo ya awali.

API Route ya Msingi

Muundo wa Faili:

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

Utekelezaji:

javascriptCopy code// pages/api/hello.js

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

Maelezo:

• Location: API routes ziko chini ya saraka pages/api/.
• Export: Tumia export default kufafanua kazi ya mshughulikiaji.
• Function Signature: Mshughulikiaji hupokea vitu req (maombi ya HTTP) na res (majibu ya HTTP).
• Routing: Jina la faili (hello.js) linaendana na endpoint /api/hello.

Routes za API Zinazobadilika

Muundo wa Faili:

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

Utekelezaji:

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`);
}
}

Maelezo:

• Segimenti Dinamiki: Mabano ya mraba ([id].js) yanaonyesha segimenti za route zinazobadilika.
• Kupata Vigezo: Tumia req.query.id kupata parameter ya dinamiki.
• Kushughulikia Mbinu: Tumia mantiki ya masharti kushughulikia mbinu tofauti za HTTP (GET, PUT, DELETE, nk).

Kushughulikia Mbinu Tofauti za HTTP

Wakati mfano wa msingi wa API route unashughulikia mbinu zote za HTTP ndani ya kazi moja, unaweza kuandaa msimbo wako kushughulikia kila mbinu waziwazi kwa uwazi zaidi na urahisi wa matengenezo.

Mfano:

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`);
}
}

Mazoea Bora:

• Separation of Concerns: Tenganisha wazi mantiki kwa ajili ya HTTP methods tofauti.
• Response Consistency: Hakikisha muundo wa majibu ni thabiti ili kurahisisha kushughulikia upande wa client.
• Error Handling: Shughulikia kwa uangalifu methods zisizoungwa mkono na makosa yasiyotegemewa.

Vichwa vya usalama huimarisha usalama wa programu yako kwa kuelekeza vivinjari jinsi ya kushughulikia maudhui. Husaidia kupunguza mashambulizi mbalimbali kama Cross-Site Scripting (XSS), Clickjacking, na MIME type sniffing:

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

Mifano:

// 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 huboresha picha kwa ajili ya utendaji, lakini mipangilio isiyofaa inaweza kusababisha udhaifu wa usalama, kama kuruhusu vyanzo visivyo vya kuaminika kuingiza yaliyomo hatarishi.

Mfano wa Mpangilio Mbaya:

// next.config.js

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

Tatizo:

• '*': Inaruhusu picha kupakiwa kutoka kwa chanzo chochote cha nje, ikiwa ni pamoja na vikoa visivyoaminika au vya ujeuri. Washambuliaji wanaweza kuweka picha zenye payload za ujeuri au maudhui yanayowadanganya watumiaji.
• Shida nyingine inaweza kuwa kuruhusu domaini ambapo mtu yeyote anaweza kupakia picha (kama raw.githubusercontent.com)

Jinsi washambuliaji wanavyovitumia:

Kwa kuingiza picha kutoka vyanzo vya ujeuri, washambuliaji wanaweza kufanya mashambulizi ya phishing, kuonyesha taarifa za kudanganya, au kutumia udhaifu katika maktaba za kuonyesha picha.

Dhibiti taarifa nyeti kama API keys na database credentials kwa usalama bila kuzifunua kwa client.

a. Kufunua Vigezo Nyeti

Mfano wa Usanidi Mbaya:

// 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
},
}

Tatizo:

• SECRET_API_KEY: Bila kiambishi NEXT_PUBLIC_, Next.js haiwafichi variables kwa client. Hata hivyo, ikiwa kwa bahati mbaya imewekwa kiambishi (kwa mfano, NEXT_PUBLIC_SECRET_API_KEY), inakuwa inapatikana upande wa client.

Jinsi washambuliaji wanavyovitumia vibaya:

Iwapo variables nyeti zitatangazwa kwa client, washambuliaji wanaweza kuzichukua kwa kuchunguza code ya upande wa client au network requests, na kupata ufikiaji usioidhinishwa kwa APIs, databases, au huduma nyingine.

Simamia uelekezaji na rewriting za URL ndani ya application yako, ukihakikisha watumiaji wanaelekezwa ipasavyo bila kuanzisha open redirect vulnerabilities.

a. Open Redirect Vulnerability

Mfano wa Mipangilio Mbaya:

// next.config.js

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

Tatizo:

• Lengo Dinamiki: Inaruhusu watumiaji kubainisha URL yoyote, ikiruhusu open redirect attacks.
• Kumwamini Ingizo la Mtumiaji: Kupeleka tena kwa URLs zinazotolewa na watumiaji bila uthibitisho kunaweza kusababisha phishing, malware distribution, au credential theft.

Jinsi washambuliaji wanavyovitumia:

Washambuliaji wanaweza kutengeneza URL zinazoonekana kuanzia kutoka domain yako lakini kupeleka watumiaji kwa tovuti zenye nia mbaya. Kwa mfano:

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

Watumiaji wanaomuamini domain asilia wanaweza bila kutambua kuingia kwenye tovuti zenye madhara.

Binafsisha Webpack configurations kwa application yako ya Next.js; hizi zinaweza bila kukusudia kuleta udhaifu wa usalama ikiwa hazitashughulikiwa kwa uangalifu.

a. Kufichua Moduli Nyeti

Mfano Mbaya wa Mipangilio:

// next.config.js

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

Tatizo:

• Kuonyesha Njia Zenye Usiri: Aliasing sensitive directories na kuruhusu client-side access kunaweza leak taarifa za siri.
• Kujumuisha Siri: Ikiwa mafaili nyeti yamejumuishwa kwa client, yaliyomo yao yanapatikana kupitia source maps au kwa kuchunguza client-side code.

Jinsi washambuliaji wanavyovitumia:

Washambuliaji wanaweza kupata au kujenga upya muundo wa saraka wa application, na hivyo kupata na exploit mafaili au data nyeti.