Записки фронтендера
Новые методы для работы с HTML 🔥
Предыдущие методы вроде innerHTML, insertAdjacentHTML работали по-разному, были небезопасными, а также имели неявные названия.
Chrome в 148 версии решил это исправить, добавив целый ряд новых методов:
🐥 setHTML(html, options) — заменяет внутреннее содержимое элемента на новый HTML
🐥 replaceWithHTML(html, options) — заменяет сам элемент целиком на переданный HTML
🐥 beforeHTML(html, options) — вставляет HTML перед элементом
🐥 afterHTML(html, options) — вставляет HTML после элемента
🐥 prependHTML(html, options) — вставляет HTML внутрь элемента в качестве первого дочернего узла
🐥 appendHTML(html, options) — вставляет HTML внутрь элемента в качестве последнего дочернего узла
Каждый из них внутренне прогоняет код через Sanitizer API, удаляются все вложенные скрипты и прочий потенциально вредоносный код.
Также у всех этих методов стриминговый и "небезопасный" аналоги или и то и другое вместе:
🦆 streamHTML(options)
🦆 setHTMLUnsafe(html, options)
🦆 streamHTMLUnsafe(options)
🦆 и так далее...
Небезопасные методы, как вы уже наверное догадываетесь, не имеют встроенного Sanitizer API (его нужно писать самостоятельно), а стриминговые, если у вас бекенд присылает HTML кусочками, позволяют также кусочками его и отрисовывать:
const response = await fetch('/dashboard');
await document.body.streamHTMLUnsafe(
response.body
);
⚙️ Поддержка браузерами (пока таблицы есть только для setHTML и setHTMLUnsafe)
2 · 437 ·