Рано или поздно кто-то из нас всегда будет задаваться вопросом, почему скрипт, который вы добавили с помощью dangerouslySetInnerHTML, не запускается. Не нужно больше этому удивляться. Вот чем я хочу с вами поделиться сегодня.
dangerouslySetInnerHTML находится в конце свойства HTML-элемента innerHTML, которое используется для получения или установки разметки HTML / XML, содержащейся в элементе.
Использование innerHTML - не лучшая практика, поскольку это делает ваше приложение уязвимым для атак XSS (межсайтовый скриптинг), и именно по этой причине React специально назвал его как dangerouslySetInnerHTML, напоминая нам, что его использовать опасно. Кроме того, вы можете передать разметку, добавив ее в качестве значения ключа__html в объект, чтобы случайно не передать что-то ему.
const getMarkup = () => ({ __html: "<h1>Hey There!</h1>" });
<div dangerouslySetInnerHTML={getMarkup()} />
Теперь перейдем к делу, innerHTML не принимает скрипты. Допустим, вы добавили скрипт,
const getMarkup = () => ({ __html: "<script>alert('I will not be executed')</script>" });
<div dangerouslySetInnerHTML={getMarkup()} />
он не будет выполнен. HTML5 указывает, что тег <script>, вставленный с innerHTML, не должен выполняться.
Однако есть способы выполнить JavaScript без использования тегов <script>, поэтому все еще существует угроза безопасности всякий раз, когда вы используете innerHTML для установки строк, над которыми вы не можете контролировать.
Так что да, неудачное выполнение сценария с dangerouslySetInnerHTML является ожидаемым поведением, и, как следует из названия, помните, что это опасно в следующий раз, когда вы подумаете о его использовании.
