Проверка входных данных и основы экранирования
Проверяйте и нормализуйте входные данные с помощью небольших списков разрешённых значений и защитных условий; экранируйте опасные символы перед выводом текста
«Проверка входных данных и основы экранирования» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.
Общая картина
Цель: сделать входные данные предсказуемыми и безопасными.
- Используйте защитные условия для раннего отклонения
- Предпочитайте списки разрешённых значений расплывчатым правилам
- Нормализуйте данные до простой формы
- Экранируйте специальные символы перед отображением текста
Основы проверки чисел
Добавьте простые проверки: проверку типа, проверку диапазона и нормализацию до итогового значения.
// Validate age: number and range guard
function parseAge(input) {
// trim and parse
const n = Number(input);
if (!Number.isFinite(n)) return null; // reject non-numbers
if (n < 0 || n > 130) return null; // reject out-of-range
return Math.floor(n); // normalize to integer
}
console.log("age ok:", parseAge("21"));
console.log("age bad:", parseAge("twenty"));
Экранирование для безопасного отображения
Перед отображением пользовательского текста экранируйте специальные символы, чтобы интерфейс воспринимал его как обычный текст.
// Escape a few risky characters before displaying in HTML contexts
function escapeText(s) {
if (typeof s !== "string") return "";
return s
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll("\"", """)
.replaceAll("'", "'");
}
console.log("escaped:", escapeText("<b>Hello & bye</b>"));
Списки разрешённых значений на практике
Для фиксированных наборов (например, кодов или ролей) предпочтительнее использовать списки разрешённых значений. Нормализуйте регистр и пробелы.
// Allowlist example: only certain country codes
const ALLOWED = new Set(["TR", "US", "DE", "GB"]);
function parseCountry(code) {
if (typeof code !== "string") return null;
const up = code.trim().toUpperCase();
if (!ALLOWED.has(up)) return null; // reject unknown
return up; // normalized
}
console.log("country ok:", parseCountry("tr"));
console.log("country bad:", parseCountry("xx"));
Небольшой валидатор объекта
Проверьте тип и границы, а затем верните нормализованную структуру, которой остальной код сможет доверять.
// Validate a tiny user object and normalize
function validateUser(input) {
if (typeof input !== "object" || input === null) return null;
const nameOk = typeof input.name === "string" && input.name.trim().length >= 1 && input.name.trim().length <= 40;
const ageOk = parseAge(input.age) !== null;
if (!nameOk || !ageOk) return null;
return {
name: input.name.trim(),
age: parseAge(input.age)
};
}
console.log("user ok:", validateUser({ name: " Ayla ", age: "22" }));
console.log("user bad:", validateUser({ name: "", age: "old" }));
Хорошие защитные привычки
Советы:
- Проверяйте данные на границах системы (пользовательский ввод, сеть).
- Используйте списки разрешённых значений, диапазоны и проверки типов.
- Выполняйте нормализацию один раз, а остальной код оставляйте простым.
- Экранируйте текст перед его отображением пользователям.
Тест по основам защиты ввода
Быстрая проверка: безопасный шаблон обработки ввода.
Повторение
Повторение: выполняйте защиту заранее, используйте списки разрешённых значений, нормализуйте данные до безопасной структуры и экранируйте их перед отображением. Каждый шаг должен быть небольшим и понятным.
Часто задаваемые вопросы
Урок «Проверка входных данных и основы экранирования» бесплатный?
Да — полный текст урока «Проверка входных данных и основы экранирования» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Проверка входных данных и основы экранирования»?
Проверяйте и нормализуйте входные данные с помощью небольших списков разрешённых значений и защитных условий; экранируйте опасные символы перед выводом текста Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Проверка входных данных и основы экранирования»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Проверка входных данных и основы экранирования
- Безопасное объединение объектов, заморозка и запечатывание
- Границы ошибок (концептуально) без фреймворков