文件结构：

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

解释：

• 路由定义： app 目录下的 page.tsx 文件对应于 / 路由。
• 渲染： 该组件渲染主页的内容。
• 布局集成： 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>
)
}

解释：

• 路由定义： about 文件夹中的 page.tsx 文件对应于 /about 路由。
• 渲染： 该组件渲染关于页面的内容。

动态路由允许处理具有可变段的路径，使应用程序能够根据参数（如 ID、slug 等）显示内容。

示例：/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] 表示路由中的动态段，从 URL 中捕获 id 参数。
• 访问参数： 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>
);
}

解释：

• 深层嵌套： dashboard/settings/profile/ 目录下的 page.tsx 文件对应于 /dashboard/settings/profile 路由。
• 层次反映： 目录结构反映了 URL 路径，增强了可维护性和清晰度。

通配符路由处理多个嵌套段或未知路径，提供路由处理的灵活性。

示例：/* 路由

文件结构：

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 包含恶意内容，可能导致意外代码的执行。

这是一种漏洞，允许攻击者操纵客户端路径以执行意外操作，例如跨站请求伪造（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. 攻击者的目标：通过操纵 filePath 执行 CSRF 攻击以删除关键文件（例如，admin/config.json）。
2. 利用 CSPT：

• 恶意输入：攻击者构造一个带有操纵的 filePath 的 URL，例如 ../deleteFile/config.json。
• 结果 API 调用：客户端代码向 /api/files/../deleteFile/config.json 发出请求。
• 服务器的处理：如果服务器不验证 filePath，则会处理该请求，可能删除或暴露敏感文件。

3. 执行 CSRF：

• 构造的链接：攻击者向受害者发送一个链接或嵌入一个恶意脚本，触发带有操纵的 filePath 的下载请求。
• 结果：受害者在不知情的情况下执行该操作，导致未经授权的文件访问或删除。

为什么它容易受到攻击

• 缺乏输入验证：客户端允许任意 filePath 输入，从而启用路径遍历。
• 信任客户端输入：服务器端 API 信任并处理未经过清理的 filePath。
• 潜在的 API 操作：如果 API 端点执行状态更改操作（例如，删除、修改文件），则可能通过 CSPT 被利用。

Next.js 13+ 允许您在同一个 route.js 或 route.ts 文件中定义特定 HTTP 方法的处理程序，从而促进更清晰和更有组织的代码。

示例：

// 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+ 支持高级路由功能，如通用路由和嵌套 API 路由，允许更动态和可扩展的 API 结构。

通用路由示例：

// 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 对象轻松访问多个路由参数。

pages 目录中的 API 路由（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方法的逻辑。
• 响应一致性： 确保一致的响应结构，以便于客户端处理。
• 错误处理： 优雅地处理不支持的方法和意外错误。

安全头部通过指示浏览器如何处理内容来增强应用程序的安全性。它们有助于减轻各种攻击，如跨站脚本 (XSS)、点击劫持和 MIME 类型嗅探：

• 内容安全策略 (CSP)
• X-Frame-Options
• X-Content-Type-Options
• 严格传输安全 (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

用户信任原始域名可能会不知不觉地访问有害网站。

自定义 Next.js 应用程序的 Webpack 配置，如果处理不当，可能会无意中引入安全漏洞。

a. 暴露敏感模块

错误配置示例：

// next.config.js

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

问题：

• 暴露敏感路径： 别名敏感目录并允许客户端访问可能会泄露机密信息。
• 捆绑秘密： 如果敏感文件被捆绑到客户端，其内容可以通过源映射或检查客户端代码访问。

攻击者如何利用它：

攻击者可以访问或重建应用程序的目录结构，可能找到并利用敏感文件或数据。