الحماية من تعديل المدخلات من قبل المستخدم

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

<form id="genderForm" action="#" method="post">
    <label class="regLabel">
        Male
        <input class="gender" asp-for="Gender" class="d-inline" type="radio" id="male" value="Male" name="gender">
    </label>

    <label class="d-inline regLabel ml-2 font-weight-bold">
        Female
        <input class="gender" asp-for="Gender" type="radio" value="Female" id="female" name="gender">
    </label>

    <button type="submit">Submit</button>
</form>

<script>
    document.getElementById('genderForm').addEventListener('submit', function(event) {
        const maleChecked = document.getElementById('male').checked;
        const femaleChecked = document.getElementById('female').checked;

        if (!maleChecked && !femaleChecked) {
            alert('Please select a gender');
            event.preventDefault(); // يمنع إرسال النموذج في حالة عدم اختيار الجنس
        }
    });
</script>

والان دعني اشرح لك مايعنيه هذا الكود بالضبط

•  لدينا عنصري <input> من نوع radio button، كل منهما يمثل اختيارًا للجنس (Male/Female). يتم تحديد معرف (id) وقيمة (value) لكل منهما.
•  قمنا بإنشاء عنصر <form>لارسال البيانات عند الضغط على زر "Submit"
• نستخدم addEventListener للنموذج مع حدث submit للتحقق عندما يحاول المستخدم إرسال النموذج.
• داخل حدث الـ submit نقوم بالتحقق من ما إذا كان المستخدم قد اختار أحد الخيارات (Male/Female) عن طريق التحقق من قيمة checked لكل عنصر radio button.
• إذا لم يكن المستخدم قد اختار أي خيار، فإننا نعرض رسالة تنبيه باستخدام alert() تطلب منه اختيار الجنس.
•  نستخدم event.preventDefault() لمنع إرسال النموذج في حالة عدم اختيار الجنس.

و تذكر أنه لا يمكنك تجنب تعديلات المستخدم بشكل كامل، لكن يمكنك اتخاذ الإجراءات اللازمة لتقليل المخاطر وحماية البيانات بقدر الإمكان.

وبالتوفيق لك...

بتاريخ 13 دقائق مضت قال Najah Alsaker:

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

 

<form id="genderForm" action="#" method="post">
    <label class="regLabel">
        Male
        <input class="gender" asp-for="Gender" class="d-inline" type="radio" id="male" value="Male" name="gender">
    </label>

    <label class="d-inline regLabel ml-2 font-weight-bold">
        Female
        <input class="gender" asp-for="Gender" type="radio" value="Female" id="female" name="gender">
    </label>

    <button type="submit">Submit</button>
</form>

<script>
    document.getElementById('genderForm').addEventListener('submit', function(event) {
        const maleChecked = document.getElementById('male').checked;
        const femaleChecked = document.getElementById('female').checked;

        if (!maleChecked && !femaleChecked) {
            alert('Please select a gender');
            event.preventDefault(); // يمنع إرسال النموذج في حالة عدم اختيار الجنس
        }
    });
</script>

والان دعني اشرح لك مايعنيه هذا الكود بالضبط

•  لدينا عنصري <input> من نوع radio button، كل منهما يمثل اختيارًا للجنس (Male/Female). يتم تحديد معرف (id) وقيمة (value) لكل منهما.
•  قمنا بإنشاء عنصر <form>لارسال البيانات عند الضغط على زر "Submit"
• نستخدم addEventListener للنموذج مع حدث submit للتحقق عندما يحاول المستخدم إرسال النموذج.
• داخل حدث الـ submit نقوم بالتحقق من ما إذا كان المستخدم قد اختار أحد الخيارات (Male/Female) عن طريق التحقق من قيمة checked لكل عنصر radio button.
• إذا لم يكن المستخدم قد اختار أي خيار، فإننا نعرض رسالة تنبيه باستخدام alert() تطلب منه اختيار الجنس.
•  نستخدم event.preventDefault() لمنع إرسال النموذج في حالة عدم اختيار الجنس.

