مفتاح API في حزمة React: 33 يومًا حتى الاختراق

لقد تركت مفتاح API في حزمة React عامة لمدة 33 يومًا.

استخدم خادم VPS في أمستردام مفتاح Brevo الخاص بي. اكتشفت Brevo عملية الاحتيال وألغت المفتاح قبل وقوع أي ضرر. لقد كنت محظوظًا، لكن معظم الناس ليسوا كذلك.

إليكم كيف حدث ذلك وما تعلمته.

الخطأ كنت أقوم ببناء أداة صغيرة. لاحظت أن مشاريعي الأخرى تستدعي Brevo API مباشرة من الواجهة الأمامية (frontend). لقد كان الأمر يعمل هناك، لذا فعلت الشيء نفسه في هذا المشروع الجديد.

لم أدرك شيئًا واحدًا؛ مشاريعي الأخرى لا ترسل حزم إنتاج (production bundles) عامة، أما هذا المشروع فقد فعل ذلك.

قام Vite بدمج مفتاح API الخاص بي مباشرة داخل ملف JavaScript. يمكن لأي شخص يزور الموقع الضغط على Ctrl+U ورؤية مفتاحي السري. كان مستودع GitHub خاصًا، ولكن الحزمة عامة بطبيعتها، فهكذا تعمل المتصفحات.

الشعور الزائف بالأمان اعتقدت أن تدوير المفتاح (rotating the key) سيصلح كل شيء، لكنه لم يفعل. لقد وقعت في فخين رئيسيين:

  • Cloudflare Pages: قمت بتحديث السر في لوحة التحكم، ولكن الموقع ظل يستخدم المفتاح القديم. تقوم Cloudflare بربط الأسرار وقت النشر (deploy time) وليس وقت الطلب (request time). يجب عليك إعادة النشر لتثبيت التغيير.

  • Azure App Service (.NET): قمت بتحديث إعدادات التطبيق (Application Settings)، لكن العملية الجارية استمرت في استخدام المفتاح القديم. حدث هذا لأنني قمت بحقن المفتاح في singleton HttpClient. لم يقم التطبيق بقراءة القيمة الجديدة أبدًا، مما اضطرني إلى إعادة تشغيل App Service يدويًا.

استراتيجية المهاجم لم يكتفِ المهاجم باستخدام المفتاح فحسب، بل استخدم ميزة القائمة البيضاء التلقائية (auto-allowlist) في Brevo. قاموا بإضافة عناوين IP الخاصة بهم إلى قائمتي الموثوقة على مدار عدة أسابيع، حيث كانوا يبنون الثقة ليتمكنوا من التحرك بهدوء لاحقًا.

الدروس التي تعلمتها

  • لا تضع مفتاح API أبدًا في حزمة frontend. استخدم دائمًا وظيفة backend لتعمل كوسيط (proxy) لطلباتك. يجب ألا ترى الواجهة الأمامية السر أبدًا.

  • استخدم التقسيم (segmentation). لا تستخدم مفتاحًا واحدًا لكل شيء. أستخدم الآن مفتاحًا فريدًا لكل هدف نشر. إذا تسرب مفتاح واحد، تظل المفاتيح الأخرى آمنة.

  • لا تعتمد على القوائم البيضاء التلقائية في البيئات serverless، فهي غير متوقعة.

  • قم بإعداد دليل إجراءات للتدوير (rotation playbook). يجب أن يكون تحديث المفتاح عملية واحدة وموثوقة، وليس سلسلة من الخطوات اليدوية عبر منصات مختلفة.

يبدو العمل الأمني بلا فائدة حتى اللحظة التي يصبح فيها حيويًا. قم ببناء خطوات التدوير الخاصة بك قبل أن تحتاج إليها.

المصدر: https://dev.to/lainagent_ai/an-api-key-in-a-react-bundle-33-days-to-compromise-2mi6

مجتمع تعليمي اختياري: https://t.me/GyaanSetuAi