Поиск по сайту:

Как эффективно обрабатывать входные данные формы с помощью экспресс-валидатора в ExpressJs


Автор выбрал Фонд OWASP для получения пожертвования в рамках программы Write for DOnations.

Введение

Современные веб-разработчики всегда имеют дело с входными данными, будь то веб-формы, загрузка файлов или любые другие входные данные на их веб-сайтах. Поэтому для них становится важным гарантировать, что данные, которые они получают от пользователей, являются законными и безвредными.

С развитием веб-разработки злоумышленники стали больше развиваться и нашли способы использовать веб-сайты с различных аспектов, таких как ввод данных в формы. Такие атаки, как межсайтовый скриптинг (XSS) и SQL-инъекция, стали более распространенными и вредными, чем когда-либо прежде. Поэтому любому разработчику необходимо убедиться, что данные, которые он получает от пользователя, не являются вредоносными или очищены, чтобы обеспечить целостность его веб-приложения и сервера.

В этом руководстве вы узнаете, как использовать пакет JavaScript Express-Validator для проверки и очистки вводимых пользователем данных в веб-формах для обеспечения согласованности данных и безопасности сервера.

Предварительные условия

Чтобы правильно понять это руководство, у вас должна быть следующая настройка:

  1. Установите Node Js версии 14.x или выше в вашей системе. Вы можете использовать это руководство по DO, чтобы установить последнюю версию Node Js в вашей системе.

  2. Вы должны знать, как программировать на JavaScript.

  3. В вашей системе должен быть установлен Express JS версии 4.x или выше. Вы можете использовать это для настройки Express-сервера.

После выполнения этих требований вы можете продолжить обучение.

Важность проверки ввода в веб-разработке

Проверка ввода и очистка являются ключевой задачей для разработчика по ряду причин, упомянутых ниже:

  1. Предотвращение атак с внедрением: рассмотрите сценарий, в котором ваше приложение уязвимо для атак с использованием SQL-инъекций. Эта уязвимость возникает из-за плохой обработки кода SQL во время аутентификации пользователя через форму аутентификации. Злоумышленник может воспользоваться этим, передав некий вредоносный код SQL вместо учетных данных пользователя и получив доступ к серверу, что для приложения является окончательным.

  2. Целостность и согласованность данных. Когда пользовательский ввод проверяется, это обеспечивает согласованность данных, хранящихся на серверах, что усложняет работу с данными. Например, если пользователь может отправить текстовые данные для ввода возраста, это приведет к несогласованности данных, хранящихся на сервере.

  3. Совместимость данных. Тип данных должен быть единообразным, если данные используются на различных конечных точках в большой организации. Например, если пользователи могут вводить мусорные данные вместо правильного адреса электронной почты в своих учетных данных электронной почты, это может вызвать осложнения, когда организации потребуется связаться с пользователем.

  4. Расширенное взаимодействие с пользователем. Когда входные данные проверены, разработчик может создать логику для немедленной отправки пользователям соответствующих отзывов, что позволит им исправить предоставленные ими неверные данные. Это улучшает общий пользовательский опыт.

Существует множество причин, по которым вы, как разработчик, можете эффективно и безопасно обрабатывать вводимые данные в своих веб-формах и веб-сайтах. В следующих разделах вы узнаете, как создать логику проверки входных данных формы с помощью пакета Express-Validator в приложении Express Js.

Терминология, используемая при проверке и очистке входных данных

Валидатор. Валидатор – это функция, которая принимает входные данные и выполняет определенные проверки на основе некоторых критериев.

Дезинфицирующее средство. Дезинфицирующее средство – это функция, используемая для изменения или очистки входных данных, чтобы обеспечить их безопасность и соответствие требуемым форматам.

