请求验证与安全
实现输入验证，保护 API 路由免受常见漏洞的攻击。
请求验证与安全 是 CoddyKit 上的免费 Next.js 15 Fullstack Web Apps 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Next.js 15 Fullstack Web Apps 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Why Validate & Secure Requests?
When building web applications, especially with API routes, you'll receive data from users. This data often comes from forms, client-side requests, or other external sources.
It's crucial to ensure this incoming data is valid and safe. Without proper validation and security measures, your application can be vulnerable to errors, data corruption, or even malicious attacks.
What is Input Validation?
Input validation is the process of ensuring that data provided by a user (or another system) meets specific criteria before your application processes it. This involves checking:
- Data Type: Is it a string, number, boolean?
- Format: Does an email address look like an email? Is a date in the correct format?
- Length: Is a username between 3 and 20 characters?
- Range: Is an age a positive number?
- Content: Does it contain only allowed characters?
Client vs. Server-Side Validation
You might perform validation on the client-side (in the browser) for a better user experience, providing instant feedback.
However, server-side validation is non-negotiable for security and data integrity. Client-side validation can be bypassed by malicious users. Always validate data on your server before processing it or storing it in a database.
Introducing Zod for Validation
Zod is a popular TypeScript-first schema declaration and validation library. It allows you to define the expected shape and types of your data, then validate incoming data against that schema.
Key benefits:
- Type Safety: Infers types from your schemas.
- Robust: Handles complex validation rules.
- Developer Friendly: Easy to read and write.
Basic Zod Schema Example
Let's see how to define a simple Zod schema for user input. This example checks for a valid username, email, and age.
Try running it with both valid and invalid data.
const { z } = require('zod');
const UserSchema = z.object({
username: z.string().min(3, "Username too short"),
email: z.string().email("Invalid email format"),
age: z.number().int().positive("Age must be positive"),
});
const validData = {
username: "coddyuser",
email: "coddy@example.com",
age: 30,
};
const invalidData = {
username: "co",
email: "bad-email",
age: -10,
};
console.log("--- Valid Data Test ---");
try {
const parsed = UserSchema.parse(validData);
console.log("Valid data:", parsed);
} catch (error) {
console.error("Validation failed:", error.errors);
}
console.log("\n--- Invalid Data Test ---");
try {
const parsed = UserSchema.parse(invalidData);
console.log("Valid data:", parsed);
} catch (error) {
console.error("Validation failed:", error.errors);
}Integrating Zod in Route Handlers
In Next.js, you'll use Zod within your API Route Handlers (e.g., app/api/users/route.ts) to validate incoming request bodies. This ensures that any data sent to your API meets your expectations before further processing.
We typically use a try-catch block to handle potential validation errors.
import { NextResponse } from 'next/server';
import { z } from 'zod';
// Define the schema for creating a new post
const CreatePostSchema = z.object({
title: z.string().min(5, 'Title must be at least 5 characters.'),
content: z.string().min(10, 'Content must be at least 10 characters.'),
authorId: z.string().uuid('Author ID must be a valid UUID.'),
});
export async function POST(request: Request) {
try {
const body = await request.json();
// Validate the request body using Zod
const validatedData = CreatePostSchema.parse(body);
// If validation passes, proceed with your logic
// e.g., save to database, perform other operations
console.log('Received valid post data:', validatedData);
return NextResponse.json(
{ message: 'Post created successfully', data: validatedData },
{ status: 201 }
);
} catch (error) {
// We'll handle errors in the next scene!
return NextResponse.json(
{ message: 'An unexpected error occurred.' },
{ status: 500 }
);
}
}Handling Validation Errors Gracefully
When Zod validation fails, it throws a ZodError. It's important to catch this specific error and return a clear, informative response to the client, typically with an HTTP 400 Bad Request status code.
This helps client applications understand what went wrong and display appropriate messages to users.
import { NextResponse } from 'next/server';
import { z } from 'zod';
const CreatePostSchema = z.object({
title: z.string().min(5, 'Title must be at least 5 characters.'),
content: z.string().min(10, 'Content must be at least 10 characters.'),
authorId: z.string().uuid('Author ID must be a valid UUID.'),
});
export async function POST(request: Request) {
try {
const body = await request.json();
const validatedData = CreatePostSchema.parse(body);
console.log('Received valid post data:', validatedData);
return NextResponse.json(
{ message: 'Post created successfully', data: validatedData },
{ status: 201 }
);
} catch (error) {
// Catch ZodError specifically for validation failures
if (error instanceof z.ZodError) {
console.error('Validation failed:', error.errors);
return NextResponse.json(
{ message: 'Validation failed', errors: error.errors },
{ status: 400 }
);
}
// Handle other unexpected errors
console.error('Server error:', error);
return NextResponse.json(
{ message: 'Internal server error' },
{ status: 500 }
);
}
}Beyond Validation: Sanitization
While validation checks if data is *correct*, sanitization cleans or modifies data to remove potentially harmful elements. This is especially important for text inputs that will be displayed in a browser.
For example, removing HTML tags from user-submitted comments helps prevent Cross-Site Scripting (XSS) attacks, where malicious scripts could be injected and executed in other users' browsers.
General API Security Best Practices
Beyond input validation and sanitization, consider these practices for robust API security:
- Use HTTPS: Encrypt all communication.
- Implement Authentication & Authorization: Ensure only legitimate, authorized users can access specific endpoints.
- Rate Limiting: Prevent abuse and brute-force attacks by limiting the number of requests a client can make over time.
- CORS Policies: Configure Cross-Origin Resource Sharing (CORS) headers to control which domains can access your API.
- Error Hiding: Avoid revealing sensitive information in error messages (e.g., stack traces).
Validation Quick Check
You're building a Next.js API route to receive user sign-up data. Which of the following is the most critical reason to perform server-side input validation, even if client-side validation is already in place?
Recap: Validate & Secure Your APIs
Great job! You've learned the importance of input validation and security for Next.js API routes.
- Always validate server-side to protect your application.
- Zod is a powerful tool for defining and enforcing data schemas.
- Handle validation errors gracefully with
400 Bad Requestresponses. - Remember to sanitize inputs and follow general API security best practices.
These steps are fundamental to building robust and secure fullstack Next.js applications!
常见问题解答
「请求验证与安全」课时是免费的吗？
是的 — 「请求验证与安全」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack Web Apps 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。
「请求验证与安全」这节课中我会学到什么？
实现输入验证，保护 API 路由免受常见漏洞的攻击。 你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack Web Apps，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Next.js 15 Fullstack Web Apps 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack Web Apps 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「请求验证与安全」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Next.js 15 Fullstack Web Apps 课中编写并运行代码吗？
能。每节 Next.js 15 Fullstack Web Apps 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。