Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Безпека і innerHTML». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Використовувати **`innerHTML`** з даними від користувача небезпечно, тому що це може призвести до XSS-вразливості (Cross-Site Scripting). **Ключове:** коли ти присвоюєш щось у `innerHTML`, браузер інтерпретує рядок як HTML-код і виконує все, що в ньому є, включно з тегами `<script>` та подіями на кшталт `onerror`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняВикористовувати `innerHTML` з **даними від користувача** - **небезпечно**, тому що це може призвести до **XSS-вразливості (Cross-Site Scripting)**. Розберемо детально. --- ## Що відбувається Коли ти присвоюєш щось у `innerHTML`, браузер **інтерпретує рядок як HTML-код** і **виконує** все, що в ньому є - включно з тегами `<script>`, подіями (`onerror`, `onclick`) і навіть вбудованим JS. ### Приклад небезпечного коду ```javascript const comment = '<img src=x onerror="alert(`Злам!`)">'; document.querySelector('#comments').innerHTML = comment; ``` Результат: - На сторінці з'явиться зображення (яке не завантажиться), - Запуститься `alert('Злам!')`, - А зловмисник **міг би замість alert надіслати cookies твого користувача** на свій сервер. --- ## Що таке XSS **XSS (Cross-Site Scripting)** - це тип атаки, при якій зловмисник впроваджує JavaScript-код на твою сторінку, а браузер виконує його **в контексті твого сайту**. Це дає хакеру можливість: - вкрасти cookies (зокрема токен авторизації), - підмінити вміст сторінки, - додати фейкові форми для крадіжки даних, - виконувати дії від імені користувача (наприклад, купити товар, надіслати повідомлення тощо). --- ## Як захиститися ### 1. Ніколи не вставляй користувацький ввід через `innerHTML` Якщо тобі потрібно відобразити **тільки текст**, використовуй: ```javascript element.textContent = userInput; ``` або ```javascript element.innerText = userInput; ``` Вони **екранують** HTML, перетворюючи теги на звичайний текст. --- ### 2. Якщо потрібен HTML, використовуй безпечне екранування Якщо тобі все ж потрібно відобразити HTML (наприклад, від модератора чи перевіреного джерела) - пропусти текст через **бібліотеку для очищення HTML**, наприклад: - [DOMPurify](https://github.com/cure53/DOMPurify) ```javascript import DOMPurify from 'dompurify'; const safeHTML = DOMPurify.sanitize(userInput); element.innerHTML = safeHTML; ``` --- ### 3. На сервері теж роби валідацію і екранування Фільтруй ввід, особливо у формах і коментарях. XSS може бути і **збереженим** (зберігається в БД, потім відображається на сторінці). --- ## Підсумок | Проблема | Причина | Безпечне рішення | |---|---|---| | `innerHTML` виконує код | Вставлений HTML парситься і запускається браузером | Використовуй `textContent` | | Користувач може впровадити `<script>` або `onerror` | Браузер довіряє `innerHTML` | Використовуй DOMPurify або серверне очищення | | XSS = повний контроль над сторінкою | Атака виконується в контексті твого домену | Перевіряй і екрануй усі користувацькі дані |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.