واجهة المستخدم الإدارية

يتضمن PRX-WAF لوحة تحكم إدارية بـ Vue 3 + Tailwind CSS مضمَّنة في الملف الثنائي. توفر واجهة رسومية لإدارة المضيفين والقواعد والشهادات وأحداث الأمن وحالة الكتلة.

الوصول إلى واجهة المستخدم الإدارية

تُخدَّم واجهة المستخدم الإدارية بواسطة خادم API على العنوان المُهيَّأ:

http://localhost:9527

بيانات الاعتماد الافتراضية: admin / admin

WARNING

غيِّر كلمة المرور الافتراضية فور تسجيل الدخول الأول. فعِّل مصادقة TOTP ثنائية العوامل لبيئات الإنتاج.

المصادقة

تدعم واجهة المستخدم الإدارية آليتَين للمصادقة:

الطريقة	الوصف
رمز JWT	يُحصَل عليه عبر /api/auth/login ويُخزَّن في localStorage المتصفح
TOTP (اختياري)	كلمة مرور لمرة واحدة مستندة إلى الوقت للمصادقة ثنائية العوامل

API تسجيل الدخول

curl -X POST http://localhost:9527/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"username": "admin", "password": "admin"}'

الاستجابة:

{
  "token": "eyJ...",
  "refresh_token": "..."
}

للحسابات ذات TOTP المُفعَّل، أضِف حقل totp_code:

{"username": "admin", "password": "admin", "totp_code": "123456"}

أقسام لوحة التحكم

المضيفون

إدارة النطاقات المحمية وخوادمها الخلفية:

• إضافة وتعديل وحذف المضيفين
• تبديل حماية WAF لكل مضيف
• عرض إحصاءات الحركة لكل مضيف

القواعد

إدارة قواعد الكشف عبر جميع المصادر:

• عرض قواعد OWASP CRS وModSecurity وCVE والمخصصة
• تفعيل/تعطيل قواعد فردية
• البحث والتصفية حسب الفئة والخطورة والمصدر
• استيراد وتصدير القواعد

قواعد IP

إدارة قوائم السماح والحجب المستندة إلى IP:

• إضافة عناوين IP أو نطاقات CIDR
• ضبط إجراءات السماح/الحجب
• عرض قواعد IP النشطة

قواعد URL

إدارة قواعد الكشف المستندة إلى URL:

• إضافة أنماط URL مع دعم regex
• ضبط إجراءات الحجب/التسجيل/السماح

أحداث الأمن

عرض وتحليل الهجمات المكتشفة:

• خلاصة أحداث في الوقت الفعلي
• تصفية حسب المضيف ونوع الهجوم وعنوان IP المصدر والنطاق الزمني
• تصدير الأحداث بصيغة JSON أو CSV

الإحصاءات

عرض مقاييس الحركة والأمن:

• الطلبات في الثانية
• توزيع الهجمات حسب النوع
• أبرز المضيفين المستهدفة
• أبرز عناوين IP المصدر
• توزيع رمز الاستجابة

شهادات SSL

إدارة شهادات TLS:

• عرض الشهادات النشطة وتواريخ انتهاء الصلاحية
• رفع الشهادات اليدوية
• مراقبة حالة التجديد التلقائي لـ Let's Encrypt

إضافات WASM

إدارة إضافات WebAssembly:

• رفع إضافات جديدة
• عرض الإضافات المحمَّلة وحالتها
• تفعيل/تعطيل الإضافات

الأنفاق

إدارة الأنفاق العكسية:

• إنشاء وحذف الأنفاق المستندة إلى WebSocket
• مراقبة حالة النفق وحركته

CrowdSec

عرض حالة تكامل CrowdSec:

• القرارات النشطة من LAPI
• نتائج فحص AppSec
• حالة الاتصال

الإشعارات

إعداد قنوات التنبيه:

• البريد الإلكتروني (SMTP)
• Webhook
• Telegram

المراقبة في الوقت الفعلي

تتصل واجهة المستخدم الإدارية بنقطة نهاية WebSocket (/ws/events) لبث أحداث الأمن الحية. تظهر الأحداث في الوقت الفعلي عند كشف الهجمات وحجبها.

يمكنك أيضاً الاتصال بـ WebSocket برمجياً:

const ws = new WebSocket("ws://localhost:9527/ws/events");
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log("Security event:", data);
};

تقوية الأمن

تقييد الوصول الإداري بعنوان IP

تحديد الوصول إلى واجهة المستخدم الإدارية وAPI على الشبكات الموثوقة:

[security]
admin_ip_allowlist = ["10.0.0.0/8", "172.16.0.0/12", "192.168.0.0/16"]

تفعيل تحديد المعدل

حماية API الإدارة من هجمات القوة الغاشمة:

[security]
api_rate_limit_rps = 100

إعداد CORS

تقييد المصادر التي يمكنها الوصول إلى API الإدارة:

[security]
cors_origins = ["https://admin.example.com"]

مكدس التقنيات

المكوِّن	التقنية
الواجهة الأمامية	Vue 3 + Tailwind CSS
البناء	Vite
الحالة	Pinia
عميل HTTP	Axios
المخططات	Chart.js
التضمين	ملفات ثابتة تُخدَّم بـ Axum

كود مصدر واجهة المستخدم الإدارية موجود في web/admin-ui/ في المستودع.

الخطوات التالية

• البدء السريع -- إعداد أول مضيف محمي
• مرجع الإعداد -- إعدادات أمن الإدارة
• مرجع CLI -- إدارة بديلة عبر سطر الأوامر