با ظهور Server Components در Next.js، نحوهٔ دریافت و مدیریت دادهها تغییر کرده است. این تغییرات نیازمند بازنگری در فرضیات امنیتی سنتی هستند. در این مقاله، رویکردهای امن برای دریافت داده و جلوگیری از نشت اطلاعات بررسی میشوند.
سه رویکرد اصلی برای دریافت داده در Next.js وجود دارد:
ترکیب این رویکردها توصیه نمیشود، زیرا باعث پیچیدگی در بررسیهای امنیتی میشود.
در پروژههای موجود، میتوانید از Server Components برای فراخوانی APIهای REST یا GraphQL استفاده کنید. مثال:
const token = cookies().get('AUTH_TOKEN')?.value
const res = await fetch('https://api.example.com/profile', {
headers: {
Cookie: `AUTH_TOKEN=${token}`,
},
})این روش زمانی مناسب است که تیم بکاند مستقل باشد یا سیاستهای امنیتی موجود داشته باشید.
برای پروژههای جدید، توصیه میشود یک لایه داخلی برای دریافت داده بسازید که:
مثال:
export const getCurrentUser = cache(async () => {
const token = cookies().get('AUTH_TOKEN')
const decoded = await decryptAndValidate(token)
return new User(decoded.id)
})و سپس:
export async function getProfileDTO(slug: string) {
const [rows] = await sql`SELECT * FROM user WHERE slug = ${slug}`
const userData = rows[0]
const currentUser = await getCurrentUser()
return {
username: canSeeUsername(currentUser) ? userData.username : null,
phonenumber: canSeePhoneNumber(currentUser, userData.team)
? userData.phonenumber
: null,
}
}در نمونهسازی سریع، ممکن است دادهها مستقیماً در Server Component دریافت شوند. اما این روش خطر نشت اطلاعات به کلاینت را دارد:
// BAD: exposes full userData to client
return <Profile user={userData} />راهحل بهتر:
export async function getUser(slug: string) {
const [rows] = await sql`SELECT * FROM user WHERE slug = ${slug}`
const user = rows[0]
return { name: user.name }
}در بارگذاری اولیه، Server و Client Components هر دو روی سرور اجرا میشوند اما در محیطهای جداگانه. این باعث میشود:
میتوانید از APIهای React برای taint کردن دادهها استفاده کنید:
experimental_taintObjectReferenceexperimental_taintUniqueValueفعالسازی در next.config.js:
module.exports = {
experimental: {
taint: true,
},
}NEXT_PUBLIC_ شروع شوندserver-only استفاده کنید// lib/data.ts
import 'server-only'امنیت داده در Next.js نیازمند طراحی دقیق مسیرهای دریافت داده، جداسازی محیط سرور و کلاینت، و استفاده از ابزارهای محافظتی مانند DAL، taint و server-only است. با رعایت این اصول، میتوانید اپلیکیشنی امن، مقیاسپذیر و قابل اعتماد بسازید.