Вступ до сценаріїв Cross-Site (XSS) та захисту JavaScript

Списання сайтів (XSS) є одним з найбільш поширених вразливостей веб-безпеки, послідовно рейтинг в OWASP Top 10. Спадок дозволяє атакувати форсунки для введення шкідливих клієнтських сценаріїв на веб-сторінках, виданих іншими користувачами. Ці скрипти можуть крадіжки токени, перенаправлення користувачів на сайти, деобличчччя сторінок, або встановити шкідливе програмне забезпечення. Хоча серверна частина санітарії є критичним, JavaScript грає жильову роль на стороні клієнта, щоб виявити і запобігти цих атак. Ця стаття забезпечує всебічний, виробничо-читацький посібник, щоб захистити ваші програми з XSS.

Розуміння трьох типів XSS

Перед тим як дайвінг в профілактику, важливо розуміти три основні категорії XSS: зберігати, відобразити і DOM-на основі. Кожен вимагає трохи різних засобів виявлення і профілактики.

СКАЧАТИ СКАЧАТИ

Зберігати (персональні) XSS відбувається, коли шкідливий вхід зберігається на сервері (наприклад, в базі даних, форумі, або коментарях) і пізніше подається користувачам без належної санітарії. Заборонено перезавантаження на атаку здійснюється в браузері будь-якого перегляду збереженого вмісту.

Відображені XSS

Відображені XSS відбуваються, коли шкідливий скрипт відбивається на веб-сервері, як правило, через параметр URL або подання форми. Атакатор прагне жертву натискати ремеслане посилання, а в'язаний код виконує відразу. На відміну від збережених XSS, завантаження не зберігається.

СКАЧАТИ ОДОМ-БАСОВАНІ XSS

DOM-на основі XSS є чистою вразливістю клієнтів. Завантажувальний навантаження на атаку модіфікує середовище DOM у браузері жертви. Зловлений код ніколи не торкається сервера; він походить від клієнтського JavaScript, який небезпечний ручить введення користувача (наприклад, читання з , , або ).

Виявлення SS Атак з JavaScript

Виявлення про підозру в роботі перед пошкодженням відбувається. JavaScript може контролювати введення користувачів, відстежувати переміщення DOM та перевіряти дані в пунктах входу. Хоча виявлення клієнта не може зловити всі атаки (особливо якщо атакуючий ремісничий ремесла запити безпосередньо на сервер), він забезпечує цінний рядок захисту.

Вступна вірність та санітарія

Завжди валідуйте і встановіть вводи користувачів на стороні клієнта перед обробкою. Використовуйте замість для запобігання виконання сценаріїв. Наступна функція смуги небезпечних символів з рядка:

function sanitizeInput(input) {
 const div = document.createElement('div');
 div.textContent = input;
 return div.innerHTML;
}

Це працює, оскільки налаштування не інтерпретує теги HTML; він лікує все як звичайний текст. Отримано містить в собі втечу версію будь-яких спеціальних символів HTML (наприклад, , , .

Моніторинг OM Мутацій для підозрілих елементів

Атакери часто вводять теги або обробники подій (], ) в DOM. Використання API, ви можете дивитися для несподіваних вставок елемента. Базовий приклад:

const observer = new MutationObserver((mutations) => {
 mutations.forEach((mutation) => {
 mutation.addedNodes.forEach((node) => {
 if (node.nodeType === 1) { // element node
 if (node.tagName === 'SCRIPT') {
 console.warn('Potential XSS: a script element was injected via DOM.');
 node.remove(); // or log and analyze
 }
 // Check for dangerous attributes
 if (node.hasAttribute('onerror') || node.hasAttribute('onload')) {
 console.warn('Suspicious event handler attribute detected.');
 }
 }
 });
 });
});
observer.observe(document.body, { childList: true, subtree: true });

Кауція: Блокування сценаріїв через може бути обходжений нападниками кліента і може зламати законну функціональність. Використовуйте це як інструмент моніторингу, а не механізм первинної профілактики.

Перевірка параметрів URL та Hash

Для DOM-на основі XSS, читайте компоненти URL безпечно за допомогою і не впустіть безпосередньо вставку значень в HTML. Виявлення спроб перенести виконуваний код:

const params = new URLSearchParams(window.location.search);
const userParam = params.get('name');
if (userParam && /[<>"'\/]/.test(userParam)) {
 console.warn('Potential XSS in parameter: ' + userParam);
 // Do not use this value in the DOM without encoding
}

Запобігання атакам SS з JavaScript

Профілактика вимагає багатошарового підходу. JavaScript самостійно не може забезпечити повну безпеку програми, але при поєднанні з правильним заднім санітарії та . Політика безпеки (CSP), різко знижує ризик.

Закодувати всі дані користувачів, які надходять в DOM

Золоте правило: ніколи не вставляє ненадійні дані безпосередньо в DOM. Використовуйте безпечні методи DOM замість внутрішньогоHTML.

або 

const userInput = getUserInput();
const safeText = document.createTextNode(userInput);
document.getElementById('output').appendChild(safeText);

Коли Ви повинні використовувати , Санітез з бібліотекою

Якщо вам необхідно повністю надати HTML (наприклад, з багатого текстового редактора), спираючись на бібліотеку довіреної санітарії, як DOMPurify]. DOMPurify є широко використовуваною, бібліотечною бібліотекою, яка видаляє шкідливий код при збереженні безпечного HTML.

