Формы, загрузки файлов и безопасность с помощью Node.js и Express

Формы, загрузки файлов и безопасность с помощью Node.js и Express

От автора: если вы создаете веб-приложение, то в первые дни, вероятно, сталкиваетесь с необходимостью создавать HTML-формы. Они являются большой частью веб experience, и могут быть довольно сложными. И здесь может прийти на помощь Node js Express.

Обычно процесс обработки формы включает в себя:

отображение пустой HTML-формы в ответ на исходный GET запрос

пользователь, отправляющий форму с данными в POST запросе

проверка как в клиенте, так и на сервере

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

повторное отображение формы, заполненной экранированными данными и сообщениями об ошибках, если они недействительны

Действия с очищенными данными на сервере, если они действительны

перенаправление пользователя или отображение успешного сообщения после обработки данных.

Обработка данных формы также связана с дополнительными соображениями безопасности.

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

Формы, загрузки файлов и безопасность с помощью Node.js и Express

Настройка

Убедитесь, что у вас установлена последняя версия Node.js; node –v должен быть версии 8.9.0 или выше. Загрузите исходный код с git:

Тут не слишком большой код. Это просто экспресс-настройка с использованием EJS-шаблонов и обработчиков ошибок:

Корневой URL /просто отображает index.ejs представление.

Отображение формы

Когда пользователи создают GET запрос в /contact, мы хотим отобразить новое представление contact.ejs:

Контактная форма позволит им отправить нам сообщение и адрес электронной почты:

Посмотрите, как это выглядит на http://localhost:3000/contact.

Представление формы

Чтобы получать значения POST в Express, необходимо сначала включить промежуточное программное обеспечение body-parser, которое предоставляет отображаемые значения формы req.body в обработчиках маршрутов. Добавьте его в конец middlewares массива:

Это обычное соглашение форм для обратных POST-данных к тому же URL-адресу, который использовался в первоначальном запросе GET. Давайте сделаем его и сразу обработаем POST /contact для обработки ввода пользователя.

Сначала давайте посмотрим на недействительное представление. Если представление недействительно, нам нужно передать обратно в него значения, чтобы они не вводились повторно вместе с сообщениями об ошибках, которые мы хотим отобразить:

Если в проверке есть ошибки, мы делаем следующее:

отображаем ошибки в верхней части формы

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

отображаем встроенные ошибки ниже входных значений

добавляем form-field-invalid класс в поля с ошибками.

Отправьте форму, http://localhost:3000/contact, чтобы увидеть её в действии. Это все, что нам нужно от представления.

Валидация и защита

Существует удобное промежуточное программное обеспечение express-validator для валидации и дезактивации данных с использованием библиотеки validator.js, давайте включим его в наш middlewares массив:

Валидация

При наличии валидаторов мы можем легко проверить, что были предоставлены сообщение и действующий e-mail:

Защита

С предоставленными средствами очистки мы можем обрезать пробелы с начала и конца значений и нормализовать электронную почту в последовательном шаблоне. Это может помочь удалить дублирующие контакты, создаваемые несколькими разными входными данными. Например, ‘Mark@gmail.com’ и ‘mark@gmail.com’ оба будут дезинфицированы ‘mark@gmail.com’.

Эти средства могут быть просто привязаны к концу валидаторов:

Функция matchedData возвращает выходные данные после чистки входных данных.

Действительная форма

Если есть ошибки, нам нужно повторно отобразить представление. Если нет, нужно сделать что-то полезное с данными, а затем продемонстрировать, что представление было успешным. Как правило, человек перенаправляется на страницу, где показано сообщение об успешности.

HTTP не имеет статуса, поэтому вы не можете перенаправлять на другую страницу и передавать сообщения без помощи cookie сеанса, чтобы сохранить это сообщение между HTTP-запросами. «Флеш-сообщение» — это имя, данное этому одноразовому сообщению, которое мы хотим, чтобы оно сохранилось через перенаправление, а затем исчезло.

