Перейти на PRO

На что вы обращаете внимание при тестировании поля ввода на веб-сайте?

Тип вопроса: Веб-тестирование Вероятность: 10% Категория: QA Тестировщик

Ответ

Тестирование поля ввода на веб-сайте фокусируется на взаимодействии с браузером, клиент-серверном обмене и специфических веб-угрозах.

Ключевые аспекты для проверки:

  1. Клиентская валидация (JavaScript)

    • Мгновенная проверка формата при вводе (onInput) или при потере фокуса (onBlur).
    • Блокировка отправки формы при наличии ошибок.

  2. Серверная валидация (Обязательная проверка!)

    • Все данные, отправленные на сервер (например, через fetch или XMLHttpRequest), должны повторно валидироваться.
    • Проверка обхода клиентской валидации (отключение JS, модификация запроса через Burp Suite/DevTools).

  3. Безопасность (Веб-специфичные атаки)

    • XSS (Межсайтовый скриптинг): Попытка ввода <script>, <img src=x onerror=alert(1)>.
    • SQL-инъекция: Ввод ' OR 1=1 -- в поля, связанные с БД.
    • HTML-инъекция: Ввод тегов, которые могут сломать верстку (<div>, <b>).

  4. Интеграция с браузером

    • Автозаполнение сохраненных логинов/парлей.
    • Вставка из буфера обмена, в том числе форматированного текста.
    • Состояние поля при использовании кнопок "Назад"/"Вперед" в браузере.

  5. Производительность и UX

    • Троттлинг (throttling) и дебаунсинг (debouncing) для полей с автодополнением (поиск). Проверка, что не отправляется запрос на каждый нажатый символ.
    • Адаптивный дизайн: Корректное отображение и работа на мобильных устройствах (виртуальная клавиатура).

Пример проверки максимальной длины через консоль браузера:

// Находим поле ввода
const inputField = document.querySelector('input[name="username"]');

// Устанавливаем атрибут maxlength (если он есть) и пробуем превысить его
const maxLength = inputField.maxLength; // например, 50
const testString = 'a'.repeat(maxLength + 5); // Строка длиннее лимита

inputField.value = testString;
console.log(`Установлено символов: ${testString.length}`);
console.log(`В поле фактически: ${inputField.value.length}`);

// Проверяем, обрезался ли ввод или браузер не дал ввести больше
if (inputField.value.length <= maxLength) {
    console.log('✅ Ограничение maxlength работает.');
} else {
    console.error('❌ Ограничение maxlength не работает или отсутствует!');
}

Важно: Любая клиентская проверка — это удобство для пользователя, но не гарантия безопасности. Основная валидация должна выполняться на сервере.

Ответ 18+ 🔞

А, ну вот, смотри, опять эти поля ввода на сайтах. Казалось бы, хуйня — ввёл текст и отправил. Ан нет, тут целая ёбушки-воробушки история, если копнуть. Сейчас разжую.

На что смотреть, чтобы не облажаться:

  1. Валидация на стороне клиента (этот ваш JavaScript)

    • Там сразу, пока печатаешь, могут выскакивать ошибки: «Не тот формат, мудила!» (onInput) или когда ушёл с поля (onBlur).
    • И кнопку «Отправить» должны заблокировать, если ты накосячил. Но это всё — для красоты и удобства, а не для защиты.

  2. Валидация на сервере (Вот это уже серьёзно!)

    • Это святое, блядь. ВСЁ, что летит на сервер, надо проверять заново. Клиентскую проверку любой хитрожопый обойдёт — JS в браузере отключит или запрос через какую-нибудь консоль подделает. Сервер — последний рубеж, там доверия ебать ноль ко всему, что пришло.

  3. Безопасность (Тут начинается цирк)

    • XSS: Пробуй впихнуть в поле всякую хуйню вроде <script>alert('ЛОХ')</script> или <img src=x onerror=stealCookies()>. Если сайт после этого начинает вести себя странно — пидарас шерстяной, дыра есть.
    • SQL-инъекция: Старая добрая классика. В поле логина пишешь ' OR '1'='1 и смотришь, не пропустит ли тебя, как царя. Если пропустит — разработчикам вилкой в глаз.
    • HTML-инъекция: Просто вкинь теги <b>жирный</b>. Сломается вёрстка — значит, фильтрация кривая.

  4. Браузер и его прибамбасы

    • Автозаполнение: Должно работать, если поле правильно помечено. Не должно предлагать пароль в поле для имени, это же пиздец.
    • Вставка из буфера: Вставляешь текст с форматированием — сайт не должен сдохнуть.
    • Кнопки «Назад»/«Вперёд»: Нажал «Назад» — введённые данные должны на месте остаться, а не испариться в пизду.

  5. Производительность и как не довести пользователя

    • Троттлинг/дебаунсинг: Особенно для поиска. Если на каждую букву сразу летит запрос на сервер — это овердохуища нагрузки и лагов. Должна быть задержка.
    • Мобилки: На телефоне клавиатура виртуальная вылазит — поле не должно под неё прятаться. И кнопка «Отправить» должна быть под рукой, а не где-то на хуях.

Вот, например, как проверить, работает ли ограничение на длину текста. Открываешь консоль в браузере и пишешь:

// Находим наше поле
const inputField = document.querySelector('input[name="username"]');

// Смотрим, какой лимит стоит
const maxLength = inputField.maxLength; // допустим, 50
const testString = 'a'.repeat(maxLength + 5); // Делаем строку на 5 символов длиннее

// Пытаемся впихнуть невпихуемое
inputField.value = testString;
console.log(`Пытались впихнуть символов: ${testString.length}`);
console.log(`В поле влезло: ${inputField.value.length}`);

// Итог
if (inputField.value.length <= maxLength) {
    console.log('✅ Ограничение maxlength работает, молодцы.');
} else {
    console.error('❌ Ограничение maxlength не работает или отсутствует! Пиздец, а не валидация.');
}

И главное, запомни раз и нахуй: вся клиентская валидация — это просто мартышлюшка для пользователя. Настоящая проверка, которая не даёт сайту сгореть и данным утечь, должна быть на сервере. Иначе будет как в том анекдоте — «а мы и не проверяли».

© ХакСобесов, 2026
support@hacksobesov.com