В чем реальная опасность использования .innerHTML при манипулировании DOM?

Во время завершения Фазы 1 в Школе разработки программного обеспечения Flatiron нас много раз предупреждали не использовать .innerHTML в нашем JavaScript для манипулирования нашими элементами DOM, поскольку это может быть опасно. Это заставило меня задуматься: «Неужели это правда?», «НАСКОЛЬКО это может быть опасно»?. После некоторых исследований я узнал.

В приведенном ниже коде вы можете увидеть несколько «безопасных» примеров использования .innerHTML для изменения текста, отображаемого в наших элементах H4, P и Button. Использование .innerHTML здесь считается «безопасным», поскольку пользователь не может контролировать то, что отображается, но он видит конечный результат.

Вот где таится опасность. В приведенном ниже коде я использовал .innerHTML в моем файле JavaScript, чтобы прикрепить к моей форме несколько новых элементов ввода. Теперь это дает пользователю возможность вводить свои собственные данные «Имя» и «О нас».

При создании полей ввода с помощью .innerHTML пользователь может отправлять на вашу страницу любую информацию, которую он хочет. В приведенном выше сценарии мы надеемся, что они введут текст о музыкальном жанре или информацию о нем. На самом деле это открывает вам доступ к межсайтовому скриптингу или XSS.

Затем встраивается код XSS, либо постоянный (сохраняемый), либо непостоянный (отражающий), и используется для создания хаоса. Существует множество примеров XSS, начиная от небольших изменений изображения и заканчивая более масштабными примерами, такими как:

  • Еще в 2011 году с разницей в 10 дней Facebook обнаружил 3 случая XSS-атак, 2 из которых были нацелены на его пользователей и их данные. В 2020 году Винот Кумар обнаружил почтение благодаря своему входу в систему. Facebook выплатил вознаграждение в размере 20 000 долларов за находку Кумара. (эта Bug Bounty является текущей мета-программой)
  • XSS-уязвимость на основе DOM — ошибка, обнаруженная в 2011 году в ряде плагинов jQuery.
  • В 2018 году у British Airways было затронуто более 350 000 транзакций бронирования в период с августа по сентябрь из-за XSS-атаки, когда подозреваемый хакер Megacart нацеливался на транзакции и платежную информацию пользователей.

Современные библиотеки JavaScript добились успехов в решении этих проблем, включая изменение Reacts .innerHTML на опасноSetInnerHTML.

Не все эти примеры XSS являются тегами .innerHTML, но все они были получены из проверенных входных данных в коде JAVACSCRIPT. Чтобы предотвратить эти типы атак и обеспечить безопасность вашего кода и веб-сайта, всегда проверяйте безопасность любых входных данных. Вот почему вы должны избегать использования .innerHTML в своем коде (и придерживаться нашего хорошего друга .textContent).

ресурсы, которые я использовал в этом сообщении в блоге, были: