التطبيقات المعاصرة ذات الصفحة الواحدة وأمن الواجهة الأمامية

شهد العقد الماضي ارتفاعًا كبيرًا في عدد التطبيقات التي تتبنى نموذج تطبيق الصفحة الواحدة (SPA). تم تصميم هذه التطبيقات بحيث يظهر المحتوى الموجود في كل صفحة جديدة داخل التطبيق على صفحة ويب واحدة، دون الحاجة إلى تحميل صفحات HTML جديدة. تستفيد تطبيقات الصفحة الواحدة من إمكانات JavaScript لمعالجة عناصر نموذج كائن المستند (DOM)، مما يسمح بتحديث كل المحتوى على نفس الصفحة.

تقوم بنية صفحة الويب الأكثر تقليدية بتحميل صفحات مختلفة بينما يحاول المستخدم فتح صفحة ويب جديدة. في هذه الحالة، يتم ربط كل صفحة HTML عادةً بصفحات أخرى. عند تحميل كل صفحة، يقوم المتصفح بجلب صفحة جديدة وعرضها.

حيث يتم تمكين التطبيقات ذات الصفحة الواحدة بواسطة أطر جافا سكريبت مثل React و Angular و VueJS. تساعد هذه الأطر على إخفاء الوظائف المعقدة التي تؤديها SPAs. كما أنها توفر مزايا إضافية مثل المكونات المعيارية القابلة لإعادة الاستخدام، وإدارة الحالة، وما إلى ذلك، وتساعد هذه الأطر الحديثة SPA على تنفيذ صفحات الويب دون عناء، مقارنة بالتطبيقات متعددة الصفحات التي تستخدم Vanilla JavaScript. استخدام JavaScript العادي يجعل من الصعب الحفاظ على تحديث واجهة المستخدم بتغييرات الحالة الديناميكية.

يؤدي ظهور مثل هذه الأطر إلى تغييرات في الآثار الأمنية التي قد تكون لها على الواجهة الأمامية. لذلك، من الضروري فهم آلياتهم الداخلية أثناء تفكيك التعليمات البرمجية من جانب العميل وكيف تغير الأطر الحديثة نواقل الهجوم.

عملية البناء

كما هو معتاد، يقوم المطور بإنشاء صفحة ويب من خلال تحديد بنية الصفحة في ملف HTML وتصميمها في ملف CSS. بعد ذلك، يتم ربطه في HTML باستخدام علامات مثل <style>أو<link>، من خلال تضمين شفرة JavaScript مع <script>العلامات. ومع ذلك، يعد إنشاء تطبيقات أحادية الصفحة أكثر تعقيدًا من ذلك.

توفر الأطر مثل React و Vuejs DOM افتراضيًا، مما يسمح لك بالابتعاد عن HTML الخام. DOM الافتراضي، على عكس DOM العادي، هو مفهوم يتم فيه تخزين تمثيل واجهة المستخدم في الذاكرة، بدلاً من عرضه على المتصفح مع كل تغيير. هذا يسمح بإجراء تغييرات أسرع على DOM. تتم كتابة الكود أيضًا في ملفات JavaScript المعيارية والتي تتم معالجتها بعد ذلك في عملية الإنشاء.

في ما يلي رسم تخطيطي يستعرض عملية الإنشاء:

التحويل

جافا سكريبت هي لهجة ECMAScript وليست معيارًا ثابتًا؛ تتم إضافة ميزات جديدة إلى ECMAScript بمعايير أحدث، كل بضع سنوات. بينما يتم إصدار المعايير الأحدث بشكل متكرر، لا يقوم أي محرك جافا سكريبت للمتصفح (Chromium V8 و Safari Javascript Core و Firefox SpiderMonkey) بتنفيذ جميع مواصفات ECMA بشكل كامل، ولكل منها اختلافات معينة في الميزات التي يدعمها. يجب أيضًا أن تكون التعليمات البرمجية متوافقة مع المتصفحات القديمة التي تم إصدارها لدعم المواصفات القديمة وحدها.

يتيح لك التحويل كتابة التعليمات البرمجية الحديثة التي يتم تحويلها بعد ذلك إلى المعايير والميزات المدعومة في كل مكان، على سبيل المثال ES6 -> ES5. قد تستخدم ثابت، إلى اليسار لتحديد المتغيرات الخاصة بك ولكن المحول يساعد على تحويلها إلى سيارة، داخليًا.

يُستخدم التحويل أيضًا لتحويل التعليمات البرمجية بلهجات جافا سكريبت مثل Typescript و Coffeescript إلى جافا سكريبت عادي. تحتوي كل لهجة على مترجم خاص بها مثل tsc لـ Typescript. بابل هو المترجم الأكثر انتشارًا.

تجميع

يحتوي التطبيق الحديث النموذجي على مئات التبعيات الخارجية عندما تنظر إليه بشكل متكرر وليس من العملي تحميل كل منها على حدة في علامة نصية.

