Вопрос с собеседования · Frontend

Как React защищает от XSS при выводе строк и когда эта защита не работает?

JuniorReact
Ещё спрашивают так:
  • Что такое dangerouslySetInnerHTML?
Коротко

React экранирует строки, вставленные в JSX: {comment} с текстом <script> покажется как текст, а не выполнится. Защита не работает: в dangerouslySetInnerHTML (HTML вставляется как есть — нужна санитизация, например DOMPurify), в href со схемой javascript: из пользовательских данных, при прямой работе с DOM через ref (innerHTML), в сторонних библиотеках, вставляющих HTML.

  • Пользовательские ссылки проверять: разрешать только http и https
  • Markdown от пользователей — рендерер с санитизацией
  • Название намеренно пугающее: каждое использование — повод для ревью

А ещё Атрибуты тоже экранируются, но опасна сама схема URL

Подробно

<p>{comment.text}</p>                       // безопасно
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }} />
<a href={isSafeUrl(url) ? url : "#"}>ссылка</a>

Что хотят услышать

  • Автоматическое экранирование.
  • Опасные места: dangerouslySetInnerHTML, javascript: в href, innerHTML.
  • Санитизация и проверка URL.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗React полностью исключает XSS при любом коде, включая dangerouslySetInnerHTML
  • ✓JSX экранирует строки, но dangerouslySetInnerHTML и ссылки javascript: требуют санитизации
  • ✗Строка с <script> в {text} выполнится как скрипт
  • ✗dangerouslySetInnerHTML безопасен для пользовательского HTML

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования