انا اصمم موقع لأتعلم و اثناء التصميم احاول ان امنع المستخدم يعرف id او طريقة تنسيق style مثل color red width 100px يعني لا اريده معرفة ماذا افعل في الصور او القائمة او تنسيق الموقع من اجل ان امنع المستخدم من تخريب تصميم الموقع و هذا لا يؤثر على حماية الموقع. لكن اتسائل هذا الشيء صحيح ام انا ابالغ لان احاول تصحيح هذا الشيء لساعات.
هل انا ابالغ في تصميم الواجهة الامامية
أنا اري انه من الافضل ,ان تركز على حماية الوظائف الحساسة في الموقع بدل التركيز على إخفاء تفاصيل التصميم، لأن هذا لن يمنع التخريب بشكل فعّال. وإذا الهدف هو التعلم، فهذه تجربة مفيدة، بس لا تضيع وقتك في تصحيح شيء طبيعي في عالم الويب.
أنا لست خبيراً في البرمجة، لكن أليست كل المواقع العالمية تتيح للمستخدم ببساطة معرفة الأكواد المستخدمة في ال front - end عن طريق ال inspect، و view page source?
ما الحاجة إلى ذلك؟ لا يوجد داعي لما تفعله فلن يعود بفائدة ولا أحد يقوم به، فأي شيء يُعرض في المتصفح من كود HTML, CSS, JavaScript يستطيع المستخدم رؤيته، وحتى لو حاولت تشفيره أو إخفاءه، فيمكن الوصول إليه عبر أدوات المطور في المتصفح، ما يتم حمايته هو الكود الخاص بالواجهة الخلفية Back-End.
ما يتم في المشاريع الفعلية للـ Front-End عند نشرها على الإنترنت، هو تنفيذ Minification و Bundling بالإضافة إلى Compression لكود HTML, CSS, JS بحيث يتم تجميع كل الكود في ملف واحد فقط وحذف أية مسافات لتقليص عدد السطور وأيضًا ضغط الكود ليصبح صعب القراءة ولتوفير أداء أفضل.
بمعنى الكود التالي:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>موقعي</title>
<!-- تعليق -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>مرحباً بك</h1>
<p>نص تجريبي</p>
</div>
</body>
</html>
يصبح:
<!DOCTYPE html><html lang="ar"><head><meta charset="UTF-8"><title>موقعي</title><link rel="stylesheet" href="styles.min.css"></head><body><div class="container"><h1>مرحباً بك</h1><p>هذا نص تجريبي</p></div></body></html>
وكود جافاسكريبت التالي:
function calculateTotal(price, quantity) {
const subtotal = price * quantity;
const tax = subtotal * 0.15;
return subtotal + tax;
}
يصبح:
function a(b,c){const d=b*c;return d+d*.15}
وكذلك في بعض المشاريع يتم الكود إلى إصدار ES5 من جافاسكريبت لكي يتوافق مع المتصفحات القديمة، بالتالي الكود يتم تحويله وذلك يُعرف باسم transpiling حيث يتم استخدام أدوات مثل Babel.
ولكن ذلك لا يعني أنّه لا يُمكن الوصول للكود في المتصفح، بل هو مُتاح للجميع.
وهناك تقنية أخرى تتم وهي Obfuscation لتشويش الكود لكن ذلك أمر متقدم تستطيع البحث والقراءة عنه، وحتى ذلك يمكن فك تشفيره.
فكرة أنك تمنع المستخدم من رؤية تنسيق الموقع، توحي أنك ترى في المستخدم خصمًا أو متطفلًا. بينما الحقيقة أنك تصمم لأجله، بل الطبيعي أنك حين تكتب أي كود أنك تحاول تحسين الreadability أي أنك تجعل قراءته سهلة للمستخدم لكي يفهم وظيفة كل سطر في حال أراد تعديل شيء في المستقبل، وبالتالي فأنت تقوم بعكس ما ينبغي عليك فعله
صدقت عندما قلت " ترى في المستخدم خصمًا أو متطفلًا" ههههههههههه. السبب هو ان كل مره اسمع ان اذا تريد تصنع موقع او برنامج امن لابد ان تتذكر ان المستخدم هو اول شخص لا تثق به لأنه قد يريد العبث بالبرنامج او الموقع ليجد ثغرة.
ما تقوله صحيح بالفعل يجب عليك أن تتعامل مع المستخدم أنه (مخترق أو يريد تعطيل موقعك) ولكن هذا الأمر لمبرمجين الواجهة الخلفية وليس الأمامية . أى الذين يتعاملون مع البيانات المرسلة من المستخدم ولهذا لا ينبغي أبدا الإعتماد فقط على الواجهة الأمامية .
تخيل مثلا أنك في موقع بنكي تريد تحويل رصيد من حساب إلى حساب أخر . هنا مثلا يتم التحقق من قيمة الرصيد الذي تريد أن ترسله وهو ألا يكون أكبر من الرصيد المتاح لديك . وهنا أنت تستخدم كود جافاسكريبت لمنع هذا الأمر . ولكن تخيل أن بالفعل المستخدم قام بتعطيل هذا الكود وأرسل مبلغ أكبر من الموجود في حسابه فهنا إذا لم يتحقق مطور الواجهة الخلفية من البيانات المرسلة إليه وإعتمد فقط على الواجهة الأمامية إستطاع الاستخدم إختراق النظام وتحويل مبلغ أكبر من المتاح لديه .
لهذا الإهتمام يكون أكبر في الواجهة الخلفية أما الواجهة الأمامية فكل ما يستطيع المستخدم فعله هو تغير البيانات فقط على موقعه وليس شئ أخر فلو قام مثلا بالحصول على id عنصر عرض الرصيد وقام بالتلاعب به فهنا سيتم العرض فقط لديه في الصفحة ولو قام بتحديث الصفحة سيتم عرض الرصيد الأساسي . أما إذا إستطاع التلاعب بالواجهة الخلفية والخادم فحينها بالفعل يمكنه فعل ما يريد.
لهذا في الواجهة الأمامية لا تلقى بالا كبيرا بهذا الأمر والإهتمام ينبغي أن يكون على الواجهة الخلفية .
ولو أردت توجد بعض مكتبات javascript والتي تقوم بتغير أسماء ال id و ال class في كل مرة وذلك لمنع التلاعب وإستخراج البيانات من الموقع الخاص بك وأيضا توجد مكتبات تستخدم لتغير الكود الخاص ب js تماما من حيث وضع أسماء غريبة لجعل الكود غير قابل للقراءة والتلاعب به.
عملك كمبرمج في الدرجة الأولي هو لخدمة المستخدم ومساعدته في تصميم رؤيته وتجسيدها في صورة موقع أو تطبيق يخدم المستخدم وعمله في الدرجة الأولي وبمجرد الأنتهاء من التصميم ينتهي دورك ،ولهذا من متطلبات الجودة في المبرمج هو قدرته علي كتابة Clean Code وهو ما يتيح لأي مبرمج أخر العمل بسهولة في تعديل أو أضافة تحديثات لمشروع لم يقم بأنشائه ،ولذلك قدرة المبرمج علي تسهيل فهم الكود يزيد من جودته وقيمته بين أقرانه ودرجة خبرته في سوق العمل .
التعليقات