Безпека і innerHTML

JavaScriptJunior~1 хв читання

Використовувати 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

javascript

import DOMPurify from 'dompurify';

const safeHTML = DOMPurify.sanitize(userInput);
element.innerHTML = safeHTML;

3. На сервері теж роби валідацію і екранування

Фільтруй ввід, особливо у формах і коментарях. XSS може бути і збереженим (зберігається в БД, потім відображається на сторінці).

Підсумок

Проблема	Причина	Безпечне рішення
`innerHTML` виконує код	Вставлений HTML парситься і запускається браузером	Використовуй `textContent`
Користувач може впровадити `<script>` або `onerror`	Браузер довіряє `innerHTML`	Використовуй DOMPurify або серверне очищення
XSS = повний контроль над сторінкою	Атака виконується в контексті твого домену	Перевіряй і екрануй усі користувацькі дані

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.