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

البديل الأكثر أماناً هو 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

شكرا لك أخي

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

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

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