و تذكر أنه لا يمكنك تجنب تعديلات المستخدم بشكل كامل، لكن يمكنك اتخاذ الإجراءات اللازمة لتقليل المخاطر وحماية البيانات بقدر الإمكان.

وبالتوفيق لك...

طريقتك صحيحة و ممتازة و استخدمها. لكن الي اريده اني جربت اعدل في احد المواقع ان اسوي نفس الطريقة لكن القيم لا تتغير حتى لو غيرت كل شي . مثل حتى لو غيرت قيمة الذكر الى انثى او الانثى الى ذكر, القيم صحيحة لكن الموقع سيأخذ القيم قبل التعديل من قبل المستخدم و كأن في حماية من التعديل حتى لو كانت القيم صحيحة .

بتاريخ 1 دقيقة مضت قال Zerious San:

طريقتك صحيحة و ممتازة و استخدمها. لكن الي اريده اني جربت اعدل في احد المواقع ان اسوي نفس الطريقة لكن القيم لا تتغير حتى لو غيرت كل شي . مثل حتى لو غيرت قيمة الذكر الى انثى او الانثى الى ذكر, القيم صحيحة لكن الموقع سيأخذ القيم قبل التعديل من قبل المستخدم و كأن في حماية من التعديل حتى لو كانت القيم صحيحة .

هل يمكنك ذكر لغة ال back-end  التي تعملين عليها ليتم مساعدتك بشكل افضل وتجربة طريقة التحقق بها 

بتاريخ الآن قال Najah Alsaker:

هل يمكنك ذكر لغة ال back-end  التي تعملين عليها ليتم مساعدتك بشكل افضل وتجربة طريقة التحقق بها 

استخدم asp.net core 

مرحبا
ليس هناك طريقة  مباشرة لمنع المستخدم من تغير القيم في inpect وعدم تاثرها في الموقع     ومن الافضل انك تحمي الموقع في backend  وايضا تفعل form Validation قبل ارسال القيم الي ال backend
مثال
 

<script>
    function validateForm() {
        var selectedGender = document.querySelector('input[name="Gender"]:checked');

        if (!selectedGender) {
            alert("Please select a gender.");
            return false;
        }

        var genderValue = selectedGender.value;

      
        if (genderValue !== 'Male' && genderValue !== 'Female') {
            alert("Invalid gender selected.");
            return false;
        }

    

        return true;
    }
</script>

<form onsubmit="return validateForm()" method="post" action="/YourController/YourAction">
    <label class="regLabel">
        Male
        <input class="gender" asp-for="Gender" class="d-inline" type="radio" id="male" name="Gender" value="Male" checked>
    </label>

    <label class="d-inline regLabel ml-2 font-weight-bold">
        Female
        <input class="gender" asp-for="Gender" type="radio" name="Gender" value="Female" id="female">
    </label>


    <input type="submit" value="Submit">
</form>

هنا عندم نقوم بالضغط علي الحفظ مثلا
يقوم ال form بارسال data form الي  validateForm fun لكي يقوم بعملية التاكيد علي المدخلات
وكما لاحظت في الكود اننا نتاكد انه قيمة المستخدمة يجب ان تكون MENاوfemel
2-يوجد طريقة اخري ولالكن سوف تحمل  resource علي client ومن  الممكن ان تنتج عنها مشاكل فيما بعد
هذه الطريقة هي استخدام setInterval وهذه دالة توفر لك انه تسدعي body الخاص بها كل فتره انت تحددها وبداخل ال body
من الممكن نضيف كود لكي يتاكد اذا ان المستخدم قتم بتغير قيمة ام لا من input
مثال
 

setInterval(function () {
            var currentGender = document.querySelector('input[name="Gender"]:checked').value;

            if (currentGender!='Men' || currentGender!='Femle' ) {
                alert('here detect change ');
					windows.reload()
 
            }
        }, 100); 

