freeCodeCamp/guide/arabic/javascript/html-dom-innerhtml-property/index.md

1.7 KiB

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

خاصية HTML Dom Innerhtml

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

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

`

Demo

`

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

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

`

`

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

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

`

Demo
`

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

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

مثال:

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

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

element.innerHTML = ""; `

يسمى هذا النوع من الهجوم Scripting عبر الموقع أو XSS باختصار .

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