إزاي تأمن الـ Server Actions في React 19 وتحمي الـ Backend بتاعك؟
أكيد مريت باللحظة دي، لما قعدت تذاكر الـ Server Actions في React 19 وانبهرت بجمالها وسهولتها. خلاص، مفيش API Routes معقدة، ولا وجع دماغ الـ Fetching الكتير. بس لحظة واحدة يا بطل.. السهولة دي سلاح ذو حدين. لأنك ببساطة بتفتح "باب" للـ Server بتاعك مباشرة من الـ Client، ولو الباب ده مش متأمن صح، أي حد ممكن يدخل يعبث بقاعدة البيانات بتاعتك.
Table of contents [Show]
يعني إيه أصلاً Server Actions؟ وليه هي خطيرة؟
الـ Server Actions هي ببساطة دوال (Functions) بتتكتب جوه الكود بتاع الـ Server، وبنقدر نناديها من الـ Frontend كأنها وظيفة عادية. المشكلة هنا إن المبرمج المبتدئ أحياناً بينسى إن الـ Client (المتصفح) مكان غير موثوق فيه (Untrusted Environment). أي حد ممكن يفتح الـ Network Tab، يشوف الطلب اللي طالع، ويعدل فيه براحته. لو أنت مش عامل تحقق (Validation) قوي، يبقى أنت بتسلم مفاتيح الـ Backend للهاكرز على طبق من ذهب.
القاعدة الذهبية: لا تثق أبداً في مدخلات المستخدم (Never Trust Client Inputs)
أول وأهم خطوة في تأمين الـ Server Actions هي إنك تتعامل مع أي بيانات جاية من الـ Client كأنها "ملغمة". لازم تتأكد من شكل البيانات، نوعها، وطولها قبل ما تقرب منها في قاعدة البيانات.
استخدم مكتبات زي Zod عشان تعمل Schema Validation. شوف المثال ده:
// schema.ts
import { z } from 'zod';
export const userUpdateSchema = z.object({
id: z.string().uuid(),
username: z.string().min(3).max(20),
});
جوه الـ Server Action، قبل ما تعمل Update لأي حاجة، لازم تعمل Parse للبيانات دي:
'use server'
import { userUpdateSchema } from './schema';
export async function updateUser(data: unknown) {
const result = userUpdateSchema.safeParse(data);
if (!result.success) {
throw new Error('بيانات غير صالحة يا صاحبي');
}
// هنا نقدر نكمل وبإيدينا مطمنة
}
إنك تتأكد إن المستخدم "مين هو" (Authentication) ده جزء، بس إنك تتأكد إن المستخدم "من حقه يعمل الفعل ده" (Authorization) ده الجزء الأهم. ممنوع أبداً تعتمد على الـ ID اللي جاي من الـ Form عشان تعدل بيانات مستخدم تاني. دايماً استخدم الـ Session أو الـ JWT بتاع المستخدم الحالي اللي متخزن في السيرفر.
دايماً اسأل نفسك: هل اليوزر اللي باعت الـ Action ده هو صاحب الـ Record الحقيقي؟
منع التلاعب بالبيانات الحساسة
لو عندك حقل في الـ Database زي isAdmin، إياك تسمح للـ Client إنه يبعت القيمة دي في الـ Action. حتى لو الـ UI عندك بيخفي الحقل ده، الهاكر ممكن يبعت Request فيه الحقل ده بـ True. الحل إنك دايماً تبني الـ Object اللي هتبعت للـ Database بنفسك جوه الـ Action، وتختار الحقول المسموح بيها بس (Whitelist approach).
نصيحة من أخ لمبرمج
التطوير في React 19 ممتع جداً، بس الأمان مش رفاهية. نصيحتي ليك، قبل ما تخلص أي Feature، اقعد مع نفسك كدة وتقمص دور "الهاكر الشرير". اسأل نفسك: لو أنا مكان الشخص اللي بيستخدم الموقع ده، إيه أكتر حاجة ممكن أبوظها؟ لو لقيت إجابة، يبقى دي أول ثغرة محتاج تقفلها. تعلم الـ Security رحلة طويلة، بس بدايتها إنك تكون "شكاك" في كل بايت (Byte) بيوصل للـ Backend بتاعك.
خليك دايماً متابع التحديثات، واقرأ في الـ OWASP Top 10، لأن عالم الويب بيتطور بسرعة، والذكاء الاصطناعي بيخلي محاولات الاختراق أذكى وأسرع. بالتوفيق في مشروعك الجاي!
