تفکر امنیت داده در Next.js – کنترل دسترسی، لایه داده، و جلوگیری از نشت اطلاعات

مقدمه

با ظهور Server Components در Next.js، نحوهٔ دریافت و مدیریت داده‌ها تغییر کرده است. این تغییرات نیازمند بازنگری در فرضیات امنیتی سنتی هستند. در این مقاله، رویکردهای امن برای دریافت داده و جلوگیری از نشت اطلاعات بررسی می‌شوند.

رویکردهای دریافت داده

سه رویکرد اصلی برای دریافت داده در Next.js وجود دارد:

• HTTP API: مناسب برای پروژه‌های بزرگ و موجود
• لایه دسترسی به داده (DAL): توصیه‌شده برای پروژه‌های جدید
• دسترسی در سطح کامپوننت: مناسب برای نمونه‌سازی سریع

ترکیب این رویکردها توصیه نمی‌شود، زیرا باعث پیچیدگی در بررسی‌های امنیتی می‌شود.

استفاده از HTTP API

در پروژه‌های موجود، می‌توانید از 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}`,
  },
})

این روش زمانی مناسب است که تیم بک‌اند مستقل باشد یا سیاست‌های امنیتی موجود داشته باشید.

لایه دسترسی به داده (DAL)

برای پروژه‌های جدید، توصیه می‌شود یک لایه داخلی برای دریافت داده بسازید که:

• فقط روی سرور اجرا شود
• بررسی‌های احراز هویت انجام دهد
• فقط داده‌های امن و حداقلی را بازگرداند

مثال:

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 هر دو روی سرور اجرا می‌شوند اما در محیط‌های جداگانه. این باعث می‌شود:

• کامپوننت‌های سرور بتوانند به داده‌های محرمانه دسترسی داشته باشند
• کامپوننت‌های کلاینت نتوانند به داده‌های حساس یا ماژول‌های سرور دسترسی داشته باشند

استفاده از Taint برای جلوگیری از نشت

می‌توانید از APIهای React برای taint کردن داده‌ها استفاده کنید:

• experimental_taintObjectReference
• experimental_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 است. با رعایت این اصول، می‌توانید اپلیکیشنی امن، مقیاس‌پذیر و قابل اعتماد بسازید.