File Structure:

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

Key Files:

• app/page.tsx: Inashughulikia maombi kwa njia ya mizizi /.
• app/layout.tsx: Inaelezea mpangilio wa programu, ikizunguka kurasa zote.

Implementation:

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:

• Mwelekeo wa Njia: Faili page.tsx iliyo moja kwa moja chini ya saraka ya app inahusiana na njia ya /.
• Uwasilishaji: Kichanganuzi hiki kinatoa maudhui ya ukurasa wa nyumbani.
• Ujumuishaji wa Mpangilio: Kichanganuzi cha HomePage kimefungwa na layout.tsx, ambayo inaweza kujumuisha vichwa, miguu, na vipengele vingine vya kawaida.

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

// app/about/page.tsx

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

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

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

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

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

Njia za kukamata zote hushughulikia sehemu nyingi zilizowekwa ndani au njia zisizojulikana, zikitoa kubadilika katika usimamizi wa 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:

• Sehemu ya Catch-All: [...slug] inakamata sehemu zote zilizobaki za njia kama array.
• Matumizi: Inafaida kwa kushughulikia hali za upatanishi wa dinamik kama vile njia zinazozalishwa na mtumiaji, makundi yaliyo ndani, n.k.
• Mechi ya Njia: Njia kama /anything/here, /foo/bar/baz, n.k., zinashughulikiwa na kipengele hiki.

Mashambulizi ya XSS yanatokea wakati scripts za uhalifu zinapowekwa kwenye tovuti zinazotegemewa. Washambuliaji wanaweza kutekeleza scripts katika vivinjari vya watumiaji, wakipora data au kufanya vitendo kwa niaba ya mtumiaji.

Mfano wa Kanuni Ilioathirika:

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

Kwa Nini Inahatarisha: Kutumia dangerouslySetInnerHTML na pembejeo zisizoaminika kunaruhusu washambuliaji kuingiza scripts hatari.

Hutokea wakati pembejeo za mtumiaji hazishughulikiwi ipasavyo katika violezo, kuruhusu washambuliaji kuingiza na kutekeleza violezo au maelezo.

Mfano wa Kanuni Inayohatarisha:

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 Inahatarisha: Ikiwa template au data inajumuisha maudhui mabaya, inaweza kusababisha utekelezaji wa msimbo usio kusudiwa.

Ni udhaifu unaowezesha washambuliaji kubadilisha njia za upande wa mteja ili kufanya vitendo visivyo kusudiwa, kama vile Cross-Site Request Forgery (CSRF). Tofauti na kutembea kwa njia za upande wa seva, ambayo inalenga mfumo wa faili wa seva, CSPT inazingatia kutumia mitambo ya upande wa mteja ili kuelekeza maombi halali ya API kwa maeneo mabaya.

Mfano wa Msimbo Ulio na Udhaifu:

Programu ya Next.js inaruhusu watumiaji kupakia na kupakua faili. Kipengele cha kupakua kimewekwa kwenye upande wa mteja, ambapo watumiaji wanaweza kubainisha njia ya faili 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>
)
}

Muktadha wa Shambulio

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

• Ingizo Mbaya: Mshambuliaji anaunda URL yenye filePath iliyobadilishwa kama ../deleteFile/config.json.
• Kito cha API Kinachotokea: Kode ya upande wa mteja inafanya ombi kwa /api/files/../deleteFile/config.json.
• Ushughulikiaji wa Server: Ikiwa server haitathmini filePath, inashughulikia ombi hilo, huenda ikafuta au kufichua faili nyeti.

3. Kutekeleza CSRF:

• Kiungo Kilichoundwa: Mshambuliaji anamtumia mwathirika kiungo au kuingiza script mbaya inayosababisha ombi la kupakua kwa filePath iliyobadilishwa.
• Matokeo: Mwathirika anatekeleza kitendo bila kujua, na kusababisha ufikiaji au ufutaji wa faili zisizoidhinishwa.

Kwa Nini Ni Hatari