من خلال عملية التجميع، يمكنك أخذ كل بيان استيراد أو طلب، والعثور على الملفات المصدر وتجميعها جميعًا في ملف JavaScript واحد، مع تطبيق النطاق المناسب.

بمساعدة هذه العملية، يتم تجميع كل التعليمات البرمجية التي تجعل التطبيق يعمل معًا؛ يتم تجميع كود منطق الأعمال بالإضافة إلى كود اللوحة المعيارية معًا.

التصغير/التعتيم

عادةً ما يكون إخراج JavaScript النهائي كبيرًا جدًا بسبب المساحات الإضافية أو البيانات غير الضرورية والمتكررة. لذلك، فإن الخطوة الأخيرة في عملية الإنشاء هي تصغير الكود. أثناء عملية التصغير، تتم إزالة التعليقات/المسافات البيضاء، وإعادة تسمية المعرفات إلى متغيرات أقصر، وتبسيط إجراءات معينة. تؤدي هذه العملية بعد ذلك إلى التشويش، حيث تكون الشفرة النهائية غير قابلة للقراءة وتختلف اختلافًا كبيرًا عن الكود المصدري.

عادة ما يتم التجميع والتصغير باستخدام حزمة الويب.

كود الهندسة العكسية

بمجرد تصغير الشفرة في عملية الإنشاء، سيتعين على الباحثين الأمنيين إلغاء تصغيرها لدراسة التطبيق. نظرًا لفقدان معظم المعلومات مثل أسماء المتغيرات أثناء عملية التصغير، فلا توجد طريقة مباشرة للقيام بذلك. ومع ذلك، هناك أدوات معينة لمساعدتك في هذه العملية مثل jsnice.org.

تستخدم هذه الأداة التعلم الآلي لاستعادة المتغيرات المصغرة وأسماء الوظائف ومعلومات النوع المستنتج. يقوم أيضًا بتنسيق الكود وإضافة التعليقات.

بعد هذه الخطوة، لا يزال لديك رمز مجمّع، ولكن المنطق الرئيسي سيكون قابلاً للقراءة.

لفضحها في وحدات، نحتاج إلى معرفة كيفية عمل Webpack أو أي أداة تجميع أخرى.

ديبوندلينغ

تبدأ أداة التجميع بملف نقطة الإدخال - جذر منطق التطبيق الخاص بك - وتتبع عبارات الاستيراد والطلب. ثم يقوم بإنشاء رسم بياني للتبعية، وتتطلب الوحدة A B التي تتطلب C و D، وهكذا.

إذا نظرت إلى أجزاء Webpack بعد تمريرها جينتيس<number>، ستجد الكثير من المكالمات إلى «__webpack_require__ ()».

» __حزمة الويب مطلوبة__«مشابه لـ تتطلب صيغة JavaScript في الوظيفة، إلا أنها تحتوي على منطق تحميل الوحدات من الأجزاء.

الطريقة الوحيدة لفك حزمة هي إنشاء شجرة بناء الجملة المجردة (AST) يدويًا، حيث كانت هناك محاولات فضح التي لم تعد تتم صيانتها.

يمكنك استخدام هذه الموارد للدراسة بعمق كيف يعمل ملف الحزمة وللتعرف على الأجزاء الداخلية من Webpack. في هذا فيديو، يوضح لنا مؤسس Webpack توبياس كوبرز كيف تتم عملية التجميع يدويًا.

نصيحة الأمان

كيف تقوم هذه الأطر بتغيير نواقل الهجوم؟

نظام XSS مخفض

تتفاعل لا يعرض HTML ديناميكيًا؛ يقوم بتعقيم المحتوى القادم من جميع المتغيرات، حتى لو لم تحتوي على محتوى ديناميكي. هنا يتم القضاء على XSS تقريبًا ما لم يستخدم المطور وظيفة غير آمنة مثل تم تعيينه بشكل خطير في HTML الداخلي.

في هذه الحالة، حتى إذا وجدت انعكاسًا للبيانات، فلن تتمكن من إدراج HTML.

ممرات CSP الالتفافية

يمكنك استخدام أدوات معينة متوفرة في زاوي لتجاوز سياسة أمان المحتوى (CSP) في بعض الحالات.

<img src=»/» ng-on-error=» $event.srcelement.owndocument.العرض الافتراضي. التنبيه ($event.srcelement.ownerdocument.domain)»

/>

هنا، إذا كان CSP يحظر البرامج النصية المضمنة ولكن الصفحة تستخدم Angular، فيمكنك استخدام سمة ng-on-error للحصول على Angular لتنفيذ JavaScript. غالبًا ما يتم تصحيح هذه الأنواع من الأدوات ولكن يتم اكتشافها بانتظام في Vuejs و Angularjs.