Цепочка проверки. Цепочка проверки в Express-Validator представляет собой последовательность валидаторов или дезинфицирующих средств, применяемых к входным данным. Например, предположим, что у вас есть форма, в которой вы хотите, чтобы пользователи вводили свой адрес электронной почты, и чтобы обеспечить согласованность ваших данных в базе данных, вы не хотите, чтобы во входных данных были пробелы (слева или справа). Вы можете использовать цепочку проверки, например .isEmail(), для достижения this.trim() [Вы узнаете об этом в следующем разделе]. Сначала будет проверено, является ли ввод электронным письмом; если это данные электронной почты, то дезинфицирующее средство trim() удалит пробелы с обоих концов ввода.

Установка Экспресс-Валидатора и его интеграция с Экспресс-сервером

Теперь вы научитесь реализовывать методы проверки и очистки ввода в следующих разделах этого руководства. Сначала вы настроите проект npm, а затем установите Express Js, Express-Validator и другие зависимости, необходимые для выполнения инструкций.

  1. Чтобы создать сервер Express, сначала вам необходимо создать проект npm. Сначала откройте терминал и введите следующие команды:

    cd <project directory>npm init
  2. Затем вам будет предложено ввести информацию о приложении; вы можете либо ввести конкретные данные, либо продолжить нажимать «Ввод». Теперь создайте файл index.js в папке проекта; это будет точка входа на сервер. Наконец, вам необходимо установить пакет Express Js для создания сервера Express. Это можно сделать с помощью следующей команды.

    npm install express
  3. Теперь в вашем проекте установлен Express Js. Следующая задача — установить Express-Validator, что можно сделать с помощью следующей команды.

    npm install Express-Validator
  4. На данный момент мы удовлетворили основные зависимости; однако вы можете установить nodemon в свой проект, что полезно для поддержания работоспособности приложения Node Js даже в случае возникновения какой-либо ошибки. Введите следующую команду, чтобы установить ее.

    npm install nodemon

Теперь мы установили все требования и можем приступить к работе на сервере и проверке ввода в формах. Этот проект будет базовой структурой, используемой во всех последующих разделах, где каждый раздел объясняет отдельную тему.

В следующем разделе объясняется, как Express-Validator работает скрыто и как его можно использовать в формах для проверки ввода в различных полях.

Основные методы проверки формы в Экспресс-Валидаторе

Express-Validator — это комбинация промежуточного программного обеспечения, предоставляемого модулем Express JS и модулем Validator.js, который предоставляет средства проверки и очистки для строковых типов данных. Express-Validator предоставляет возможность проверки входных данных с помощью цепочки проверки.

В этом разделе вы научитесь использовать валидаторы в Express-Validator, используя проект Node Js, созданный в предыдущем разделе. Для этого вы создадите маршрут на Express Server, который позволит пользователям регистрироваться в веб-приложении, используя свои учетные данные (имя, адрес электронной почты, пароль). Затем вы создадите промежуточное программное обеспечение для проверки входных данных каждый раз, когда пользователь регистрируется на вашем сервере.

Откройте файл index.js и введите в него следующий код.

const express = require("express");
const app = express();
const { body, validationResult } = require("express-validator");

// Express.js middleware to use JSON objects
app.use(express.json());

app.post(
  "/signup",
  // using validation to verify valid inputs (MIDDLEWARE)
  [
    [
      body("name").notEmpty(),
      body("email").isEmail(),
      body("password").notEmpty(),
    ],
  ],
  async (req, res) => {
    const errors = validationResult(req);

    if (!errors.isEmpty()) {
        return res.status(400).json({ errors: errors.array() });
      }

    res.status(200).json({success:'Successful Sign Up!'})
  }
);