• Ukosefu wa Uthibitisho wa Ingizo: Upande wa mteja unaruhusu ingizo la filePath bila mipaka, hivyo kuwezesha kupita njia.
• Kukubali Ingizo la Mteja: API ya upande wa server inakubali na kushughulikia filePath bila kusafisha.
• Hatari za Vitendo vya API: Ikiwa kiunganishi cha API kinafanya vitendo vinavyobadilisha hali (mfano, kufuta, kubadilisha faili), kinaweza kutumika vibaya kupitia CSPT.

Next.js 13+ inakuwezesha kufafanua waandishi wa mbinu maalum za HTTP ndani ya faili moja ya route.js au route.ts, ikihimiza msimbo kuwa wazi 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:

• Mizigo Mingi: Kila njia ya HTTP (GET, PUT, DELETE) ina kazi yake iliyosafirishwa.
• Vigezo: Hoja ya pili inatoa ufikiaji wa vigezo vya njia kupitia params.
• Majibu Yaliyoimarishwa: Udhibiti mkubwa juu ya vitu vya majibu, kuruhusu usimamizi sahihi wa kichwa na msimbo wa hali.

Next.js 13+ inasaidia vipengele vya juu vya njia kama njia za catch-all na njia za API za ndani, kuruhusu muundo wa API wenye nguvu na unaoweza kupanuka.

Mfano wa Njia ya Catch-All:

// 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: [...] inaashiria sehemu ya kukamata yote, ikichukua njia zote zilizozungukwa.
• Matumizi: Inafaida kwa APIs ambazo zinahitaji kushughulikia kina tofauti za njia au sehemu za kidinamik.

Mfano wa Njia Zilizozungukwa:

// 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:

• Kuweka Kina: Inaruhusu muundo wa API wa kihierarkia, unaoonyesha uhusiano wa rasilimali.
• Upatikanaji wa Vigezo: Rahisi kupata vigezo vingi vya njia kupitia kitu cha params.

Njia za API katika Katalogi ya pages (Next.js 12 na Zamani)

Kabla ya Next.js 13 kuanzisha katalogi ya app na kuboresha uwezo wa njia, njia za API zilikuwa zikiwekwa hasa ndani ya katalogi ya pages. Njia hii bado inatumika sana na inaungwa mkono katika Next.js 12 na toleo la zamani.

Njia ya Msingi ya API

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:

• Mahali: Njia za API ziko chini ya saraka ya pages/api/.
• Usafirishaji: Tumia export default kufafanua kazi ya kushughulikia.
• Saini ya Kazi: Kazi ya kushughulikia inapata vitu vya req (ombio la HTTP) na res (jibu la HTTP).
• Uelekeo: Jina la faili (hello.js) linafanana na kiunganishi /api/hello.

Njia za API za Kijijini

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:

• Sehemu za Kijidudu: Mipaka ya mraba ([id].js) inaashiria sehemu za njia za kijidudu.
• Kupata Parameta: Tumia req.query.id kupata parameta ya kijidudu.
• Kushughulikia Mbinu: Tumia mantiki ya masharti kushughulikia mbinu tofauti za HTTP (GET, PUT, DELETE, n.k.).

Kushughulikia Mbinu Tofauti za HTTP

Wakati mfano wa msingi wa njia ya API unashughulikia mbinu zote za HTTP ndani ya kazi moja, unaweza kuunda muundo wa msimbo wako kushughulikia kila mbinu kwa uwazi zaidi na kudumisha.

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

Best Practices:

• Separation of Concerns: Tenganisha wazi mantiki kwa njia tofauti za HTTP.
• Response Consistency: Hakikisha muundo wa majibu ni thabiti kwa urahisi wa kushughulikia upande wa mteja.
• Error Handling: Shughulikia kwa ustadi mbinu zisizoungwa mkono na makosa yasiyotarajiwa.

