freeCodeCamp

title	localeTitle
HTML Dom Innerhtml Property	خاصية HTML Dom Innerhtml

خاصية HTML Dom Innerhtml

تقوم innerHTML prop بإرجاع محتوى HTML داخل عنصر محدد وتتيح لك أيضًا تحديد محتوى HTML جديد.

الحصول على عنصر المحتوى

<div id="demo">
  <p>Demo</p>
</div>

var element = document.getElementById("demo");
console.log(element.innerHTML) //logs <p>Demo</p>

محتوى مجموعة العنصر

<div id="demo"></div>

var element = document.getElementById("demo");
element.innerHTML = "<div>Demo</div>";

سوف يكون مثل HTML الآن

<div id="demo">
  <div>Demo</div>
</div>

اعتبارات أمنية

يجب أن تأتي القيمة التي تم تعيينها على innerHTML من مصادر موثوقة ، بما أن جافا سكريبت ستضع أي شيء داخل هذا العنصر وسيتم تشغيله على هيئة HTML عادي.

مثال:

سيؤدي تعيين قيمة " <script>alert();</script> " إلى تشغيل وظيفة "alert ()" في Javascript:

var element = document.getElementById("demo");

element.innerHTML = "<script>alert();</script>";

هذه هي واحدة من الطرق الأكثر شيوعا لارتكاب هجوم XSS. إذا كنت تريد معرفة المزيد من المعلومات وتعلّم كيفية الدفاع عنها ، فراجع هذا المصدر