// Server Listening at port 3000
const port = 3000;
app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`);
});

Здесь мы импортируем Express J, а затем создаем приложение Express. Затем мы используем деструкцию JavaScript для импорта функций body и validationResult из Express-Validator.

Информация Метод body() используется для создания цепочек проверки для проверки и выбора входных данных из полезных данных запроса ( req) от пользователей, таких как данные, отправленные запросом POST. Метод validationResult() сохраняет результат цепочки проверки HTTP-запроса как объект JavaScript. Если этот объект пуст, это означает, что полезная нагрузка прошла все проверочные тесты; в противном случае он сохраняет информацию о полезной нагрузке и критериях, которым она не удовлетворяет.

Затем мы используем промежуточное программное обеспечение JSON Express J для работы с объектами JSON.

Наконец, мы создаем экспресс-маршрут с использованием запроса HTTP — POST (вы можете работать с любым другим типом запроса, например GET, PUT и т. д.). Маршрут, который мы создали здесь, представляет собой путь к форме регистрации на веб-сервере. Форма принимает входные данные с использованием HTML на стороне клиента, а сервер обрабатывает их, обращаясь к полям ввода веб-формы с помощью тела HTML DOM.

Метод body() Express-Validator извлекает значения компонентов HTML, имеющих атрибут name, такой же, как аргумент . метод body(); т. е. body(“password”) получит значение компонента ввода HTML, имеющего атрибут имени в качестве пароля.

Затем для этих значений вы можете использовать валидаторы, предоставляемые Express-Validator. В этом примере мы использовали два валидатора: isEmail() и notEmpty(). Эти валидаторы определяют, является ли ввод электронной почтой и не является ли он пустым соответственно. Если входные данные не соответствуют критериям валидатора(ов), Express-Validator выдаст ошибку в виде объекта в форме validationResult(). Однако, если входные данные соответствуют критериям примененных валидаторов, объект validationResult() будет пустым. Затем это используется внутри определения функции маршрута «/signup» для создания простой проверки с использованием оператора if. Предположим, что массив validationResult() не пуст. В этом случае клиенту отправляется ошибка с кодом ответа 400. В противном случае в этом примере клиенту отправляется сообщение об успешной регистрации (это только в примерных целях; вы можете выполнить любую задачу, например, сохранить входные данные в базе данных, используя входные учетные данные для аутентификации пользователя). , и т. д.). Затем мы размещаем сервер на локальном хосте через порт 3000.

В этом примере использовались эти базовые валидаторы; однако вы можете использовать любой другой валидатор, предлагаемый пакетом Express-Validator. В следующей таблице вы можете найти некоторые часто используемые валидаторы, которые можно использовать так же, как isEmail() и notEmpty().

isDate

Проверяет, является ли вход объектом даты.

isEmpty

Проверяет, является ли ввод пустой строкой.

isHash(algorithm)

Проверяет, является ли ввод хешем. В качестве аргумента используется алгоритм хеширования, такой как MD5, SHA и т. д.

isJWT

Проверяет, является ли ввод JWT (веб-токен JavaScript).

isURL

Проверяет, является ли вход URL-адресом.

isBoolean

Проверяет, является ли ввод логическим (истина или ложь).

isNumeric

Проверяет, имеет ли ввод числовой тип данных.

isAlphanumeric

Проверяет, является ли ввод буквенно-цифровым.

isInt

Проверяет, является ли ввод целочисленным типом.

isDecimal

Проверяет, находится ли ввод в десятичной системе счисления.

isFloat

Проверяет, является ли ввод числом с плавающей запятой.

Теперь, в следующем разделе, вы узнаете, как проверять вводимые файлы, чтобы сделать загрузку файлов через вашу форму (например, фотографии или подписи) безопасной и контролируемой.

Обработка проверки ввода файлов в веб-формах (необязательно)

В предыдущем разделе вы узнали, как использовать Express-Validator для проверки входных данных, обычно передаваемых в веб-формы. В этом разделе вы узнаете, как обрабатывать входные файлы и проверять их перед загрузкой на сервер, чтобы избежать загрузки вредоносных файлов на ваш сервер. В дополнение к этому преимуществу безопасности вы можете наложить ограничения на размер входного файла, чтобы большие файлы не заполняли ваш сервер.

Мы будем использовать пакет multer Node Js для обработки загрузки файлов с помощью форм. Вы можете использовать это подробное руководство по DO, чтобы понять, как работает multer, Загрузка файлов с помощью multer в Node.js и Express. Теперь Express-Validator не предоставляет специальных функций для обработки ввода файлов; однако вы можете объединить библиотеку multer как расширение Express-Validator для проверки ввода файлов для ваших веб-форм. Прежде чем использовать multer, вы должны установить пакет в свой проект Node Js, что можно сделать, выполнив команду.

cd <project folder>

npm install multer

Теперь вы увидите, как интегрировать multer с вашим сервером Express с помощью Express-Validator. В следующем коде вы реализуете multer и Express-Validator и накладываете некоторые ограничения на загружаемые файлы.

const express = require("express");
const app = express();
const { body, validationResult } = require("express-validator");
const multer = require("multer");

// Express.js middleware to use JSON objects
app.use(express.json());

// CREATING MIDDLEWARE USING MULTER TO HANDLE UPLOADS

// creating a storage object for multer
const storage = multer.diskStorage({
  // providing the destinations for files to be stored in server
  destination: "./uploads/",
 });

// defining file storage to local disk and putting constraints on files being uploaded
const upload = multer({
  storage: storage,
  limits: { fileSize: 1*1024*1024 }, // file size in bytes

  //   you can add other constraints according to your requirement such as file type, etc.
});

app.post(
  "/fileUpload",

  //   input validation for files to ensure only a single file is uploaded in one request
  upload.single("fileUpload"),

  // using validation to verify valid inputs
  [
    body("fileDescription").notEmpty(),
    // you can add as many validators as you require
  ],
  async (req, res) => {
    const errors = validationResult(req);

    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }
const file = req.file;
    // perform any other tasks on the file or other form inputs

    res.status(200).json({ success: "Successful Sign Up!" });
  }
);

// Server Listening at port 3000
const port = 3000;
app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`);
});