Vichwa vya usalama vinaboresha usalama wa programu yako kwa kutoa maelekezo kwa vivinjari juu ya jinsi ya kushughulikia maudhui. Vinasaidia kupunguza mashambulizi mbalimbali kama vile 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 inaboresha picha kwa ajili ya utendaji, lakini mipangilio isiyo sahihi inaweza kusababisha udhaifu wa usalama, kama vile kuruhusu vyanzo visivyoaminika kuingiza maudhui mabaya.

Mfano wa Mipangilio Mbaya:

// next.config.js

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

Tatizo:

• '*': Inaruhusu picha kupakuliwa kutoka chanzo chochote cha nje, ikiwa ni pamoja na maeneo yasiyoaminika au ya uhalifu. Washambuliaji wanaweza kuhifadhi picha zenye mzigo wa uhalifu au maudhui yanayopotosha watumiaji.
• Tatizo lingine linaweza kuwa kuruhusu eneo ambalo mtu yeyote anaweza kupakia picha (kama raw.githubusercontent.com)

Jinsi washambuliaji wanavyolitumia:

Kwa kuingiza picha kutoka vyanzo vya uhalifu, washambuliaji wanaweza kufanya mashambulizi ya phishing, kuonyesha taarifa zinazopotosha, au kutumia udhaifu katika maktaba za uwasilishaji wa picha.

Simamia taarifa nyeti kama funguo za API na akidi za hifadhidata kwa usalama bila kuzifunua kwa mteja.

a. Kuweka Mabadiliko Nyeti Hatarini

Mfano Mbaya wa Usanidi:

// 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 ya kiambishi NEXT_PUBLIC_, Next.js haitoi mabadiliko kwa mteja. Hata hivyo, ikiwa kwa bahati mbaya imewekwa kiambishi (mfano, NEXT_PUBLIC_SECRET_API_KEY), inakuwa inapatikana upande wa mteja.

Jinsi washambuliaji wanavyotumia:

Ikiwa mabadiliko nyeti yanapatikana kwa mteja, washambuliaji wanaweza kuyapata kwa kuchunguza msimbo wa upande wa mteja au maombi ya mtandao, wakipata ufikiaji usioidhinishwa kwa APIs, hifadhidata, au huduma nyingine.

Simamisha uelekezaji wa URL na uandishi ndani ya programu yako, kuhakikisha kwamba watumiaji wanapelekwa ipasavyo bila kuanzisha udhaifu wa uelekezaji wazi.

a. Udhaifu wa Uelekezaji Wazi

Mfano Mbaya wa Usanidi:

// next.config.js

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

Tatizo:

• Kikundi Kinachobadilika: Kinawaruhusu watumiaji kubaini URL yoyote, na kuwezesha mashambulizi ya kuhamasisha.
• Kukubali Kuingiza kwa Mtumiaji: Kupeleka kwenye URL zinazotolewa na watumiaji bila uthibitisho kunaweza kusababisha ulaghai, usambazaji wa programu hasidi, au wizi wa akidi.

Jinsi washambuliaji wanavyotumia:

Washambuliaji wanaweza kuunda URL ambazo zinaonekana kama zinatoka kwenye eneo lako lakini zinawapeleka watumiaji kwenye tovuti zenye uharibifu. Kwa mfano:

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

Watumiaji wanaoamini jina la kikoa asilia wanaweza bila kujua kuingia kwenye tovuti hatari.

Binafsisha mipangilio ya Webpack kwa programu yako ya Next.js, ambayo inaweza bila kukusudia kuleta udhaifu wa usalama ikiwa haitashughulikiwa 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:

• Kufichua Njia Nyeti: Kuunda majina ya saraka nyeti na kuruhusu ufikiaji wa upande wa mteja kunaweza kufichua taarifa za siri.
• Kufunga Siri: Ikiwa faili nyeti zimefungwa kwa ajili ya mteja, maudhui yao yanapatikana kupitia ramani za chanzo au kuchunguza msimbo wa upande wa mteja.

Jinsi washambuliaji wanavyotumia:

Washambuliaji wanaweza kufikia au kujenga upya muundo wa saraka wa programu, na hivyo kupata na kutumia faili au data nyeti.