هني يقوم لموقع كل 100 mis بالنظر الي قيمة select value والتاكد انها اما men او female
واذا اختلفت  قام بعمل reload للموقع

بتاريخ 53 دقائق مضت قال Zerious San:

كن اريد حتى لو غير المستخدم القيمة او بدل اماكن القيم اخليه ما يأثر في الموقع. لا اريد منع ظهور الفحص (inspect)

من المستحيل منع المستخدم من تعديل القيم التى يتم ارسالها الى الخادم . حيث انها تسمى واجهة امامية اى ان المتحكم الرئيسى فيها هو المستخدم وليس المطور . نعم يوجد طرق تقوم بتصعيب الامور على المستخدم ولكن من الماكد انه سيقوم بتخطيها فحتى لو قمنا باضافة اكواد javascript للتحقق من القيم قبل ارسالها فان المستخدم يستطيع ايقافها . ومن اللمكن ايضا الا يحتاج المستخدم الواجهة الامامية اساسا بل يمكن ارسال الطلب عن طريق ال api client مثل postman مثلا او اى شئ اخر ويستطيع ارسال اى بيانات ومن الثغرات المشهورة هى sql injection حيث يستطيع المستخدم حقن اوامر sql وارسالها الى الخادم بغرض الوصول الى البيانات او حتى حذفها والتلاعب بها .

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

وبما انك تستخدم asp.net core  فيمكنك استخدام Model validation للتحقق من صحة البيانات قبل العمل عليها وهذا الرابط للموقع الرسمى لمايكروسوفت ويمكنك التعمق اكثر فيه والبحث عن فيديوهات تقوم بشرح طرق التحقق من البيانات فى الواجهة الخلفية .

بتاريخ 1 دقيقة مضت قال محمد_عاطف:

من المستحيل منع المستخدم من تعديل القيم التى يتم ارسالها الى الخادم . حيث انها تسمى واجهة امامية اى ان المتحكم الرئيسى فيها هو المستخدم وليس المطور . نعم يوجد طرق تقوم بتصعيب الامور على المستخدم ولكن من الماكد انه سيقوم بتخطيها فحتى لو قمنا باضافة اكواد javascript للتحقق من القيم قبل ارسالها فان المستخدم يستطيع ايقافها . ومن اللمكن ايضا الا يحتاج المستخدم الواجهة الامامية اساسا بل يمكن ارسال الطلب عن طريق ال api client مثل postman مثلا او اى شئ اخر ويستطيع ارسال اى بيانات ومن الثغرات المشهورة هى sql injection حيث يستطيع المستخدم حقن اوامر sql وارسالها الى الخادم بغرض الوصول الى البيانات او حتى حذفها والتلاعب بها .

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

وبما انك تستخدم asp.net core  فيمكنك استخدام Model validation للتحقق من صحة البيانات قبل العمل عليها وهذا الرابط للموقع الرسمى لمايكروسوفت ويمكنك التعمق اكثر فيه والبحث عن فيديوهات تقوم بشرح طرق التحقق من البيانات فى الواجهة الخلفية .

 

انا استخدمه model validation و كلامك صحيح, وانا كل المدخلات التي اضعها تحمي المدخلات اذا كانت غير صحيحة او غير مرغوبة . هذا الي اقصده كيف يصير لو رأيت القيم انا غيرت قيمة الجنس لكن عندما أرسلت القيمة . لا زال الموقع يأخذ القيمة قبل التعديل

بتاريخ 25 دقائق مضت قال Mahmoud Hassan19:

مرحبا
ليس هناك طريقة  مباشرة لمنع المستخدم من تغير القيم في inpect وعدم تاثرها في الموقع     ومن الافضل انك تحمي الموقع في backend  وايضا تفعل form Validation قبل ارسال القيم الي ال backend
مثال
 

<script>
    function validateForm() {
        var selectedGender = document.querySelector('input[name="Gender"]:checked');

        if (!selectedGender) {
            alert("Please select a gender.");
            return false;
        }

        var genderValue = selectedGender.value;

      
        if (genderValue !== 'Male' && genderValue !== 'Female') {
            alert("Invalid gender selected.");
            return false;
        }

    

        return true;
    }
</script>

<form onsubmit="return validateForm()" method="post" action="/YourController/YourAction">
    <label class="regLabel">
        Male
        <input class="gender" asp-for="Gender" class="d-inline" type="radio" id="male" name="Gender" value="Male" checked>
    </label>

    <label class="d-inline regLabel ml-2 font-weight-bold">
        Female
        <input class="gender" asp-for="Gender" type="radio" name="Gender" value="Female" id="female">
    </label>


    <input type="submit" value="Submit">
</form>

هنا عندم نقوم بالضغط علي الحفظ مثلا
يقوم ال form بارسال data form الي  validateForm fun لكي يقوم بعملية التاكيد علي المدخلات
وكما لاحظت في الكود اننا نتاكد انه قيمة المستخدمة يجب ان تكون MENاوfemel
2-يوجد طريقة اخري ولالكن سوف تحمل  resource علي client ومن  الممكن ان تنتج عنها مشاكل فيما بعد
هذه الطريقة هي استخدام setInterval وهذه دالة توفر لك انه تسدعي body الخاص بها كل فتره انت تحددها وبداخل ال body
من الممكن نضيف كود لكي يتاكد اذا ان المستخدم قتم بتغير قيمة ام لا من input
مثال
 

setInterval(function () {
            var currentGender = document.querySelector('input[name="Gender"]:checked').value;

            if (currentGender!='Men' || currentGender!='Femle' ) {
                alert('here detect change ');
					windows.reload()
 
            }
        }, 100); 

هني يقوم لموقع كل 100 mis بالنظر الي قيمة select value والتاكد انها اما men او female
واذا اختلفت  قام بعمل reload للموقع

 . هذا الي اقصده كيف يصير لو رأيت القيم انا غيرت قيمة الجنس لكن عندما أرسلت القيمة . لا زال الموقع يأخذ القيمة قبل التعديل

بتاريخ 50 دقائق مضت قال Najah Alsaker:

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

 

<form id="genderForm" action="#" method="post">
    <label class="regLabel">
        Male
        <input class="gender" asp-for="Gender" class="d-inline" type="radio" id="male" value="Male" name="gender">
    </label>

    <label class="d-inline regLabel ml-2 font-weight-bold">
        Female
        <input class="gender" asp-for="Gender" type="radio" value="Female" id="female" name="gender">
    </label>

    <button type="submit">Submit</button>
</form>

<script>
    document.getElementById('genderForm').addEventListener('submit', function(event) {
        const maleChecked = document.getElementById('male').checked;
        const femaleChecked = document.getElementById('female').checked;

        if (!maleChecked && !femaleChecked) {
            alert('Please select a gender');
            event.preventDefault(); // يمنع إرسال النموذج في حالة عدم اختيار الجنس
        }
    });
</script>

والان دعني اشرح لك مايعنيه هذا الكود بالضبط

•  لدينا عنصري <input> من نوع radio button، كل منهما يمثل اختيارًا للجنس (Male/Female). يتم تحديد معرف (id) وقيمة (value) لكل منهما.
•  قمنا بإنشاء عنصر <form>لارسال البيانات عند الضغط على زر "Submit"
• نستخدم addEventListener للنموذج مع حدث submit للتحقق عندما يحاول المستخدم إرسال النموذج.
• داخل حدث الـ submit نقوم بالتحقق من ما إذا كان المستخدم قد اختار أحد الخيارات (Male/Female) عن طريق التحقق من قيمة checked لكل عنصر radio button.
• إذا لم يكن المستخدم قد اختار أي خيار، فإننا نعرض رسالة تنبيه باستخدام alert() تطلب منه اختيار الجنس.
•  نستخدم event.preventDefault() لمنع إرسال النموذج في حالة عدم اختيار الجنس.