Здесь мы определили необходимые импорты и промежуточное программное обеспечение Express JSON для работы с объектами JSON по сети. Затем мы определяем сервер хранения для работы multer. Пример подробно описан ниже:

  1. Сначала мы определяем категорию хранилища. Multer предоставляет как дисковое хранилище, так и хранилище в памяти (буфер). В этом примере мы использовали дисковое хранилище для хранения загруженных файлов на локальном диске сервера вместо того, чтобы тратить память.

  2. При использовании дискового хранилища необходимо указать каталог, в котором будут храниться загруженные файлы. Это можно сделать с помощью ключевого слова назначения, которое принимает путь в качестве значения. Здесь мы использовали папку загрузок в самом каталоге проекта.

  3. После этого мы создаем объект загрузки, который обрабатывает загрузку файлов. Это вызывает импорт multer и принимает объект JavaScript в качестве входных данных. Этот объект JavaScript содержит различные ограничения/проверки, которые необходимо выполнить перед сохранением входного файла на диске. Хранилище — это необходимый аргумент, который будет принимать объект хранилища в качестве входных данных, определенный ранее.

  4. Мы добавили еще одну проверку с использованием опции ограничений, чтобы гарантировать, что размер файла не превышает 1 МБ. Обратите внимание, что он считает размер в байтах.

Информация: Вы можете выполнить другие проверки/проверки в объекте лимитов в соответствии с вашими требованиями.

  1. Затем мы создаем экспресс-маршрут для обработки загрузки файлов и добавляем промежуточное программное обеспечение upload.single(), гарантируя, что за один запрос будет загружен только один файл. В качестве обязательного аргумента он принимает поле ввода с именем fileUpload из HTML DOM.

  2. После этого мы добавляем промежуточное программное обеспечение Express-Validator, как описано в предыдущем разделе.

  3. Наконец, мы создаем логику для обработки маршрута и проверки ошибок при проверке ввода.

  4. Вы можете получить доступ к загруженным файлам из логики маршрута из объекта req.file.

