ازاي تحمي موقعك من هجمات XSS و CSRF في Next.js

لو شغال على مشروع كبير في نيكست لازم تأمن الموقع من هجمات زي XSS وCSRF اللي ممكن تدمر خصوصية المستخدمين وتفتح باب للهاكرز. عشان كدا في البوست ده هشرحلك ازاي تأمن الموقع ضد الهجمات دي بأسلوب بسيط إن شاء الله وهديك أكواد عملية جاهزة تستخدمها في مشروعك.

يعني إيه XSS و CSRF أصلا؟

• XSS (Cross-Site Scripting)

  دي لما حد يدخل أكواد JavaScript ضارة في الموقع زي إنه يحط في فورم الكومنتات فالأكواد دي تشتغل عند أي حد يفتح الصفحة، وده ممكن يخلي الهاكر يسرق بيانات المستخدمين أو يتحكم في الصفحة.

• CSRF (Cross-Site Request Forgery)

  هنا الهاكر بيستغل تسجيل دخول اليوزر ويخليه يعمل حاجات من غير ما يعرف زي انه يحوله فلوس أو يمسح حسابه.

مثال عشان تفهم بيعمل كدا ازاي:
لو المستخدم فاتح موقعك وهو مسجل دخول والهاكر بعتله لينك زي ده كدا:

<img src=”https://your-site.com/api/delete-account” />

أول ما المستخدم يفتح اللينك حسابه هيتمسح من غير ما ياخد باله

إزاي احمي موقعي من الهجمات دي في Next.js؟ تعالي أقولك خطوة بخطوة

أولاً: حماية الـAPI Routes من CSRF

هنستخدم CSRF Tokens

ـ الـCSRF Token هو كود عشوائي بيتولد مع كل Session ولو حد حاول يبعت طلب من غيره يتقفش فورا.

ثبت الباكدج:

npm install csrf

هتعمل Middleware للتحقق من الـCSRF Token

import csrf from ‘csrf’;<br /><br /> if (!process.env.CSRF_SECRET) {<br /><br /> throw new Error(‘CSRF_SECRET لازم يكون متعرف في .env ⚠️’);<br /><br /> }<br /><br /> const tokens = new csrf();<br /><br /> export function verifyCsrfToken(req) {<br /><br /> const token = req.headers[‘x-csrf-token’];<br /><br /> if (!token || !tokens.verify(process.env.CSRF_SECRET, token)) {<br /><br /> throw new Error(‘CSRF Token غير صالح ❌’);<br /><br /> }<br /><br /> }

وبعدين هتستخدمه في الـAPI Routes بتاعتك:

import { verifyCsrfToken } from ‘@/middleware/csrf’;<br /><br /> export default function handler(req, res) {<br /><br /> try {<br /><br /> verifyCsrfToken(req);<br /><br /> res.status(200).json({ message: ‘تمت العملية بنجاح ✅’ });<br /><br /> } catch {<br /><br /> res.status(403).json({ message: ‘CSRF مرفوض ❌’ });<br /><br /> }<br /><br /> }

كده حتى لو الهاكر حاول يبعت طلبات وهمية هيتقفش على طول لو مفيش CSRF Token صحيح.

ثانياً: حماية الموقع من XSS باستخدام Content Security Policy (CSP) 🛡️

يعني إيه CSP؟

ـ الـ CSP زي ما يكون ظابط بيقول للمتصفح إيه اللي مسموح يشتغل في الموقع. (يارب يكون التشبيه كويس بس😆)
هي بتمنع تشغيل أي سكريبت غريب جاي من مصدر غير موثوق.

هتضيف Middleware للهيدرز بتاعت الأمان

module.exports = {<br /><br /> async headers() {<br /><br /> return [<br /><br /> {<br /><br /> source: ‘/(.*)’,<br /><br /> headers: [<br /><br /> {<br /><br /> key: ‘Content-Security-Policy’,<br /><br /> value: “default-src ‘self’; script-src ‘self’; object-src ‘none’;”,<br /><br /> },<br /><br /> {<br /><br /> key: ‘X-Frame-Options’,<br /><br /> value: ‘DENY’,<br /><br /> },<br /><br /> {<br /><br /> key: ‘X-Content-Type-Options’,<br /><br /> value: ‘nosniff’,<br /><br /> },<br /><br /> {<br /><br /> key: ‘Referrer-Policy’,<br /><br /> value: ‘strict-origin-when-cross-origin’,<br /><br /> },<br /><br /> {<br /><br /> key: ‘Strict-Transport-Security’,<br /><br /> value: ‘max-age=63072000; includeSubDomains; preload’,<br /><br /> },<br /><br /> ],<br /><br /> },<br /><br /> ];<br /><br /> },<br /><br /> };

شرح سريع للي عملناه هنا:

• الـ Content-Security-Policy: بيمنع أي سكريبت مش جاي من نفس الموقع
• ـ الـ X-Frame-Options: بيمنع الموقع يشتغل داخل IFrame (يحمي من هجمات Clickjacking).
• ـ الـ X-Content-Type-Options: بيمنع المتصفح من تخمين نوع الملفات.
• الـ Referrer-Policy: بيقلل المعلومات اللي تروح مع الروابط الخارجية.
• الـ Strict-Transport-Security: بيجبر الموقع يشتغل دايما بـHTTPS.

📌 ثالثاً بقا والاهم التريكات دي لازم تطبقها في مشروعك عشان تأمنه وتحمي بيانات المستخدمين في Next.js :

• شفر الـCookies وحط عليها خاصية HttpOnly عشان يمنع الـJavaScript من الوصول للكوكيز.
• فعل خاصية SameSite للكوكيز عشان تمنع أي طلبات من مواقع تانية تكون سبب في CSRF.
• استخدم HTTPS على طول وشفر كل البيانات اللي رايحة وجاية بين المستخدم والسيرفر.

وبكده نكون خلصنا شرحنا عن حمايه الويب سايت من هجمات XSS و CSRF في Next.js
لوعندك سؤال أو استفسار، اكتب في الكومنتات.