JavaScript textContent — текст елемента без розмітки

Властивість textContent читає й записує текстовий вміст елемента — без будь-якої розмітки.

правити

Загальний опис

Це найважливіша властивість у DOM з погляду безпеки. Записуючи в innerHTML текст, який прийшов від користувача, ти дозволяєш йому виконати свій скрипт на твоїй сторінці — це і є XSS-вразливість.

textContent таких проблем не має за визначенням: усе, що в нього записали, лишається текстом. Теґи всередині перетворяться на видимі символи, а не на розмітку.

Від innerText вона теж відрізняється: textContent бере весь текст, включно з прихованим через display: none, і не змушує браузер рахувати макет. innerText показує лише те, що видно — і через це працює повільніше.

правити

Порада

Правило просте: виводиш текст від користувача — завжди textContent. innerHTML лише для розмітки, яку створив ти сам.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
textContent	1+	1+	1+	7+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
textContent	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<div id="safe"></div>
<div id="unsafe"></div>

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

// безпечно: теґ стане видимим текстом
document.getElementById('safe').textContent = input;

// НЕБЕЗПЕЧНО: скрипт виконається
// document.getElementById('unsafe').innerHTML = input;

// читання: увесь текст, включно з прихованим
console.log(document.body.textContent.length);