React символы для HTML-кодирования?

Содержание

Вопрос или проблема
Ответ или решение
HTML-энкодинг в React
Разница в контексте
Устойчивость к XSS
Рекомендации по HTML-энкодингу
Заключение

Вопрос или проблема

Я заметил, что React может кодировать специфические символы в HTML, чтобы предотвратить уязвимости XSS в определенных контекстах. Например, рассмотрим следующий код в App.jsx:

function App() {
    const XSSProblematicChars = "><'\"()&:`";

    return (
        <>
            <h4>Отображаемое: {XSSProblematicChars}</h4>
            <img src={XSSProblematicChars}/>
        </>
    );
}

Соответствующий HTML-выход будет следующим:

<h4>Отображаемое: &gt;&lt;'"()&amp;:`</h4>
<img src="><'&quot;()&amp;:`">

Как показано, кодировка HTML варьируется в зависимости от контекста. Например:

В элементе h4 символы <, > и & закодированы.
В атрибуте src элемента img символы " и & закодированы.

Тем не менее, важно отметить, что только эта кодировка может не обеспечить комплексную защиту от атак XSS. Для иллюстрации рассмотрим следующий код App.jsx. Если элемент ссылки будет нажат, содержимое документа может быть изменено с использованием XSS-пейлоада:

function App() {
    const XSSPayload =
        "javascript:eval(atob('ZG9jdW1lbnQuYm9keS5pbm5lckhUTUw9JzxoMSBzdHlsZT0idGV4dC1hbGlnbjogY2VudGVyOyBwb3NpdGlvbjogYWJzb2x1dGU7IHRvcDogNTAlOyBsZWZ0OiA1MCU7IHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpOyI+ISEhIEhBQ0tFRCAhISE8L2gxPic7'))";

    return (
        <>
            <a href={XSSPayload}>Нажмите, чтобы вызвать XSS</a>
        </>
    );
}

Это происходит потому, что React не кодирует символ :, что позволяет использовать синтаксис javascript: для вызова XSS.

Чтобы решить эту проблему, я намерен создать функцию, которая будет кодировать все проблемные символы в пользовательском вводе, отображаемом на фронтенде. Есть ли еще какие-либо символы, такие как :, которые React мог упустить при кодировании для HTML-выхода?

React не защищает от XSS при использовании синтаксиса привязки данных JSX ({}) в HTML-атрибутах [1].

Рекомендуется делать это для HTML:

import purify from "dompurify";
<div dangerouslySetInnerHTML={{ __html:purify.sanitize(data) }} />

Я бы порекомендовал использовать DOMPurify и не пытаться разрабатывать собственное решение, если у вас нет на это серьезной причины.

Если вы все же хотите разработать собственное решение, [2] описывает безопасный способ кодирования HTML-атрибутов:

Механизм кодирования HTML-атрибутов: кодируйте все символы в формате HTML-сущности &#xHH;, включая пробелы, где HH представляет шестнадцатеричное значение символа в Unicode. Например, A становится A. Все алфавитно-цифровые символы (буквы A-Z, a-z и цифры 0-9) остаются некодированными.

Даже если вы это сделаете, есть HTML-атрибуты (например, onClick), где опасно вставлять данные, предоставленные пользователем. Они также перечислены в [3].

[1] https://snyk.io/blog/10-react-security-best-practices/
[2] https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#output-encoding-rules-summary
[3] https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#output-encoding-for-html-attribute-contexts

Ответ или решение

Обработка небезопасных пользовательских данных в приложениях React — важная задача, особенно в контексте защиты от XSS-атак. В данном ответе мы обсудим, как React кодирует HTML-символы, как это влияет на безопасность вашего приложения, и какие шаги можно предпринять для дополнительной защиты.

HTML-энкодинг в React

React автоматически обрабатывает специальные символы при рендеринге, используя HTML-энкодинг. Например, в следующем фрагменте кода:

function App() {
    const XSSProblematicChars = "&gt;&lt;'\"()&amp;:`";

    return (
        <>
            <h4>Displayed: {XSSProblematicChars}</h4>
            <img src={XSSProblematicChars}/>
        </>
    );
}

При этом код символы, такие как <, >, & в контенте, отображаемом в элементе <h4>, но не захватывает все потенциальные угрозы, такие как символ : в атрибуте src тега <img>.

Разница в контексте

Контекст рендеринга играет критическую роль в том, какие символы являются небезопасными. В частности, в элементе заголовка React корректно кодирует символы для вывода текста, однако в атрибутах HTML, таких как src, эта защита может быть недостаточной. Например, если в ссылке использования в атрибуте будет использоваться javascript:, это может привести к выполнению нежелательного кода, что делает ваше приложение уязвимым к XSS-атакам.

Устойчивость к XSS

Важным является тот факт, что стандартный HTML-энкодинг, осуществляемый React, не всегда обеспечивает полную защиту от XSS. Зачастую, для решения проблемы рекомендуется использовать сторонние библиотеки, такие как DOMPurify. Эта библиотека может безопасно очищать и кодировать вводимые пользователем данные. Пример использования:

import purify from "dompurify";

function App() {
    const userInput = "<img src=x onerror='alert(1)'>";

    return (
        <div dangerouslySetInnerHTML={{ __html: purify.sanitize(userInput) }} />
    );
}

Заключение

Для безопасного отображения пользовательских данных в React или любом другом веб-приложении, понимание контекста рендеринга и применение комплексных мер безопасности, таких как использование специализированных библиотек (например, DOMPurify), являются критически важными. Хотя React уже предлагает некоторые встроенные механизмы защиты, недостаточно полагаться только на них. Рекомендуется также регулярно проверять свои приложения на уязвимости и обновлять подходы к безопасности, следуя последним рекомендациям в рамках кибербезопасности.

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