اذهب إلى المحتوى
  • 0

هل هنالك بديل عن innerHTML أكثر أمانا (JavaScript)

محمد الحربي36

السؤال

سمعت من بعض المبرمجين أن خاصية innerHTML في جافاسكريبت تسبب مشاكل أمنية في الموقع ولا يفضل استخدامها لذلك سؤالي هو:

هل هنالك طريقة أو خاصية أو دالة يمكنني من خلالها الاستغناء عن هذه الخاصية (innerHTML)  بحيث تقوم هذه الدالة الجديدة بنفس العمل الذي تقوم به دالة innerHTML 

وشكرا

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

إذا كانت innerHTML تسبب مشاكل أمنية فهذا لا يعني بالضرورة أن علينا أن نستغني عنها ولكن نتعلم كيف نستعملها بشكل أمن,  وإن إستعمال textContent كبديل هو أمر مناسب إذا كان الهدف هو فقط إضافة وتعديل النص.

الخطر يكمن في حقن أكواد HTML أي markup injection وهذا ما تفعله innerHTML. ولكن الأمر يعتمد على ما تريد فعله لأن innerHTML بحد ذاتها هي أداة يمكن إستعمالها بشكل أمن طالما أن الصفحة أو التطبيق الذي تقوم بإنشاءه لا يتضمن مدخلات من قبل المستخدم خارج سيطرتك. بمعنى أخر إذا كنت لا تقوم بالتحقق أمنياً من مدخلات المستخدم وفي نفس الوقت كنت  بحاجة لإضافة اكواد html ديناميكياً الى الصفحة قيد المعالجة فإنك بهذه الحالة قد تكون عرضة لهجمات XSS.

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

البديل الأكثر أماناً هو innerText إذا كنت تريد ان تضيف نص داخل العنصر، مثل :

<p id="myP"></p>

<script>
  document.getElementById("myP").innerText = "hi from js";
</script>

وإذا كنت تريد ان تضيف عناصر HTML بالإضافة للنصوص :

<div id="myDiv"></div>

<script>
  const myDiv = document.getElementById("myDiv")
  // p نصنع عنصر من النوع 
  const para = document.createElement("p");
  // نسند له نص
  para.innerText = "This is a paragraph";
  // الهاص بنا div نجعله ابن للـ 
  myDiv.appendChild(para);
</script>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

أظنك تشير بشكل ما إلى ثغرة XSS او Cross site scripting، ويتم استغلالها من خلال innerHTML حين يتم حقن سكريبت أو صور أو وثائق جافاسكربت ضمن الوثيقة تستعمل بشكل أو بآخر لاستغلال بيانات المستخدمين. هذا بجانب كون هذا التابع بطيئ نوعا ما مقارنة بمكافئاته من التوابع. علاوة على أنه قد يكسر هيكل الوثيقة.

كبديل أكثر أمانا وأحسن آداءا للتلاعب بعناصر الوثيقة يوجد createElement، appendChild و removeChild وغيرها.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 18 دقائق مضت قال Adnane Kadri:

أظنك تشير بشكل ما إلى ثغرة XSS او Cross site scripting، ويتم استغلالها من خلال innerHTML حين يتم حقن سكريبت أو صور أو وثائق جافاسكربت ضمن الوثيقة تستعمل بشكل أو بآخر لاستغلال بيانات المستخدمين. هذا بجانب كون هذا التابع بطيئ نوعا ما مقارنة بمكافئاته من التوابع. علاوة على أنه قد يكسر هيكل الوثيقة.

كبديل أكثر أمانا وأحسن آداءا للتلاعب بعناصر الوثيقة يوجد createElement، appendChild و removeChild وغيرها.

وهل يمكنني استخدام appendChild لتغيير نص موجود في HTML أو إضافة نص في وسم فارغ؟

لأنني أستخدمها لإنشاء وسوم كأبناء بداخل وسم معين

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 5 دقائق مضت قال محمد الحربي24:

وهل يمكنني استخدام appendChild لتغيير نص موجود في HTML أو إضافة نص في وسم فارغ؟

لأنني أستخدمها لإنشاء وسوم كأبناء بداخل وسم معين

لتغيير نص يمكنك استعمال textContent، اما في الحاجة إلى حقن محتوى HTML يمكنك استعمال الطريقة التي أشرت إليها. قم بإنشاء عنصر واعطه الخصائص اللازمة واحقنه إلى الوثيقة عن طريق appendChild

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 1 ساعة قال Adnane Kadri:

لتغيير نص يمكنك استعمال textContent، اما في الحاجة إلى حقن محتوى HTML يمكنك استعمال الطريقة التي أشرت إليها. قم بإنشاء عنصر واعطه الخصائص اللازمة واحقنه إلى الوثيقة عن طريق appendChild

شكرا لك أخي

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...