В каких случаях можно смело добавлять HTML строкой, а когда нужно избегать такого подхода? И на что тогда заменить их?
-
3Если источнику HTML-строки можно доверять, тогда и смело добавлять. Ваш кэп.– andreymal19 июн 2020 в 0:19
2 ответа
Исторически использовались шаблонизаторы, которые работали с разметкой, добавляя в неё некие данные, а потом вставляя через innerHTML. Так делалось из-за того, что парсинг html браузером работал быстрее, чем создание элементов из js. Про скорость обработки в актуальных браузерах сказать точно не могу, но современные фреймвёрки (например реакт и ангуляр) используют createElement
. Ну и если задуматься - что должно быть быстрее - распарсить разметку, а потом создать элементы, или сразу создать элементы? Если очевидный ответ оказывается неверным, то это явное поле для оптимизации браузера.
В любом случае, в первую очередь стоит рассматривать не скорость работы, а корректность.
О чём надо задуматься, работая с разметкой:
- Предполагается ли, что эти данные содержат разметку?
- Данные доверенные или могут быть получены от пользователей (в том числе через url, из внешних источников и т. д.)
- Как изменение разметки скажется на корректности работы страницы в плане скриптов?
- Уверены ли мы, что парсинг разметки приведёт к получению аналогичного dom-дерева?
Разметка ожидается?
В большинстве случаев ответ на этот вопрос - нет.
Что будет с текстом, если его вывести как разметку? С обычным словом - ничего. Но если вдруг попадутся особые символы, то они пропадут. например, мы хотим вывести неравенство a<b
, но браузер съест <b
как начало тега и получившийся результат будет некорректен.
Предположим, что a<b, тогда ...
И это даже с нейтральными текстами, целью которых не ставилось нанести сайту вред.
Пользовательские данные
То, что вводит пользователь, не должно без дополнительной обработки превращаться в html-разметку. Есть два места, где этого не должно быть - на сервере при составлении кода страницы и на клиенте при вставке данных в разметку.
В случае сервера простор для инъекций огромный - можно просто записать <script>alert(1)</script>
или закрыть пару лишних тегов и сломать разметку всей страницы, или попытаться закомментировать часть страницы, или просто через css спозиционировать ссылку на фишинговый сайт поверх лого, ведущего на главную сайта.
Если данные вставляются скриптом в innerHTML
, то разметка не может выходить за рамки соответствующего элемента (однако тег <style>
никто не отменял), а скрипт разместить чуть сложнее: <img src="/no" onerror="alert(1)">
. Но по сути все те же атаки остаются возможны.
document.querySelector('main').innerHTML = '<img src="/no" onerror="console.log(1)">'
<main></main>
Ломаем скрипты?
Что происходит, когда мы меняем разметку через innerHTML
? Вся новая разметка парсится заново, создаются новые html-элементы - даже для той части, которая не менялась. Сразу очевидно, что это неэффективно, но есть проблемы покрупнее. Если скрипты повесили обработчики на какие-то элементы, то после обновления разметки обработчики останутся висеть на старых элементах, которых больше нет в dom-дереве. Поэтому при дополнении разметки стоит выбирать insertAdjacentHTML
, а не innerHTML +=
:
document.getElementById('ih').addEventListener('click', e => {
e.target.parentElement.innerHTML += "<i></i>"
})
document.getElementById('ia').addEventListener('click', e => {
e.target.parentElement.insertAdjacentHTML('beforeend', "<i></i>")
})
document.getElementById('ac').addEventListener('click', e => {
e.target.parentElement.appendChild(document.createElement('i'))
})
i {
display: inline-block;
background: silver;
height: 1em;
width: 1em;
border-radius: 50%;
margin-left: 4px;
vertical-align: middle;
}
<p><button id="ih">innerHTML</button></p>
<p><button id="ia">insertAdjacentHTML</button></p>
<p><button id="ac">appendChild</button></p>
Ломаем разметку?
Любые манипуляции с innerHTML
или dom-элементом не выходят за пределы этого элемента. Однако, если мы настроим чего-то хитрого, что получившееся дерево не является валидным, то после повторного парсинга можно сильно удивиться получившемуся результату:
var oldP = document.querySelector('main p')
var newP = document.createElement('p')
newP.textContent = "456"
oldP.appendChild(newP)
document.querySelector('button').addEventListener('click', e => {
var main = document.querySelector('main')
console.log(main.innerHTML)
main.innerHTML = main.innerHTML
console.log(main.innerHTML)
})
p p { color: blue; }
p + p { color: red; }
<main><p>123</p></main>
<button>Ooops!</button>
Когда использовать работу с разметкой?
- Мы знаем, что добавляем именно разметку, причём из доверенного источника.
- Если есть причины вставлять в разметку данные, то они должны соответствующим образом экранироваться, чтобы гарантированно остаться строкой, а не стать разметкой с элементами.
- Если мы хотим дополнить элемент разметкой, стоит предпочитать именно добавление разметки, а не полную перезапись.
textContent и innerText
Свойство textContent
позволяет легко вставлять произвольный текст в элемент и при этом браузер сам позаботится об экранировании. Если нам надо просто вставить текст, что бы туда не написал пользователь, это идеальный вариант:
document.querySelector('main').textContent = '<img src="/no" onerror="console.log(1)">'
<main></main>
Что касается свойства innerText
, то его почти никогда не надо использовать. При записи оно ведёт себя так же, как textContent
, но в некоторых случаях в десятки раз медленнее. При чтении оно отдаёт не весь текст, а только видимый - это можно использовать при необходимости, но такое требуется крайне редко. В стандарт его всё-таки включили.
var main = document.querySelector('main')
console.log(main.textContent)
console.log(main.innerText)
<main>
<style>p { color: blue; }</style>
<p>123</p>
<p hidden>123</p>
И немного
текста
</main>
Когда работать с элементами?
На мой взгляд - почти всегда кроме редких случаев, когда надо работать с разметкой. Браузер сам заботится об экранировании при использовании textContent
, а при создании и вставке элементов они вставляются именно туда, куда мы хотим и не портят окружающий контент. Тут почти нереально накосячить со случайным закрытием тега не в том месте.
Что почти наверняка является ошибкой?
- Помещение пользовательских или не доверенных данных в разметку.
- Чтение чего-либо из
textContent
и последующая запись вinnerHTML
- тут правило простое - откуда прочитали, туда и записали. Если перенос в любую сторону оказывается побочным эффектом (а не намеренным понимаемым действием), то он как минимум ломает отображение данных, а как максимум - создаёт уязвимость на сайте. Да и вообще, все манипуляции над разметкой как строкой надо выполнять осторожно. - Использование
+=
наinnerHTML
.
Также нежелательна слишком частая работа с dom-элементами, находящимися в докумменте. Вставка элемента в документ после завершения работы над ним может дать существенное улучшение производительности. Если надо вставить группу элементов, то можно использовать document fragment.
Мне только допилить страницу у себя
Бывает, что код пишется не для сайта, а для того, чтобы совершенно чужую страницу привести к пригодному для печати виду. Какие правила стоит продолжить соблюдать, а какие нет?
Тут можно легче отнестись к производительности и поломке скриптов, но перенос текста в разметку всё равно потенциально ломает данные в неожиданных местах и этого всё ещё стоит избегать. Скрипты из тегов <script>
не исполнятся, а вот инлайновые обработчики событий иногда могут удивить, хотя на современных сайтах их обычно нет.
Можно:
- Использовать HTML пришедший с родного или доверенного сервера, который создавали админы и разработчики;
- HTML который конструировался на сервере из пользовательских данных.
Нельзя:
- Конструировать HTML-контент на клиенте перед отправкой на сервер для хранения;
- Пропускать проверку на наличие HTML-тегов пользовательских данных.
Схема создания пользователем HTML-контента примерно такая:
- Пользователь видит конструктор контента (как тут, на StackOverflow) и заполняет нужные поля, использует доступные инструменты;
- Форма отправляет данные не генерируя каких-либо тегов. Можно, к примеру, использовать JSON:
{ title: "", body: "" ... }
; - Сервер выполняет проверку и очистку полученных данных. Любые (или только опасные) HTML-теги должны быть выброшены, а скрипт без тегов уже больше похож не на скрипт, а на текст;
- Сервер конструирует HTML-строку и сохраняет в БД.
Таким образом за счёт хороших проверки и конструктора на стороне сервера, пользовательский HTML тоже становится доверенным.
-
"Пропускать проверку на наличие HTML-тегов пользовательских данных." - нужна не проверка, а правильный вывод - они должны просто превратиться в текст.– Qwertiy ♦19 июн 2020 в 0:54
-
Почему же, иногда я хочу, чтобы мне пришел именно кусок html, который я таки отображу браузером. 19 июн 2020 в 10:34
-
А вообще иногда код нужно превращать и в текст, как например тут:
<script src="tryToXSS.js"></script>
. Ну вот, похоже код не работает( 19 июн 2020 в 10:37 -
У каждого проекта свои требования! Но в любом случае пропускать пользовательский html, а затем рисовать его без проверок и обработок не следует. 19 июн 2020 в 10:39