Блог

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

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

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

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

Кэти

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

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

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

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

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