Безопасен ли innerHTML с переключателями?

Использование innerHTML с переключателями, где проверяется только пользовательский ввод, относительно безопаснее по сравнению со сценариями, в которых вы напрямую включаете пользовательский ввод в innerHTML. Однако при использовании innerHTML всегда существует определенная степень риска, поскольку при неаккуратном использовании он потенциально может привести к уязвимостям межсайтового скриптинга (XSS).

В вашем конкретном случае кажется, что содержимое, вводимое в innerHTML, представляет собой статическую строку («somehtml»), которая не должна представлять непосредственный риск XSS, поскольку пользовательский ввод не вставляется. Риск был бы выше, если бы вы вставляли пользовательский ввод в innerHTML, так как это могло бы позволить злоумышленнику внедрить вредоносные скрипты.

При этом, как правило, рекомендуется избегать использования innerHTML и выбирать более безопасные альтернативы, такие как textContent или методы, предоставляемые DOM API, такие как createElement, createTextNode и appendChild, для создания элементов DOM и управления ими.

Вот пример того, как вы можете переписать свой код с помощью DOM API:

const topsButton = document.getElementById("tops");
topsButton.addEventListener("click", () => {
  const div = document.createElement("div");
  div.textContent = "somehtml";
  chart.innerHTML = ""; // Clear the contents of the chart element
  chart.appendChild(div);
});

Таким образом, вы используете более безопасный подход к управлению DOM, снижая риск уязвимостей XSS.

Я знаю, что использование innerHTML с пользовательским вводом небезопасно.

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

Риск исходит от неограниченного пользовательского ввода, а не от самого пользовательского ввода. Если у меня есть текстовый ввод, содержимое которого дословно копируется в innerHTML элемента, это обычно считается рискованным или, по крайней мере, весьма сомнительным. Если содержимое перед добавлением на страницу проходит через высококачественный дезинфицирующий HTML-код, это будет значительно менее рискованно.

В этом случае вы просто добавляете известную полезную нагрузку HTML в зависимости от пользовательского ввода. Это не рискованное поведение. Что бы это ни стоило, этот конкретный фрагмент выглядит для меня вполне безопасным, но я не аккредитован как библиотека для очистки HTML!

Кроме того, манипуляции с innerHTML можно считать чем-то вроде «запаха кода» — отчасти из-за аспектов безопасности HTML-инъекций, отчасти потому, что это затрудняет проверку того, что документ «правильно сформирован», что может повлиять на производительность. .... Вместо этого вы можете иметь этот <div> в документе и скрывать/отображать его с помощью CSS и соответствующей разметки ARIA.

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