Что такое XSS и как его предотвратить на уровне фронтенда?

XSS (Cross-Site Scripting) — это уязвимость в веб-приложениях, которая позволяет злоумышленникам вставлять и выполнять произвольный скрипт на веб-странице, которую видит другой пользователь. Это может привести к различным последствиям, включая кражу данных (например, куки, токены авторизации) и манипуляцию с контентом на странице.

Примеры XSS

Наиболее распространенные виды XSS:

Как предотвратить XSS на уровне фронтенда?

function sanitizeInput(input) {
    const div = document.createElement('div');
    div.textContent = input; // Конвертирует в текст (экранирует HTML)
    return div.innerHTML;
}

const userInput = '<script>alert("XSS")</script>';
const safeInput = sanitizeInput(userInput);
console.log(safeInput); // &lt;script&gt;alert("XSS")&lt;/script&gt;

import React from 'react';

function UserComment({ comment }) {
    return <div>{comment}</div>; // React экранирует comment
}

Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none';

Заключение

Понимание и предотвращение XSS-уязвимостей является одной из важнейших задач для фронтенд-разработчиков. Следуя приведенным рекомендациям и используя безопасные методики работы с данными, вы сможете значительно повысить безопасность ваших веб-приложений.