Здесь вы узнали, как обрабатывать входные данные файла с помощью Multer и интегрировать его с промежуточным программным обеспечением проверки Express-Validator. Кроме того, вы можете добавить множество других расширенных или пользовательских методов проверки в Multer и Express-Validator. В следующем разделе вы узнаете, как очищать входные значения, что необходимо для предотвращения таких атак, как SQL-инъекция.

Санитизация ввода формы

До сих пор вы научились выполнять проверку входных данных и файлов. Теперь вы расширите эти знания, научившись очищать (проверять) входные данные. Express-Validator предоставляет множество дезинфицирующих средств из библиотеки Validator.js.

Для объяснения дезинфицирующих средств мы будем использовать тот же подход, что и «Базовые методы проверки формы в Express-Validator», и добавим дезинфицирующие средства в маршрут.

const express = require("express");
const app = express();
const { body, validationResult } = require("express-validator");

// Express.js middleware to use JSON objects
app.use(express.json());


app.post(
    "/sanitizedInput",
    // sanitizing inputs
    [
      [
        body("name").notEmpty().trim(),
        body("email").isEmail().trim(),
        body("dob").toDate(),
      ],
    ],
    async (req, res) => {
      const errors = validationResult(req);

      if (!errors.isEmpty()) {
          return res.status(400).json({ errors: errors.array() });
        }
      // remaining logic for your route
      res.status(200).json({success:'Successful Sign Up!'})
    }
  );

// Server Listening at port 3000
const port = 3000;
app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`);
});

Вы создаете еще один сервер Express, импортируя необходимые пакеты и используя промежуточное программное обеспечение Express JSON для обработки объектов JSON. Затем вы создадите маршрут для обработки очищенного ввода (/sanitizedInput) и напишете логику маршрута.

Опять же, вам нужно добавить промежуточное программное обеспечение Express-Validator. Здесь мы используем три поля ввода: имя, email и dob. Сначала мы проверяем, не пусто ли имя, с помощью notEmpty(), а затем применяем к нему дезинфицирующее средство trim(), которое удаляет пробелы с обоих концов входного значения. Аналогично, для поля ввода электронной почты мы сначала проверяем, является ли оно действительным, используя isEmail(), а затем применяем дезинфицирующее средство trim() для удаления пробелов с обоих концов.

В поле ввода dob мы используем санитайзер toDate() (без какого-либо валидатора) для преобразования входной строки в объект даты. Если строка не является фактической датой, toDate() вернет нулевое значение.

После этого вы выполните проверку, чтобы убедиться в отсутствии ошибок, хранящихся в объекте validationResult(), и сможете продолжить работу с остальной логикой вашего маршрута.

Примечание: Использование нескольких валидаторов и дезинфицирующих средств на одном входе, как это сделано с помощью body("name").notEmpty().trim(), создает цепочку валидаторов/дезинфицирующих средств. Такая цепочка или последовательное использование валидаторов/санитайзеров создает цепочку валидации.

С помощью Express-Validator доступно множество других дезинфицирующих средств, таких как blacklist(), whitelist() и т. д. Вы можете использовать их в соответствии с ваши требования.

Заключение

В этом руководстве вы узнали, как эффективно обрабатывать входные данные формы на вашем сервере. Вы создали серверы с помощью библиотеки Express-Validator, в которой использовались методы проверки и очистки ввода. Вы можете опираться на эти знания и расширять проверку входных данных, используя различные валидаторы и дезинфицирующие средства, предоставляемые одной и той же библиотекой.

Express-Validator и Multer позволяют создавать собственные валидаторы, которые вы можете попробовать в качестве упражнения для повышения производительности в сложных проектах.

Статьи по данной тематике: