Урок 33 из 114 · 8 мин

Менять текст и разметку

textContent, innerHTML и почему innerHTML с данными пользователя опасен, value у полей.

Вечная загрузка

На странице висит «Загрузка…», хотя всё давно загрузилось.
Вредный Скрипт
А давайте я в имя пользователя впишу <img src=x onerror=…> — и через innerHTML запущу свой код!
Ника
Поэтому для текста — только textContent. Он вставляет текст как текст, и трюк Вредного Скрипта не сработает.

Ключевое слово

.textContent

Что это: Читает и меняет текст. Разметка внутри строки показывается буквально, а не выполняется.
Зачем: Безопасно выводить любые данные.
Как: JavaScript
document.querySelector("#status").textContent = "Открыто до 22:00";
Так это работает

Ключевое слово

.innerHTML

Что это: Читает и заменяет разметку внутри. Строка разбирается как HTML.
Зачем: Вставить свою, доверенную разметку. Никогда — данные от пользователя.
Как: JavaScript
document.querySelector("#box").innerHTML = "<b>Хит</b> недели";
Так это работает

Ключевое слово

.value

Что это: Текст в <input>, <textarea>, выбранное в <select>.
Зачем: Прочитать, что ввёл пользователь.
Как: JavaScript
const input = document.querySelector("input"); console.log(input.value); input.value = "Аня";
Так это работает

Ника
Данные от людей — только через textContent. innerHTML — для своей разметки.

Ваш ход

Задание

Поставь в #status текст Открыто, а в #guest выведи значение переменной guestName безопасно — через textContent.

const guestName = "<img src=x onerror=alert(1)>";

const guestName = "<img src=x onerror=alert(1)>";

Результат обновляется при вводе

ПрактикаОбязательное задание

Выберите один ответ.

Как вывести на страницу имя, которое ввёл пользователь?

Домашнее заданиеДля закрепления

Выберите один ответ.

Как прочитать текст, введённый в <input>?