// Example with DOMPurify (install via npm or CDN)
const dirty = '<img src=x onerror="alert(1)">';
const clean = DOMPurify.sanitize(dirty);
document.getElementById('content').innerHTML = clean;

DOMPurify працює, за допомогою пароля введення, демонтаж небезпечних тегів і атрибутів, і повернення тільки дозволених елементів. Переглянути DOMPurify на GitHub.

Уникайте небезпечних функцій JavaScript

Деякі методи JavaScript і властивості неординарні для надання XSS. Уникайте або суворого керування:

  • — або правильно санітарно-гігієнічне використання.
  • , — же правило.
  • — ніколи не використовується з введенням користувача.
  • — може бути використаний, якщо будь-який вхід не буде забруднений.
  • / з кодом рядка — не уникнути; замість функції використовуйте посилання.
  • конструктор — аналог .

Впровадження політики безпеки контенту (CSP) через JavaScript? Не рекомендується

CSP - це механізм браузера, який обмежує які скрипти можуть працювати. Він зазвичай встановлюється через HTTP-головки, але ви також можете встановити його за допомогою тег або через JavaScript, динамічно створюючи елемент . Однак налаштування CSP у JavaScript менш захищено, тому що атакуючий, який вже має деякий контроль, може його вимкнути. Завжди віддайте перевагу HTTP-голові. Якщо ви повинні використовувати JavaScript для виконання CSP (наприклад, під час розробки), це дуже рано на завантаження сторінки:

const meta = document.createElement('meta');
meta.httpEquiv = 'Content-Security-Policy';
meta.content = "default-src 'self'; script-src 'self' 'unsafe-inline'"; // Be very careful with 'unsafe-inline'
document.head.appendChild(meta);

Для виробництва, налаштування CSP в вашому веб-сервері або зворотному проксі. документації МДМН CSP] забезпечує всебічне керівництво.

Додаткові заходи безпеки

За межами тактики JavaScript-специфічної, повна стратегія запобігання XSS включає в себе ці критичні заходи:

  • Always, які діють на сервері . Перевірка Клієнта може бути обходжено. Не довіряйте дані клієнтів.
  • Використовувати відповідні HTTP-репортажі , , і особливо .
  • Пошуковий код кожного разу, коли ви надаєте дані користувача] Контексти: кодування HTML-сутностей, кодування URL, кодування рядків тощо.
  • Keep залежностей оновлено Ви зможете використовувати JavaScript-бібліотеки (наприклад, старі версії jQuery) є загальним вектором XSS. Використовуйте npm аудиту або аналогічні інструменти.
  • Використовувати рамки з вбудованим захистом XSS React, Angular і Vue автоматично втекти вихід за замовчуванням. Натюрморт, бути обережним або .
  • Запровадження суворого CSP і при можливості. Використовуйте некції або хеш для inline скриптів.

Приклад реального світу: Безпечний коментар

Вкажіть систему коментаря блогу, де користувачі подають повідомлення, які відображаються іншим особам. Ататар може спробувати вставляти . Ось JavaScript підхід, який інтегрується з Backend:

  1. Подання посилок: Санітезування за допомогою перед відправкою на сервер (але сервер все ще повинен бути санізований).
  2. Сервер повертає дані:. Задняк повинен HTML-кодувати текст коментаря.
  3. Клієнт рендерингу: або безпечний двигун шаблону. Ніколи не використовуйте з сирими даними користувача.
function renderComment(comment) {
 const item = document.createElement('div');
 item.className = 'comment';
 const body = document.createElement('p');
 body.textContent = comment.body; // escaped by browser
 item.appendChild(body);
 document.getElementById('comments').appendChild(item);
}

Тестування ваших оборон

Після здійснення профілактики, перевірте вашу заявку за допомогою автоматизованих сканерів та ручних перевантажень. До загальнодоступних тестових векторів відносяться:

  • ]
  • ]
  • ]
  • ]
  • ]

Використовуйте інструменти розробника веб-переглядача для вивчення DOM та забезпечення перевантаження. Також, тестування CSP-контролю, перевіривши консолі для звітів про порушення.

Висновок

Списання сайтів залишається серйозною загрозою, але JavaScript пропонує потужні інструменти для виявлення та профілактики. Виходячи з вводів, моніторинг змін DOM, вихідної вихідної частини та інтеграція з надійними бібліотеками, такими як DOMPurify, ви можете значно затвердити вашу клієнтську безпеку. Пам'ятайте, що клієнтські заходи не є срібною куля; вони доповнюють стратегію захисту, яка включає в себе серверні сантизацію, глави CSP та регулярні перевірки безпеки. Перебування порушника, тест часто і тримати ваші бібліотеки до дати.

Для подальшого читання зверніться до , на сторінці та , через , через що ви можете видалити файл .