مقدمة
الكثير منا سيتعجب عندما يسمع بأن أكثر من 77% من المواقع تستخدم مكتبات بها ثغرات أمنية كما في المقال الذي أصدرته شركة snyk
مرعب! صحيح؟ 
للأسف كثير من المبرمجين ومهندسي الـIT يعتبرون الجافاسكريبت كقنبلة ثغرات! وهذا لقلة الخبرة وعدم الإلمام بهذه الثغرات وكيفية تفاديها.
أصبحت البيانات في عالم المعلوماتية في غاية الأهمية، وهذا هو الدافع لكثير من القراصنة وراء محاولة اختراق أي كيان موجود
في الشبكة العنكبوتية World Wide Web
كيف يتم اختراق تطبيق الجافاسكريبت؟
أولا: تجارب (حقن الشيفرة المصدريّة [Cross-Site-Scripting [XSS)
كما تعودنا، سنقوم بتجربة حية لاختراق بيانات مستخدم بكل سهولة 
سنقوم بالتجربة مع HTML + js و JQuery، ثم نجرب على فريموورك (Vuejs)
تجربة#1 : HTML + js
سنبدأ باختراق وسام <a></a> في الصفحة
فقط اضغط على الرابط 
رجاء فتح الكود التالي في نافذة مستقلة حتى يعمل
في المثال السابق، تم حقن كود خبيث داخل رابط، وهي الصورة الشائعة جدا لاختراقات الحقن الخبيثة
تجربة#2:
هذه التجربة تحتاج إلى شرح قليلا، هناك نظام ترميز اسمه ASCII أو الأسكي بالعربية، وهو اختصار لـ American Standard Code for Information Interchange ويعني الكود القياسي الأمريكي لتبادل المعلومات
المزيد هنا: https://www.tutorialspoint.com/html/html_ascii_codes.htm
كل حرف أو رقم أو رمز له ترميز مرجعي بلغة HTML Entity Codes تفهمها الآلة بشكل عام
فنستطيع كتابة بعض الحروف مثلا بهذا الترميز في صفحة الـ HTML كالمثال التالي:
H => H
سنجد أن المتصفح يقرأ هذا الترميز على أنه حرف H
في التجربة الحالية، لدينا حقل إدخال للمستخدم يملأ فيه بيانات معينة، وضعنا فيه الكود الخبيث
<p>Hello!</p>
<script>alert('XSS #1');</script>
<img onload='alert(window.exampleVar);'
src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
/>
و هناك زر يختبر الكود الخبيث في حالة Escaped، والآخر في حالة Unescaped
في حالة الـunescaped يتم عرض نص الـhtml كما هو دون تغيير
في حالة الـescaped يتم تحويل أي نص في كود html داخل الأقواس {{}} إلى ترميز ASCII بمساعدة مكتبة handlebarsjs، وحتى الكود الخبيث سيتم تحويله لرموز وهذا بدوره سيمنع الجافاسكريبت من تنفيذ الأوامر بهذا الكود الخبيث
بجانب الأزرار زر اختياري لاختيار الكود الذي تود التجربة عليه (jquery/innerHTML)
عند التجربة نجد أن حالة الـunescaped مخترقة بالكامل
ما معنى هذا الكلام؟
شيئين رئيسيين وهما:
1- يجب التحكم في صندوق الإدخال input ووضع ضوابط للمستخدم لضمان عدم وضع كود خبيث
2- يجب تحويل كود الـhtml وتشفيره إلى ترميز ASCII
هاتان النقطتان يتوقف عليهما مصير تطبيقك، أو قاعدة بياناتك بالكامل، ستكون ببساطة لقمة سهلة لقرصان مبتدئ جائع!!!
سنجرب الآن على فريموورك vuejs لنرى صعوبة تطبيق الاختراق السابق إلا في حالة واحدة فقط:
رجاء فتح الكود التالي في نافذة مستقلة حتى يعمل
في هذه التجربة المسليه، عندما نقوم بالمرور بالماوس فوق الزر المشار إليه و أيضا الصورة المشار إليها في الجدول، ينطلق الكود الخبيث
لا تقلق! فها يحدث في حالة واحدة فقط!
دعونا نتفقد الجزء الخاص بالاختراقات في الموقع الرسمي لـvuejs: https://vuejs.org/v2/guide/security.html
كما نلاحظ من الشرح الخاص بموقع vue يتبين لنا أن الفريموورك يستخدم الـblade syntax أو علامة الأقواس المزدوجة التي أشرنا لها سابقا {{}}
في هذه الحالة يتم تحويل كل ما في داخل الأقواس إلى الترميز ASCII ما يساعد في تفادي هجمات الـXSS ويطبع الكود الناتج كنص فقط (انظر الجدول بكود التجربة 
=> الصف الأول)
نجد Vue يطبع لنا نص الكود:
<a onmouseover=alert(document.cookie)>Hover me!</a>
هذه الخطوة قوية في تفادي الهجمات وتسمى Escaping character
الحالة الوحيدة التي تتسبب في مشكلة الاختراق هي عند استخدام v-html والتي تطبع الأشياء كما هي داخل كود الhtml دون تحويل
ولذلك لا ينصح باستخدامها إلا لعرض أي شئ آخر غير البيانات الهامة (يعني ممنوع وضع بيانات مستخدمين مثلا…)
هل توفر لنا الفريمووركات عوامل الأمان اللازمة؟
الإجابة نعم، لكن ليس بنسبة 100%، المبرمج عليه دور كبير في عمل تأمين لتطبيقه الخاص.
كيف أحمي الكود الخاص بي من اختراقات حقن الشيفرة المصدريّة [Cross-Site-Scripting [XSS؟
ثلاث نقاط رئيسية:
1- التأكد من سلامة البيانات التي يدخلها المستخدم Data validation
2- عمل فلترة على حقول الإدخال Filtering بالبحث عن الرموز الضارة
3- تشفير وتحويل الرموز Escaping
أعتذر تلخبطت بين سنايبرادمين ونصر ومحمد 