Ответ
Использование innerHTML может привести к XSS-атакам, если вставляется недоверенный контент. Злоумышленник может внедрить вредоносный скрипт:
<div id="target"></div>
<script>
document.getElementById('target').innerHTML = '<img src=x onerror="alert('XSS')">';
</script>Другие проблемы:
- Перезаписывает все дочерние элементы и события, что может вызвать утечки памяти
- Медленнее, чем работа с DOM API (
createElement,appendChild) - Ломает интерактивные элементы (
<video>,<canvas>)
Безопасные альтернативы:
textContentдля текстаdocument.createElement+appendдля элементовDOMPurify.sanitize()если нужно обрабатывать HTML из ненадёжных источников
Ответ 18+ 🔞
А, слушай, смотри, есть такая штука — innerHTML. Ну, вроде удобно, сука, строку запихнул и всё нахуй отрендерилось. Но тут, блядь, подвох ебаный! Если ты туда лепишь какой-то левый контент, который от пользователя пришёл или ещё откуда — пиши пропало. Злобный хакер может тебе скрипт воткнуть, и твой сайт, как говно, развалится.
Вот, смотри, как это просто делается, ёпта:
<div id="target"></div>
<script>
document.getElementById('target').innerHTML = '<img src=x onerror="alert('XSS')">';
</script>Видишь? Картинка-то с ошибкой, и тут же выполнится этот alert, а мог бы и не alert, а что похуже, блядь. Вот это и есть XSS-атака, ебать мои старые костыли!
И это ещё не всё, нахуй! У innerHTML других проблем — овердохуища:
- Он, сука, всё внутри элемента выпиливает нахрен — и другие элементы, и все события, которые на них были. Можешь получить утечку памяти, даже не заметишь, как.
- Работает медленнее, чем если бы ты вручную через
createElementиappendChildвсё собирал. Компьютер же не дурак, ему тоже парсить эту строку надо. - Если там были какие-то интерактивные штуки вроде
<video>или<canvas>— всё, пизда, они сломаются. Нахуй так жить?
Так что делать-то, спрашиваешь? Есть же безопасные варианты, не будь мудаком!
- Если тебе просто текст впихнуть — используй
textContent. Он его как текст и вставит, никаких тегов, чисто и безопасно. - Если нужно элементы создать — делай по-человечески:
document.createElement, а потомappend. Да, дольше писать, зато надёжно, блядь. - Ну а если уж совсем припёрло и HTML из ненадёжного источника надо вставить — пропусти его через
DOMPurify.sanitize(). Эта библиотека, как мать родная, всё лишнее вычистит, оставит только безопасное говно.
Вот и весь сказ, ёпта. Не гонись за простотой, а то получишь такую дыру в безопасности, что потом хуй залатаешь.