TGViewer
Жабаскрипт (веде Віктор Турський) Жабаскрипт (веде Віктор Турський) @jabascript · 4.72K subscribers
Post #139 3.53K
Должен ли фронтендер думать про XSS?

Коротко: Да! Должен!

Я уже не один раз слышал от фронтендеров, что за безопасность должен думать бэкенд разработчик и пускай там делают защиту от XSS. Да, на бэкенде можно снизить риски (к примеру, настроить CSP было бы правильно), но корневая причина находится именно на фронте. И это ответственность фронтендера думать про защиту от XSS.

Кстати, с валидацией данных, мы имеем зеркальную ситуацию: фронтенд может делать валидацию, но бэкенд обязан. 🙂

Почему фронтендер?
⭕ Причина 1️⃣: XSS - это проблема процесса рендеринга данных.
Одни и те же данные можно использовать по разному в разных ситуациях и разных клиентах (браузер, консоль, мобильное приложение). И мы должны рендерить данные безопасно. Сегодня они могут прийти с надежного бэкенда, а завтра с какого-то внешнего, к примеру. Нет причины, чтобы использовать небезопасный рендеринг на клиенте (возможно за редким исключением).

Если этой причины мало, то переходим к следующей 🙂.

⭕ Причина 2️⃣: бэкендер не следит за изменениями фронтенда.
Бэкенд-разработчик на заморачивается у вас там просто textarea на фронте или WYSIWYG-редактор.

Давайте проведем мысленный эксперимент. У нас есть REST API endpoint, который возвращает информацию про пользователя и там два поля: "name" и "bio". Эти два поля отображаются обычным текстом в интерфейсе. И тут приходит продакт-менеджер и говорит, давай дадим пользователям возможность форматировать текст в bio. Ты подключаешь какой-то редактор и в этот момент твое приложение становится уязвимым к XSS, если ты про это не подумаешь.

Почему так произойдет?
❓ Есть ли гарантия того, что бэкендер знает, что нужно сделать изменения на бэке, если задача была чисто фронтовая?
❓ Есть ли гарантия того, что ваш продакт-менеджер поставит бэкендеру задачу про XSS вместе с фронтовой задачей для тебя?
❓ Если ты не знаешь про XSS, то как ты поставишь задачу бэкендеру?
❓ Если ты не знаешь про XSS, то как ты добавишь защиту на фронте?

В итоге бэкендер не в курсе, продакт не занимается этими вопросами, а фронтендер считаешь, что это не его ответственность. То есть, даже с процессной стороны возникает проблема.

Если этих двух причин мало, то переходим к следующей 🙂.

⭕ Причина 3️⃣: бэкенд должен знать про верстку фронта, чтобы сделать правильную защиту.

Стандартный механизм защиты это использования санитайзера (внешния библиотека типа DOMPurify) Никогда не используйте регулярки для защиты от XSS❗.

Но это настолько стандартная для фронтенда задача, что сейчас утверждается браузерный API (https://wicg.github.io/sanitizer-api/). Только это уже говорит о том, что этим должны пользоваться фронтендеры.

Но проблема еще более интересная. Если вы посмотрите на API, то вы заметите, что санитайзер должен знать в какой элемент рендерится html разметка, поскольку это влияет на алгоритм парсинга.

Цитирую: "If the user data is available in string form and the developer wishes to sanitize it now, but apply the result to the DOM later, then the Sanitizer must be informed about the context that it will be used."

Примеры:
sanitizer.sanitizeFor("div", htmlMarkup);
sanitizer.sanitizeFor("table", htmlMarkup);


То есть бэкенд не просто должен знать, что вы будете использовать строку как html, но и должен знать как у вас сверстана страница.

Общий вывод: фронт не должен ожидать безопасных данных с сервера и должен думать про безопасный рендеринг всегда!

Надеюсь, мне удалось убедить фронтендеров задуматься про XSS 🤓
More from @jabascript
  1. Sep 30, 2026Ну шо... https://youtu.be/I5_D15gCDDQ
  2. Sep 29, 2026🏎️🏁Забирайте трофеї й знову нові тижневі челенджі 🏎️🏁
  3. Sep 26, 2026"Найкраща мова програмування - англійська" DHH Зараз багатьом підгорає від останньої допов…
  4. Sep 22, 2026Забирайте трофеї й знову нові тижневі челенджі 🏎️🏁
  5. Sep 14, 2026Втомилися чекати на дашборди? Не знаєте, як тестувати AI-агентів? Або цікавитесь, як працю…
  6. Sep 14, 2026Понеділок й нові челенджі вже доступні 🏁🏎️ 👉 Поміняв систему розподілу призів, щоб не б…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →