LogoENEnglish

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

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

Data securityAccess layerServer ComponentData leakage

~3 دقیقه مطالعه • بروزرسانی ۴ آبان ۱۴۰۴

مقدمه


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


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article