Структура файлів:

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

Ключові файли:

• app/page.tsx: Обробляє запити до кореневого шляху /.
• app/layout.tsx: Визначає макет для програми, обгортаючи всі сторінки.

Впровадження:

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

Пояснення:

• Визначення маршруту: Файл page.tsx, що безпосередньо знаходиться в директорії app, відповідає маршруту /.
• Відображення: Цей компонент відображає вміст для домашньої сторінки.
• Інтеграція макету: Компонент HomePage обгорнутий у layout.tsx, який може включати заголовки, підвал та інші загальні елементи.

Приклад: маршрут /about

Структура файлів:

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

Пояснення:

• Визначення маршруту: Файл page.tsx всередині папки about відповідає маршруту /about.
• Відображення: Цей компонент відображає вміст для сторінки про нас.

Динамічні маршрути дозволяють обробляти шляхи з змінними сегментами, що дозволяє додаткам відображати вміст на основі параметрів, таких як ID, слуги тощо.

Приклад: маршрут /posts/[id]

Структура файлів:

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

Пояснення:

• Динамічний сегмент: [id] позначає динамічний сегмент у маршруті, захоплюючи параметр id з URL.
• Доступ до параметрів: Об'єкт params містить динамічні параметри, доступні в компоненті.
• Відповідність маршруту: Будь-який шлях, що відповідає /posts/*, наприклад, /posts/1, /posts/abc тощо, буде оброблятися цим компонентом.

Next.js підтримує вкладене маршрутизування, що дозволяє створювати ієрархічні структури маршрутів, які відображають структуру директорій.

Приклад: /dashboard/settings/profile Маршрут

Структура файлів:

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

Пояснення:

• Глибоке вкладення: Файл page.tsx всередині dashboard/settings/profile/ відповідає маршруту /dashboard/settings/profile.
• Відображення ієрархії: Структура директорій відображає URL-адресу, покращуючи підтримуваність та ясність.

Маршрути catch-all обробляють кілька вкладених сегментів або невідомі шляхи, забезпечуючи гнучкість в обробці маршрутів.

Приклад: /* Маршрут

Структура файлів:

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

Впровадження:

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

Пояснення:

• Catch-All сегмент: [...slug] захоплює всі залишкові сегменти шляху як масив.
• Використання: Корисно для обробки динамічних сценаріїв маршрутизації, таких як шляхи, створені користувачами, вкладені категорії тощо.
• Відповідність маршруту: Шляхи, такі як /anything/here, /foo/bar/baz тощо, обробляються цим компонентом.

Атаки XSS відбуваються, коли шкідливі скрипти впроваджуються в довірені веб-сайти. Зловмисники можуть виконувати скрипти в браузерах користувачів, крадучи дані або виконуючи дії від імені користувача.

Приклад вразливого коду:

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

Чому це вразливо: Використання dangerouslySetInnerHTML з ненадійним введенням дозволяє зловмисникам впроваджувати шкідливі скрипти.

Відбувається, коли введення користувача неправильно обробляється в шаблонах, що дозволяє зловмисникам впроваджувати та виконувати шаблони або вирази.

Приклад вразливого коду:

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

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

Чому це вразливо: Якщо template або data містять шкідливий контент, це може призвести до виконання непередбаченого коду.

Це вразливість, яка дозволяє зловмисникам маніпулювати шляхами на стороні клієнта для виконання непередбачених дій, таких як Cross-Site Request Forgery (CSRF). На відміну від переходу по шляхах на стороні сервера, який націлений на файлову систему сервера, CSPT зосереджується на експлуатації механізмів на стороні клієнта для перенаправлення легітимних API запитів на шкідливі кінцеві точки.

Приклад вразливого коду:

Додаток Next.js дозволяє користувачам завантажувати та скачувати файли. Функція завантаження реалізована на стороні клієнта, де користувачі можуть вказати шлях до файлу для завантаження.

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

Сценарій атаки

1. Мета атакуючого: Виконати CSRF-атаку для видалення критичного файлу (наприклад, admin/config.json), маніпулюючи filePath.
2. Експлуатація CSPT:

• Зловмисний ввід: Атакуючий створює URL з маніпульованим filePath, таким як ../deleteFile/config.json.
• Результуючий API виклик: Код на стороні клієнта робить запит до /api/files/../deleteFile/config.json.
• Обробка сервером: Якщо сервер не перевіряє filePath, він обробляє запит, потенційно видаляючи або відкриваючи чутливі файли.

3. Виконання CSRF:

• Створене посилання: Атакуючий надсилає жертві посилання або вбудовує зловмисний скрипт, який викликає запит на завантаження з маніпульованим filePath.
• Результат: Жертва ненавмисно виконує дію, що призводить до несанкціонованого доступу до файлів або їх видалення.

Чому це вразливо

• Відсутність валідації вводу: Код на стороні клієнта дозволяє довільні ввід filePath, що дозволяє обходити шляхи.
• Довіра до вводу клієнта: API на стороні сервера довіряє та обробляє filePath без очищення.
• Потенційні дії API: Якщо API-інтерфейс виконує дії, що змінюють стан (наприклад, видалення, модифікація файлів), його можна експлуатувати через CSPT.

Next.js 13+ дозволяє визначати обробники для специфічних HTTP методів в одному і тому ж файлі route.js або route.ts, що сприяє більш чіткому та організованому коду.

Приклад:

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

Пояснення:

• Багатоекспортні функції: Кожен HTTP метод (GET, PUT, DELETE) має свою власну експортовану функцію.
• Параметри: Другий аргумент надає доступ до параметрів маршруту через params.
• Покращені відповіді: Більший контроль над об'єктами відповіді, що дозволяє точно керувати заголовками та кодами статусу.

Next.js 13+ підтримує розширені функції маршрутизації, такі як catch-all маршрути та вкладені API маршрути, що дозволяє створювати більш динамічні та масштабовані структури API.

Приклад 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" },
})
}

Пояснення:

• Синтаксис: [...] позначає сегмент, що охоплює всі вкладені шляхи.
• Використання: Корисно для API, які повинні обробляти різну глибину маршрутів або динамічні сегменти.

Приклад вкладених маршрутів:

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

Пояснення:

• Глибоке вкладення: Дозволяє створювати ієрархічні структури API, що відображають відносини ресурсів.
• Доступ до параметрів: Легкий доступ до кількох параметрів маршруту через об'єкт params.

API Маршрути в директорії pages (Next.js 12 та раніше)

Перед тим, як Next.js 13 представив директорію app та покращив можливості маршрутизації, API маршрути в основному визначалися в директорії pages. Цей підхід все ще широко використовується та підтримується в Next.js 12 та раніших версіях.

Основний API маршрут

Структура файлів:

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

Впровадження:

javascriptCopy code// pages/api/hello.js

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

Пояснення:

• Місцезнаходження: API маршрути знаходяться в директорії pages/api/.
• Експорт: Використовуйте export default для визначення функції обробника.
• Підпис функції: Обробник отримує об'єкти req (HTTP запит) та res (HTTP відповідь).
• Маршрутизація: Ім'я файлу (hello.js) відповідає кінцевій точці /api/hello.

Динамічні API маршрути

Структура файлу:

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

Впровадження:

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

Пояснення:

• Динамічні сегменти: Квадратні дужки ([id].js) позначають динамічні сегменти маршруту.
• Доступ до параметрів: Використовуйте req.query.id для доступу до динамічного параметра.
• Обробка методів: Використовуйте умовну логіку для обробки різних HTTP-методів (GET, PUT, DELETE тощо).

Обробка різних HTTP-методів

Хоча базовий приклад API-маршруту обробляє всі HTTP-методи в межах однієї функції, ви можете структурувати свій код для явної обробки кожного методу для кращої ясності та підтримуваності.

Приклад:

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

Найкращі практики:

• Розділення обов'язків: Чітко розділяйте логіку для різних HTTP методів.
• Послідовність відповідей: Забезпечте послідовні структури відповідей для зручності обробки на стороні клієнта.
• Обробка помилок: Гладко обробляйте непідтримувані методи та несподівані помилки.

Заголовки безпеки підвищують безпеку вашого додатку, інструктуючи браузери, як обробляти контент. Вони допомагають пом'якшити різні атаки, такі як Cross-Site Scripting (XSS), Clickjacking та визначення типу MIME:

• Політика безпеки контенту (CSP)
• X-Frame-Options
• X-Content-Type-Options
• Strict-Transport-Security (HSTS)
• Політика реферера

Приклади:

// 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 оптимізує зображення для продуктивності, але неправильні налаштування можуть призвести до вразливостей безпеки, таких як дозволення ненадійним джерелам впроваджувати шкідливий контент.

Приклад поганого налаштування:

// next.config.js

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

Проблема:

• '*': Дозволяє завантажувати зображення з будь-якого зовнішнього джерела, включаючи ненадійні або шкідливі домени. Зловмисники можуть розміщувати зображення, що містять шкідливі корисні навантаження або контент, який вводить користувачів в оману.
• Іншою проблемою може бути дозволити домен де будь-хто може завантажити зображення (наприклад, raw.githubusercontent.com)

Як зловмисники цим зловживають:

Шляхом інжекції зображень з шкідливих джерел, зловмисники можуть здійснювати фішингові атаки, відображати оманливу інформацію або експлуатувати вразливості в бібліотеках рендерингу зображень.

Керуйте чутливою інформацією, такою як API ключі та облікові дані бази даних, безпечно, не піддаючи їх ризику для клієнта.

a. Витік чутливих змінних

Приклад поганої конфігурації:

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

Проблема:

• SECRET_API_KEY: Без префікса NEXT_PUBLIC_ Next.js не відкриває змінні для клієнта. Однак, якщо помилково додати префікс (наприклад, NEXT_PUBLIC_SECRET_API_KEY), вона стає доступною на стороні клієнта.

Як зловмисники цим зловживають:

Якщо чутливі змінні відкриті для клієнта, зловмисники можуть отримати їх, перевіряючи код на стороні клієнта або мережеві запити, отримуючи несанкціонований доступ до API, баз даних або інших сервісів.

Керуйте URL-редиректами та переписуваннями у вашому додатку, забезпечуючи правильне перенаправлення користувачів без введення вразливостей відкритого редиректу.

a. Вразливість відкритого редиректу

Приклад поганої конфігурації:

// next.config.js

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

Проблема:

• Динамічне призначення: Дозволяє користувачам вказувати будь-яку URL-адресу, що дозволяє атаки з відкритим перенаправленням.
• Довіра до введення користувача: Перенаправлення на URL-адреси, надані користувачами без валідації, може призвести до фішингу, розповсюдження шкідливого ПЗ або крадіжки облікових даних.

Як зловмисники цим зловживають:

Зловмисники можуть створювати URL-адреси, які виглядають так, ніби походять з вашого домену, але перенаправляють користувачів на шкідливі сайти. Наприклад:

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

Користувачі, які довіряють оригінальному домену, можуть ненавмисно перейти на шкідливі веб-сайти.

Налаштуйте конфігурації Webpack для вашого додатку Next.js, які можуть ненавмисно ввести вразливості безпеки, якщо з ними не обережно поводитися.

a. Витік чутливих модулів

Приклад поганої конфігурації:

// next.config.js

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

Проблема:

• Викриття чутливих шляхів: Аліасування чутливих директорій та дозволення доступу з боку клієнта може призвести до витоку конфіденційної інформації.
• Упаковка секретів: Якщо чутливі файли упаковані для клієнта, їх вміст стає доступним через карти джерел або перевірку коду з боку клієнта.

Як зловмисники цим зловживають:

Зловмисники можуть отримати доступ або відтворити структуру директорій програми, потенційно знаходячи та експлуатуючи чутливі файли або дані.