Каковы плюсы и минусы использования пакета синтаксического анализа HTML, такого как html-react-parser, и опасноSetInnerHtml в React?

Question

У нас есть база данных, содержащая HTML-код, и мы отображаем ее на веб-странице с помощью React, но ее нужно проанализировать.

Изначально я использовал html-response-parser, но после проверки кода мне было предложено использовать вместо него dangerouslySetInnerHtml, потому что у него нет никаких зависимостей.

Я не смог сформулировать какие-либо преимущества использования html-react-parser, кроме того, что он не использует опасноSetInnerHtml, но является ли это преимуществом, и если да, то почему? Каким-то образом избегает опасностей или они просто скрыты?

Большое спасибо,

Кэти

Answer 1

Недавно я изучал эту проблему для проекта Headless CMS, над которым я работаю. Насколько я понимаю:

создает элементы DOM вне ReactDOM.Render()метод, поэтому он не поддерживается динамически библиотекой React. Это в основном сводит на нет цель использования React в первую очередь (отображение и обслуживание виртуальной DOM).

Однако больше беспокоит то, что он уязвим для атак с использованием межсайтовых сценариев (XSS), отсюда и получил свое название. Это очень распространенная форма атаки в Интернете. Вы можете прочитать об этом здесь: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml.

Если вы хотите, чтобы приложение было менее подвержено атакам, вам придется использовать библиотеку очистки, например DOMPurify для dangerouslySetInnerHtml, так что в любом случае у вас, вероятно, будет другая зависимость. После компиляции приложения для производства ( npm build) процесс минимизации делает кодовую базу чрезвычайно компактной, и вы можете заранее провести некоторую оптимизацию с помощью таких методов, как разделение кода, при котором каждый раздел вашей страницы загружается только по запросу, а не все сразу: https://reactjs.org/ docs / code-splitting.html

Лично я бы не стал слишком беспокоиться о некоторых зависимостях - они реальность современной сети. Я склонялся к использованию, но предупреждаю, что не исследовал, снижает ли это уязвимость XSS. Однако, даже если оба уязвимы для XSS-атак, по крайней мере html-react-parser представляет элементы через ReactDOM.render() поэтому они не превращают DOM в кошмарную чушь - это похоже на рецепт катастрофы в будущем.