و تذكر أنه لا يمكنك تجنب تعديلات المستخدم بشكل كامل، لكن يمكنك اتخاذ الإجراءات اللازمة لتقليل المخاطر وحماية البيانات بقدر الإمكان.

وبالتوفيق لك...

 هذا الي اقصده كيف يصير لو رأيت القيم انا غيرت قيمة الجنس لكن عندما أرسلت القيمة . لا زال الموقع يأخذ القيمة قبل التعديل

من باب الاحتياط قومي بتطبيق هذه الخطوات ايضا ولكن كما ذكرت لك سابقا لا يوجد طريقة مباشرة ومضمونة ممكن ان تحمي من تغيير المستخدم للقيم في ال inspect 

اولا : لنقوم بعمل اجراءات التحقق على البيانات المدخلة باستخدام ال ASP.NET Core

• قم بتعريف نموذج يحتوي على خاصية لتخزين قيمة الجنس

public class GenderModel
{
    [Required(ErrorMessage = "Please select a gender")]
    public string Gender { get; set; }
}

• في Controller قم بإنشاء Action لتلقي طلبات إدخال البيانات والتحقق من صحتها

  [HttpPost]
  public IActionResult ProcessGender(GenderModel model)
  {
      if (!ModelState.IsValid)
      {
          // إعادة توجيه إلى صفحة الإدخال مع عرض الأخطاء
          return View("YourInputView", model);
      }
  
      // المدخلات صحيحة، يمكن متابعة العملية
      return RedirectToAction("SuccessAction");
  }

   

• في صفحة العرض استخدم دليل asp-validation-for لعرض رسائل الخطأ إذا كانت هناك أخطاء في التحقق

  <form asp-action="ProcessGender" method="post">
      <label class="regLabel">
          Male
          <input class="gender" asp-for="Gender" class="d-inline" type="radio" id="male" value="Male">
      </label>
  
      <label class="d-inline regLabel ml-2 font-weight-bold">
          Female
          <input class="gender" asp-for="Gender" type="radio" value="Female" id="female">
      </label>
  
      <span asp-validation-for="Gender" class="text-danger"></span>
  
      <button type="submit">Submit</button>
  </form>

  هنا استخدمنا خاصية Required للتحقق من أنه تم اختيار إحدى الخيارات (Male/Female) قبل إرسال النموذج و إذا كان هناك خطأ في التحقق، سيتم إعادة توجيه المستخدم إلى صفحة الإدخال مع عرض رسالة الخطأ وان كان البيانات صحيحة سيتم الرسال بنجاح 

ثانيا : يمكنك تطبيق ميزات الأمان في ASP.NET Core من خلال استخدام HTTPS كالتالي :

• يجب تهيئة الخادم الخاص بك لدعم HTTPS من خلال تثبيت شهادة SSL/TLS صالحة
• في ASP.NET Core، يمكنك تكوين استخدام HTTPS في ConfigureServices() بإضافة خدمة HTTPS

services.AddHttpsRedirection(options =>
{
    options.RedirectStatusCode = StatusCodes.Status307TemporaryRedirect;
    options.HttpsPort = 443;
});

كما يمكنك تكوين HTTP Strict Transport Security (HSTS) لفرض استخدام HTTPS:

app.UseHsts();

ثالثا : حافظي على نسخ ASP.NET Core والحزم الأخرى المستخدمة محدثة بانتظام للحصول على أحدث التحديثات الأمنية المضمنة بها 

وبالتوفيق لك ..

بتاريخ 3 دقائق مضت قال Zerious San:

انا استخدمه model validation و كلامك صحيح, وانا كل المدخلات التي اضعها تحمي المدخلات اذا كانت غير صحيحة او غير مرغوبة . هذا الي اقصده كيف يصير لو رأيت القيم انا غيرت قيمة الجنس لكن عندما أرسلت القيمة . لا زال الموقع يأخذ القيمة قبل التعديل

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

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