Для этого нужно включить три промежуточных устройства:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Средство express-flash промежуточного уровня добавляет req.flash(type, message, которые мы можем использовать в наших обработчиках маршрутов:

Средство express-flash промежуточного ПО добавляет messages к req.locals, которому доступны все представления:

Теперь следует перенаправить это на индексный просмотр и увидеть сообщение об успешном завершении, когда форма с достоверными данными будет отправлена. Ура! Теперь мы можем поставить это на производство и отправить хоть принцу Нигерии.

Вопросы безопасности

Если вы работаете с формами и сеансами в Интернете, вам нужно знать об уязвимостях безопасности в веб-приложениях. Лучший совет по безопасности, который мне когда-либо давали, — «Никогда не доверяй клиенту!»

TLS через HTTPS

Всегда используйте шифрование TLS над https://при работе с формами, так как представленные данные шифруются при пересылке через Интернет. Если вы отправляете данные формы http://, они отправляются в виде обычного текста и могут быть видны любому, кто заглядывает в эти пакеты во время путешествия по Интернету.

Носите шлем

Есть аккуратное небольшое промежуточное ПО, называемое Helmet, которое добавляет некоторую безопасность из заголовков HTTP. Лучше всего включить прямо вверху промежуточного по и также легко выключить:

Подделка кросс-сайт запросов/Cross-site Request Forgery (CSRF)

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

В запросе GET мы создаем знак:

А также в ответе проверки на ошибки:

Теперь нужно просто включить знак в скрытый ввод:

Вот и всё, что от нас требуется.

Нам не нужно изменять наш обработчик запросов POST, поскольку все запросы POST теперь потребуют действительный знак csurf промежуточного программного обеспечения. Если действительный знак CSRF не указан, возникает ошибка ForbiddenError, которую может обработать обработчик ошибок, определенный в конце server.js.

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

Межсайтовый скриптинг/Cross-site Scripting (XSS)

Вы должны проявлять осторожность при отображении представленных пользователем данных в виде HTML, так как это может открыть вас для межсайтового скриптинга (XSS) . Все языки шаблонов предоставляют различные методы вывода значений. EJS <%= value %> выводит значение экранированного HTML, чтобы защитить вас от XSS, тогда как <%- value %> выводит необработанную строку.

Всегда используйте экранированный вывод <%= value %> при работе с представленными пользователем значениями. Используйте только исходные данные, если вы уверены, что это безопасно.

Загрузка файлов

Загрузка файлов в HTML-формы — это особый случай, для которого требуется тип кодировки «multipart/form-data». См . Руководство по MDN для отправки данных формы для более подробной информации о том, что происходит с передачей в формате multipart.

Для обработки многостраничных загрузок вам потребуется дополнительное промежуточное программное обеспечение. Там есть экспресс пакет multer который мы будем использовать здесь:

Этот код инструктирует multer, как загрузить файл в поле «фото» в память, и выставляет File объект в req.file, в котором мы можем инспектировать или обрабатывать дальше. Последнее, что нам нужно, это добавить enctype атрибут и наш файл:

К сожалению, нам также необходимо включить _csrf в качестве параметра GET, чтобы промежуточное программное обеспечение csurf играло в мяч и не теряло след нашего знака во время многократных представлений. Попробуйте загрузить файл, вы должны увидеть File объекты, зарегистрированные в консоли.

Заполнение файлов входных данных

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

загрузка файла во временное место на сервере

Показ эскиза и имени файла прикрепленного файла

добавление JavaScript в форму, чтобы люди могли удалить выбранный файл или загрузить новый

перемещение файла в постоянное место, когда все действительно.

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

Спасибо за внимание

Надеюсь, вам понравилось изучать формы HTML и как работать с ними в Express и Node.js. Вот краткое описание того, что мы рассмотрели:

отображение пустой формы в ответ на запрос GET

обработка представленных данных POST

отображение списка ошибок, встроенных ошибок и представленных данных

проверка представленных данных с помощью валидаторов

очистка представленных данных с помощью средств чистки

передача сообщений через перенаправление с помощью флэш-сообщения

защита от атак типа CSRF и XSS

загрузка файлов в сообщениях с несколькими формами.

Автор: Mark Brown

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

FullStack-Мастер

FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular 6

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree