مقدمة
عايز اتكلم عن واحدة من أكبر المشاكل اللي ممكن تتعمل في ال Frontend Apps وازاي ممكن المشكلة دي بأفضل الأحوال تخسر الشركة آلاف الدولارات، وبأسوء الأحوال تدمر سمعة الشركة!
المشكلة هي التعامل مع ال Secret API Keys لأي Service خارجية!
ملحوظة: أنا أقصد ب Frontend Apps هنا اي Web, Mobile, Desktop apps مش المقصود بس ال Web frontend فلو انت بتكتب اي Client Code بيشتغل على ال User Device ومش ع السيرفر فالكلام يهمك إن شاء الله.
تفاصيل المشكلة
لما بتتعامل مع أي Service خارجية زي مثلا AWS لو هنقول مثلا انك بترفع عليها Media Files، الService دي بتديك حاجه اسمها Secret Key بتستخدمها عشان تعمل Authentication معاها، في مثلا Service تقولك ابعتلي ال Secret Key ده مع ال Request وفي Service تانية تطلب منك تعمل Signing لل Request بأستخدام ال Secret Key.
بغض النظر عن طريقة ال Authentication، معظم الناس بتروح تحط ال Secret keys دي في ال frontend code سواء بقى في ال Env file أو حتى ال Source code نفسه!
خطورة كشف Secret Keys
هنا تحصل المصيبة لأن ال Frontend Code بيروح لل User وبالتالي بيروح معاه ال Secret Keys بتاعتك فأي حد يقدر ياخدها ويعمل بيها اي حاجه انت تقدر تعملها وبالتالي ممكن يسحب كل الداتا بتاعة ال Users بتوعك ولو الداتا دي كانت Sensitive فأنت عندك مشكلة كبيرة! او ممكن حتى يستخدم ال Service دي نفسها وانت تدفع الفواتير مكانه وتخسر فلوس!
الحلول المقترحة
الحل الخاطئ:
الناس بتسيب ال Secret keys في الFrontend وتعمل Encryption أو Obfuscation لل Secret keys!
ليه ده حل غلط؟ عشان ال Encryption بيحتاج Encryption key عشان تشفر بيه الداتا بتاعتك وال Frontend محتاج ال Encryption Key ده عشان يقرأ الداتا الأصلية وبالتالي هتضطر تحطه هو كمان في ال Frontend. فانت كده معملتش حاجه لان اي حد هيوصل لل Encryption Key هيفك تشفير الداتا ويرجع الداتا الاصلية (خدها قاعدة عامة ال Encryption مبيحلش المشكلة هو بس يعمل Delegation فبدل ما كنت بتحمي الداتا بقيت بتحمي ال Encryption key اللي شفرت بيه الداتا وبما انك بتبعت الاتنين لل Frontend فأنت معملتش حاجه).
ال Obfuscation وهو انك تخلي الكود بتاعك مش مقروء وصعب فهمه وبالتالي لو حد قرأ السورس كود ميقدرش يفهمه ويطلع الداتا الاصلية. الحل ده بيسموه Security through obsecurity عامل كده زي الصورة اللي في المنشور انت مخبي المفتاح بتاع العربية فوق الكاوتش وبتقول محدش هيوصله بس للاسف ال Assumption ده غلط لان لو اي Attacker فتح النتورك وعرف انك بتعمل Authentication مع ال Services دي من الكلاينت كود هيعرف أن ال Secret key موجود هنا ومع شوية مجهود فإنه يلاقي ال Secret key المستخبي مسئلة وقت فقط.
الحل الصحيح:
انك اي Authentication مع Service خارجية يتم من خلال ال Backend بتاعك وتنقل ال Secret keys لل Backend وانت من ال Front تبعت Request لل Backend وال Backend يعمل ال Request لل Service اللي بتتعامل معاها وبالتالي ال Frontend مش هيعرف اي حاجه عن ال Secret keys (طبعا انت محتاج انك متسبش الدنيا مفتوحة على البحري عندك في الباك ايند وتتأكد من ال Requests ويكون في Authentication/Authorization).
طيب افرض معكش Backend أو متقدرش تعدل عليه لأي سبب؟ اعمل سيرفر backend ع ادك أو استخدم حاجه زي ال Next.js لو كنت شغال React واعمل ال Requests من السيرفر بتاعها.