XSS في React و Express

١ما XSS؟

البرمجة النصية عبر المواقع Cross-Site Scripting: يُدخل المهاجم نصًّا فيه كود (HTML أو JavaScript) في مكان يعرضه موقعك لزوّار آخرين، فيعامله المتصفح على أنه جزء من صفحتك ويشغّله. والكود عندها يعمل بصلاحيات موقعك: يقرأ الرموز من localStorage، ويرسل طلبات باسم المستخدم، ويغيّر الصفحة.

القاعدة الذهبية: كل ما يأتي من المستخدم بيانات لا كود. عند عرضه في HTML يجب «تهريبه» Escape: < تصبح < فيظهر الرمز نصًّا ولا يُفسَّر وسمًا.

٢ثغرة في خادم Express

هذا خادم يعرض عبارة البحث في صفحة HTML بقالب نصي. الطلب يحمل في الرابط وسم صورة خبيثًا. انظر ماذا حدث للصفحة في المتصفح المصغّر (المعاينة معزولة، فلا خطر عليك):

const express = require('express');const app = express(); app.get('/search', (req, res) => {  const q = req.query.q || '';  res.send(`<h1>نتائج البحث عن: ${q}</h1><p>لا نتائج.</p>`);   // ✗ خطير}); app.listen(3000);

والإصلاح: نهرّب الرموز الخمسة الخاصة قبل وضع أي قيمة في HTML. محرّكات القوالب (EJS و Pug و Handlebars) تفعل هذا تلقائيًّا، وكذلك React:

const express = require('express');const app = express(); function escapeHtml(s) {  return String(s)    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');} app.get('/search', (req, res) => {  const q = req.query.q || '';  res.send(`<h1>نتائج البحث عن: ${escapeHtml(q)}</h1><p>لا نتائج.</p>`);   // ✓}); app.listen(3000);

٣React يحميك افتراضيًّا… إلا إن طلبت غير ذلك

كل قيمة تضعها بين { } في JSX يهرّبها React تلقائيًّا، فهي آمنة. الخطر في ثلاثة مواضع: dangerouslySetInnerHTML، والروابط href التي يكتبها المستخدم، والتعامل المباشر مع DOM (innerHTML). جرّب الأزرار الثلاثة:

import { useState } from 'react';import DOMPurify from 'dompurify'; const comment = '<b>رائع</b> <img src=x onerror="document.body.style.background=\'#ffcdd2\'">'; export default function App() {  const [mode, setMode] = useState('safe');  return (    <div>      <button onClick={() => setMode('safe')}>{'{ }'} عادي</button>      <button onClick={() => setMode('danger')}>dangerously…</button>      <button onClick={() => setMode('purify')}>DOMPurify</button>      <div className="box">        {mode === 'safe' && <p>{comment}</p>}        {mode === 'danger' && <p dangerouslySetInnerHTML={{ __html: comment }} />}        {mode === 'purify' && <p dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(comment) }} />}      </div>    </div>  );}

«عادي» يعرض الوسوم نصًّا. «dangerously» ينفّذ onerror فتتلون الصفحة. «DOMPurify» يُبقي التنسيق الآمن (الخط العريض) ويحذف الخاصية الخطيرة.

والروابط: الرابط javascript:… ينفّذ كودًا عند النقر. افحص البروتوكول قبل عرض رابط كتبه مستخدم:

function safeUrl(url) {  try {    const u = new URL(url, window.location.origin);    return ['http:', 'https:', 'mailto:'].includes(u.protocol) ? u.href : '#';  } catch {    return '#';  }} <a href={safeUrl(user.website)} rel="noopener noreferrer" target="_blank">موقعي</a>

٤خطوط الدفاع الإضافية

التهريب هو الدفاع الأول. وتضيف هذه الطبقات حماية إن فات الأول شيء:

حزمة helmet تضبط CSP وعشر ترويسات أمان أخرى بسطر واحد:

const express = require('express');const helmet = require('helmet');const app = express(); app.use(helmet());          // CSP و X-Content-Type-Options و Strict-Transport-Security و… app.get('/', (req, res) => res.send('<h1>صفحة محمية</h1>')); app.listen(3000);