Aplikasi Web Fullstack Next.js 15 · Pelajaran

Pengesahan Permintaan dan Keselamatan

Laksanakan pengesahan masukan dan lindungi laluan API anda daripada kerentanan biasa.

Pelajaran 2 daripada 411 langkah

Pengesahan Permintaan dan Keselamatan ialah pelajaran Aplikasi Web Fullstack Next.js 15 percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Aplikasi Web Fullstack Next.js 15, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Mengapa Mengesahkan dan Melindungi Permintaan?

Apabila membina aplikasi web, khususnya dengan laluan API, anda akan menerima data daripada pengguna. Data ini sering datang daripada borang, permintaan pada sisi klien atau sumber luaran lain.

Memastikan data yang masuk adalah sah dan selamat amat penting. Tanpa langkah pengesahan dan keselamatan yang sewajarnya, aplikasi anda mungkin terdedah kepada ralat, kerosakan data atau serangan berniat jahat.

Apakah Pengesahan Input?

Pengesahan input ialah proses memastikan data yang diberikan oleh pengguna (atau sistem lain) memenuhi kriteria tertentu sebelum aplikasi anda memprosesnya. Proses ini melibatkan semakan:

Jenis Data: Adakah data itu rentetan, nombor atau boolean?
Format: Adakah alamat e-mel kelihatan seperti e-mel? Adakah tarikh menggunakan format yang betul?
Panjang: Adakah nama pengguna mempunyai antara 3 hingga 20 aksara?
Julat: Adakah umur ialah nombor positif?
Kandungan: Adakah kandungan itu hanya mengandungi aksara yang dibenarkan?

Pengesahan pada Klien berbanding pada Pelayan

Anda mungkin melakukan pengesahan pada sisi klien (dalam pelayar) untuk memberikan pengalaman pengguna yang lebih baik serta maklum balas segera.

Walau bagaimanapun, pengesahan pada sisi pelayan tidak boleh dikompromi demi keselamatan dan integriti data. Pengguna berniat jahat boleh memintas pengesahan pada sisi klien. Sentiasa sahkan data pada pelayan anda sebelum memprosesnya atau menyimpannya dalam pangkalan data.

Memperkenalkan Zod untuk Pengesahan

Zod ialah pustaka pengisytiharan skema dan pengesahan yang popular serta mengutamakan TypeScript. Pustaka ini membolehkan anda mentakrifkan bentuk dan jenis data yang dijangka, kemudian mengesahkan data yang masuk berdasarkan skema tersebut.

Manfaat utama:

Keselamatan Jenis: Membuat kesimpulan jenis daripada skema anda.
Teguh: Mengendalikan peraturan pengesahan yang kompleks.
Mesra Pembangun: Mudah dibaca dan ditulis.

Contoh Asas Skema Zod

Mari kita lihat cara mentakrifkan skema Zod yang ringkas untuk input pengguna. Contoh ini menyemak nama pengguna, e-mel dan umur yang sah.

Cuba jalankannya dengan data yang sah dan tidak sah.

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

Mengintegrasikan Zod dalam Pengendali Laluan

Dalam Next.js, anda akan menggunakan Zod dalam Pengendali Laluan API anda (contohnya, app/api/users/route.ts) untuk mengesahkan badan permintaan yang masuk. Ini memastikan semua data yang dihantar ke API anda memenuhi jangkaan anda sebelum pemprosesan selanjutnya.

Kami biasanya menggunakan blok try-catch untuk mengendalikan ralat pengesahan yang mungkin berlaku.

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

Mengendalikan Ralat Pengesahan dengan Baik

Apabila pengesahan Zod gagal, ia menghasilkan ZodError. Adalah penting untuk menangkap ralat khusus ini dan mengembalikan respons yang jelas serta informatif kepada klien, biasanya dengan kod status HTTP 400 Bad Request.

Ini membantu aplikasi klien memahami perkara yang berlaku dan memaparkan mesej yang sesuai kepada pengguna.

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

Melangkaui Pengesahan: Pembersihan

Walaupun pengesahan menyemak sama ada data itu *betul*, pembersihan membersihkan atau mengubah suai data untuk membuang unsur yang berpotensi berbahaya. Hal ini amat penting untuk input teks yang akan dipaparkan dalam pelayar.

Contohnya, membuang tag HTML daripada komen yang dihantar pengguna membantu mencegah serangan Skrip Rentas Tapak (XSS), iaitu serangan apabila skrip berniat jahat boleh disuntik dan dilaksanakan dalam pelayar pengguna lain.

Amalan Terbaik Keselamatan API Umum

Selain pengesahan dan pembersihan input, pertimbangkan amalan berikut untuk keselamatan API yang kukuh:

Gunakan HTTPS: Sulitkan semua komunikasi.
Laksanakan Pengesahan Identiti dan Keizinan: Pastikan hanya pengguna yang sah dan diberi keizinan boleh mengakses titik akhir tertentu.
Pengehadan Kadar: Cegah penyalahgunaan dan serangan kekerasan dengan mengehadkan bilangan permintaan yang boleh dibuat oleh klien dalam tempoh tertentu.
Dasar CORS: Konfigurasikan pengepala Perkongsian Sumber Rentas Asal (CORS) untuk mengawal domain yang boleh mengakses API anda.
Menyembunyikan Ralat: Elakkan mendedahkan maklumat sensitif dalam mesej ralat (contohnya, jejak tindanan).

Semakan Pantas Pengesahan

Anda sedang membina laluan API Next.js untuk menerima data pendaftaran pengguna. Apakah sebab paling penting untuk melakukan pengesahan input pada sisi pelayan walaupun pengesahan pada sisi klien telah dilaksanakan?

Jawab dalam pelajaran interaktif

Imbas Kembali: Sahkan dan Lindungi API Anda

Syabas! Anda telah mempelajari kepentingan pengesahan input dan keselamatan untuk laluan API Next.js.

Sentiasa lakukan pengesahan pada sisi pelayan untuk melindungi aplikasi anda.
Zod ialah alat berkuasa untuk mentakrifkan dan menguatkuasakan skema data.
Kendalikan ralat pengesahan dengan baik menggunakan respons 400 Bad Request.
Ingat untuk membersihkan input dan ikuti amalan terbaik keselamatan API umum.

Langkah ini penting untuk membina aplikasi fullstack Next.js yang teguh dan selamat!

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pengesahan Permintaan dan Keselamatan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Aplikasi Web Fullstack Next.js 15, termasuk “Pengesahan Permintaan dan Keselamatan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pengesahan Permintaan dan Keselamatan”?

Laksanakan pengesahan masukan dan lindungi laluan API anda daripada kerentanan biasa. Anda berlatih Aplikasi Web Fullstack Next.js 15 menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Aplikasi Web Fullstack Next.js 15?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Aplikasi Web Fullstack Next.js 15 di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Pengesahan Permintaan dan Keselamatan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Aplikasi Web Fullstack Next.js 15 ini?

Ya. Setiap pelajaran Aplikasi Web Fullstack Next.js 15 menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Membina Pengendali Laluan API
Pengesahan Permintaan dan Keselamatan
Mengintegrasikan Perkhidmatan Luaran
Pengehadan Kadar dan Pengendalian Ralat API

← Kembali ke Aplikasi Web Fullstack Next.js 15