отправка формы node js
Отправка форм при помощи JavaScript
Формы не всегда формы
В современных веб-приложениях, одностраничных приложениях и приложениях на основе фреймворков, обычно HTML-формы используются для отправки данных без загрузки нового документа при получении данных ответа. В начале поговорим о том почему это требует другого подхода.
Получение контроля над глобальным интерфейсом
Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счёт предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).
Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытается отправить свои данные, приложение берёт контроль и асинхронно передаёт данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.
Асинхронная отправка произвольных данных обычно называется AJAX, что означает «Asynchronous JavaScript And XML» (Асинхронный JavaScript и XML).
Чем он отличается?
Замечание: Сейчас Fetch API часто используется вместо XHR — это современная, обновлённая версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.
Если вы управляете фронтендом (кодом, который выполняется в браузере) и бэкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.
Но если вы хотите использовать сторонний сервис, то вам необходимо отправлять данные в формате, который требуется сервису.
Так как нам следует отправлять подобные данные? Ниже описаны различные необходимые вам техники.
Отправка данных формы
Есть три способа отправки данных формы:
Формы, загрузки файлов и безопасность с помощью Node.js и Express
Дата публикации: 2018-02-27
От автора: если вы создаете веб-приложение, то в первые дни, вероятно, сталкиваетесь с необходимостью создавать HTML-формы. Они являются большой частью веб experience, и могут быть довольно сложными. И здесь может прийти на помощь Node js Express.
Обычно процесс обработки формы включает в себя:
отображение пустой HTML-формы в ответ на исходный GET запрос
пользователь, отправляющий форму с данными в POST запросе
проверка как в клиенте, так и на сервере
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
повторное отображение формы, заполненной экранированными данными и сообщениями об ошибках, если они недействительны
Действия с очищенными данными на сервере, если они действительны
перенаправление пользователя или отображение успешного сообщения после обработки данных.
Обработка данных формы также связана с дополнительными соображениями безопасности.
Мы рассмотрим все это и объясним, как построить формы с помощью Node.js и Express — самого популярного веб-фреймворка для Node. Во-первых, мы создадим простую форму контакта, где люди смогут безопасно отправить сообщение и адрес электронной почты, а затем посмотреть, что связано с обработкой загрузки файлов.
Настройка
Убедитесь, что у вас установлена последняя версия Node.js; node –v должен быть версии 8.9.0 или выше. Загрузите исходный код с git:
Тут не слишком большой код. Это просто экспресс-настройка с использованием EJS-шаблонов и обработчиков ошибок:
Корневой URL /просто отображает index.ejs представление.
Отображение формы
Когда пользователи создают GET запрос в /contact, мы хотим отобразить новое представление contact.ejs:
Контактная форма позволит им отправить нам сообщение и адрес электронной почты:
Посмотрите, как это выглядит на //localhost:3000/contact.
Представление формы
Чтобы получать значения POST в Express, необходимо сначала включить промежуточное программное обеспечение body-parser, которое предоставляет отображаемые значения формы req.body в обработчиках маршрутов. Добавьте его в конец middlewares массива:
Это обычное соглашение форм для обратных POST-данных к тому же URL-адресу, который использовался в первоначальном запросе GET. Давайте сделаем его и сразу обработаем POST /contact для обработки ввода пользователя.
Сначала давайте посмотрим на недействительное представление. Если представление недействительно, нам нужно передать обратно в него значения, чтобы они не вводились повторно вместе с сообщениями об ошибках, которые мы хотим отобразить:
Если в проверке есть ошибки, мы делаем следующее:
отображаем ошибки в верхней части формы
устанавливаем входные значения на то, что было отправлено на сервер
отображаем встроенные ошибки ниже входных значений
добавляем form-field-invalid класс в поля с ошибками.
Отправьте форму, //localhost:3000/contact, чтобы увидеть её в действии. Это все, что нам нужно от представления.
Валидация и защита
Существует удобное промежуточное программное обеспечение express-validator для валидации и дезактивации данных с использованием библиотеки validator.js, давайте включим его в наш middlewares массив:
Валидация
При наличии валидаторов мы можем легко проверить, что были предоставлены сообщение и действующий e-mail:
Защита
С предоставленными средствами очистки мы можем обрезать пробелы с начала и конца значений и нормализовать электронную почту в последовательном шаблоне. Это может помочь удалить дублирующие контакты, создаваемые несколькими разными входными данными. Например, ‘Mark@gmail.com’ и ‘mark@gmail.com’ оба будут дезинфицированы ‘mark@gmail.com’.
Эти средства могут быть просто привязаны к концу валидаторов:
Функция matchedData возвращает выходные данные после чистки входных данных.
Действительная форма
Если есть ошибки, нам нужно повторно отобразить представление. Если нет, нужно сделать что-то полезное с данными, а затем продемонстрировать, что представление было успешным. Как правило, человек перенаправляется на страницу, где показано сообщение об успешности.
HTTP не имеет статуса, поэтому вы не можете перенаправлять на другую страницу и передавать сообщения без помощи cookie сеанса, чтобы сохранить это сообщение между HTTP-запросами. «Флеш-сообщение» — это имя, данное этому одноразовому сообщению, которое мы хотим, чтобы оно сохранилось через перенаправление, а затем исчезло.
Для этого нужно включить три промежуточных устройства:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Средство express-flash промежуточного уровня добавляет req.flash(type, message, которые мы можем использовать в наших обработчиках маршрутов:
Средство express-flash промежуточного ПО добавляет messages к req.locals, которому доступны все представления:
Теперь следует перенаправить это на индексный просмотр и увидеть сообщение об успешном завершении, когда форма с достоверными данными будет отправлена. Ура! Теперь мы можем поставить это на производство и отправить хоть принцу Нигерии.
Вопросы безопасности
Если вы работаете с формами и сеансами в Интернете, вам нужно знать об уязвимостях безопасности в веб-приложениях. Лучший совет по безопасности, который мне когда-либо давали, — «Никогда не доверяй клиенту!»
TLS через HTTPS
Всегда используйте шифрование TLS над //при работе с формами, так как представленные данные шифруются при пересылке через Интернет. Если вы отправляете данные формы //, они отправляются в виде обычного текста и могут быть видны любому, кто заглядывает в эти пакеты во время путешествия по Интернету.
Носите шлем
Есть аккуратное небольшое промежуточное ПО, называемое Helmet, которое добавляет некоторую безопасность из заголовков HTTP. Лучше всего включить прямо вверху промежуточного по и также легко выключить:
Подделка кросс-сайт запросов/Cross-site Request Forgery (CSRF)
Вы можете защитить себя от подделки запроса, создав уникальный знак, тогда пользователю предоставляется форма, а затем перед обработкой данных POST проверяется этот знак. Здесь также есть промежуточное ПО, которое помогает с этим:
В запросе GET мы создаем знак:
А также в ответе проверки на ошибки:
Теперь нужно просто включить знак в скрытый ввод:
Вот и всё, что от нас требуется.
Нам не нужно изменять наш обработчик запросов POST, поскольку все запросы POST теперь потребуют действительный знак csurf промежуточного программного обеспечения. Если действительный знак CSRF не указан, возникает ошибка ForbiddenError, которую может обработать обработчик ошибок, определенный в конце server.js.
Вы можете проверить это самостоятельно, отредактировав или удалив знак из формы с помощью инструментов разработчика браузера и отправки.
Межсайтовый скриптинг/Cross-site Scripting (XSS)
Всегда используйте экранированный вывод при работе с представленными пользователем значениями. Используйте только исходные данные, если вы уверены, что это безопасно.
Загрузка файлов
Для обработки многостраничных загрузок вам потребуется дополнительное промежуточное программное обеспечение. Там есть экспресс пакет multer который мы будем использовать здесь:
Руководство по Node.js, часть 8: протоколы HTTP и WebSocket
Node.js — это серверная платформа. Основная задача сервера — как можно быстрее и эффективнее обрабатывать запросы, поступающие от клиентов, в частности — от браузеров. Восьмая часть перевода руководства по Node.js, которую мы публикуем сегодня, посвящена протоколам HTTP и WebSocket.
Что происходит при выполнении HTTP-запросов?
Поговорим о том, как браузеры выполняют запросы к серверам с использованием протокола HTTP/1.1.
Если вы когда-нибудь проходили собеседование в IT-сфере, то вас могли спросить о том, что происходит, когда вы вводите нечто в адресную строку браузера и нажимаете Enter. Пожалуй, это один из самых популярных вопросов, который встречается на подобных собеседованиях. Тот, кто задаёт подобные вопросы, хочет узнать, можете ли вы объяснить некоторые довольно-таки простые концепции и выяснить, понимаете ли вы принципы работы интернета.
Этот вопрос затрагивает множество технологий, понимать общие принципы которых — значит понимать, как устроена одна из самых сложных систем из когда-либо построенных человечеством, которая охватывает весь мир.
▍Протокол HTTP
▍Фаза DNS-поиска
Итак, браузер, начиная работу по загрузке данных с запрошенного пользователям адреса, выполняет операцию DNS-поиска (DNS Lookup) для того, чтобы выяснить IP-адрес соответствующего сервера. Символьные имена ресурсов, вводимые в адресную строку, удобны для людей, но устройство интернета подразумевает возможность обмена данными между компьютерами с использованием IP-адресов, которые представляют собой наборы чисел наподобие 222.324.3.1 (для протокола IPv4).
Если в кэше ничего найти не удаётся, браузер использует системный вызов POSIX gethostbyname для того, чтобы узнать IP-адрес сервера.
▍Функция gethostbyname
Если локальными средствами разрешить запрос на выяснение IP-адреса сервера не удаётся, система выполняет запрос к DNS-серверу. Адреса таких серверов хранятся в настройках системы.
Вот пара популярных DNS-серверов:
TCP и UDP — это два базовых протокола, применяемых в компьютерных сетях. Они расположены на одном концептуальном уровне, но TCP — это протокол, ориентированный на соединениях, а для обмена UDP-сообщениями, обработка которых создаёт небольшую дополнительную нагрузку на системы, процедура установления соединения не требуется. О том, как именно происходит обмен данными по UDP, мы говорить не будем.
IP-адрес, соответствующий интересующему нас доменному имени, может иметься в кэше DNS-сервера. Если это не так — он обратиться к корневому DNS-серверу. Система корневых DNS-серверов состоит из 13 серверов, от которых зависит работа всего интернета.
Получив запрос, корневой DNS-сервер перенаправляет его к DNS-серверу домена верхнего уровня, к так называемому TLD-серверу (от Top-Level Domain).
У TLD-серверов есть IP-адреса серверов имён (Name Server, NS), средствами которых и можно узнать IP-адрес по имеющемуся у нас URL. Откуда NS-сервера берут эти сведения? Дело в том, что если вы покупаете домен, доменный регистратор отправляет данные о нём серверам имён. Похожая процедура выполняется и, например, при смене хостинга.
Сервера, о которых идёт речь, обычно принадлежат хостинг-провайдерам. Как правило, для защиты от сбоев, создаются по несколько таких серверов. Например, у них могут быть такие адреса:
Теперь, после того, как нам удалось выяснить IP-адрес, стоящий за введённым в адресную строку браузера URL, мы переходим к следующему шагу нашей работы.
▍Установление TCP-соединения
Узнав IP-адрес сервера, клиент может инициировать процедуру TCP-подключения к нему. В процессе установления TCP-соединения клиент и сервер передают друг другу некоторые служебные данные, после чего они смогут обмениваться информацией. Это означает, что, после установления соединения, клиент сможет отправить серверу запрос.
▍Отправка запроса
Запрос представляет собой структурированный в соответствии с правилами используемого протокола фрагмент текста. Он состоит из трёх частей:
Строка запроса
Строка запроса представляет собой одну текстовую строку, в которой содержатся следующие сведения:
Заголовок запроса
Заголовок может выглядеть так:
Среди других часто используемых заголовков запросов можно отметить следующие:
Заголовок запроса завершается пустой строкой.
Тело запроса
Тело запроса необязательно, в GET-запросах оно не используется. Тело запроса используется в POST-запросах, а также в других запросах. Оно может содержать, например, данные в формате JSON.
Так как сейчас речь идёт о GET-запросе, тело запроса будет пустым, с ним мы работать не будем.
▍Ответ
После того, как сервер получает отправленный клиентом запрос, он его обрабатывает и отправляем клиенту ответ.
Ответ начинается с кода состояния и с соответствующего сообщения. Если запрос выполнен успешно, то начало ответа будет выглядеть так:
Если что-то пошло не так, тут могут быть и другие коды. Например, следующие:
Разбор HTML-кода
После того, как браузер получает ответ сервера, в теле которого содержится HTML-код, он начинает его разбирать, повторяя вышеописанный процесс для каждого ресурса, который нужен для формирования страницы. К таким ресурсам относятся, например, следующие:
О создании простого сервера средствами Node.js
Теперь, после того, как мы разобрали процесс взаимодействия браузера и сервера, вы можете по-новому взглянуть на раздел Первое Node.js-приложение из первой части этой серии материалов, в котором мы описывали код простого сервера.
Выполнение HTTP-запросов средствами Node.js
Для выполнения HTTP-запросов средствами Node.js используется соответствующий модуль. В приведённых ниже примерах применяется модуль https. Дело в том, что в современных условиях всегда, когда это возможно, нужно применять именно протокол HTTPS.
▍Выполнение GET-запросов
Вот пример выполнения GET-запроса средствами Node.js:
▍Выполнение POST-запроса
Вот как выполнить POST-запрос из Node.js:
▍Выполнение PUT-запросов и DELETE-запросов
▍Выполнение HTTP-запросов в Node.js с использованием библиотеки Axios
Axios — это весьма популярная JavaScript-библиотека, работающая и в браузере (сюда входят все современные браузеры и IE, начиная с IE8), и в среде Node.js, которую можно использовать для выполнения HTTP-запросов.
Эта библиотека основана на промисах, она обладает некоторыми преимуществами перед стандартными механизмами, в частности, перед API Fetch. Среди её преимуществ можно отметить следующие:
Установка
Для установки Axios можно воспользоваться npm:
Того же эффекта можно достичь и при работе с yarn:
Подключить библиотеку к странице можно с помощью unpkg.com :
API Axios
Выполнить HTTP-запрос можно, воспользовавшись объектом axios :
Но обычно удобнее пользоваться специальными методами:
Axios предлагает отдельные методы и для выполнения других видов HTTP-запросов, которые не так популярны, как GET и POST, но всё-таки используются:
Запросы GET
Axios удобно использовать с применением современного синтаксиса async/await. В следующем примере кода, рассчитанном на Node.js, библиотека используется для загрузки списка пород собак из API Dog. Здесь применяется метод axios.get() и осуществляется подсчёт пород:
То же самое можно переписать и без использования async/await, применив промисы:
Использование параметров в GET-запросах
GET-запрос может содержать параметры, которые в URL выглядят так:
При использовании Axios запрос подобного рода можно выполнить так:
Того же эффекта можно достичь, настроив свойство params в объекте с параметрами:
Запросы POST
В качестве второго аргумента метод post принимает объект с параметрами запроса:
Использование протокола WebSocket в Node.js
WebSocket представляет собой альтернативу HTTP, его можно применять для организации обмена данными в веб-приложениях. Этот протокол позволяет создавать долгоживущие двунаправленные каналы связи между клиентом и сервером. После установления соединения канал связи остаётся открытым, что даёт в распоряжение приложения очень быстрое соединение, характеризующееся низкими задержками и небольшой дополнительной нагрузкой на систему.
Протокол WebSocket поддерживают все современные браузеры.
▍Отличия от HTTP
HTTP и WebSocket — это очень разные протоколы, в которых используются различные подходы к обмену данными. HTTP основан на модели «запрос — ответ»: сервер отправляет клиенту некие данные после того, как они будут запрошены. В случае с WebSocket всё устроено иначе. А именно:
▍Защищённая версия протокола WebSocket
▍Создание WebSocket-соединения
Для создания WebSocket-соединения нужно воспользоваться соответствующим конструктором:
Для обработки ошибок используется обработчик события onerror :
▍Отправка данных на сервер
После открытия WebSocket-соединения с сервером ему можно отправлять данные. Сделать это можно, например в коллбэке onopen :
▍Получение данных с сервера
▍Реализация WebSocket-сервера в среде Node.js
Для того чтобы реализовать WebSocket-сервер в среде Node.js, можно воспользоваться популярной библиотекой ws. Мы применим её для разработки сервера, но она подходит и для создания клиентов, и для организации взаимодействия между двумя серверами.
Установим эту библиотеку, предварительно инициализировав проект:
Код WebSocket-сервера, который нам надо написать, довольно-таки компактен:
Здесь мы создаём новый сервер, который прослушивает стандартный для протокола WebSocket порт 8080 и описываем коллбэк, который, когда будет установлено соединение, отправляет клиенту сообщение ho! и выводит в консоль сообщение, полученное от клиента.
Вот рабочий пример WebSocket-сервера, а вот — клиент, который может с ним взаимодействовать.
Надоевшая почта или как отправлять сообщения с сайта в Telegram через Node.js (Express)
После нескольких писем, отправленных с сайта себе на почту, понял что это достаточно неудобно, не современно (возможно), как минимум не прикольно. Задался целью отказаться от использования smtp для формы в пользу api Телеграма.
Так как мое приложение работает на ноде, подумал почему бы не прокачать форму. Общая логика до боли проста. При отправке формы делается запрос к api приложения, где хранится токен бота, обрабатываются данные и далее делается запрос к api телеграмма, который отправляет сообщение в чат.
Но давайте обо всем по порядку.
Для начала, естественно, необходимо создать бота, который будет получать данные из формы и отправлять вам. По сути, он является всего лишь посредником между вами и api телеграмма.
Итак, стучимся к родителю всех ботов, а именно к @BotFather и просим его создать нам одного (вводим /newbot). Вводим имя, ник и получаем токен бота. Как раз он нам и нужен. Заметьте, что ник бота должен быть _bot или Bot.
Создали, хорошо, но надо оживить его. Ищем его в поиске по нику и пишем /start. Все, теперь можем обращаться к нему через api.
Далее необходимо создать группу, куда бот будет кидать сообщения, не забываем добавить его в чат.
Вводим /join @ник_бота в созданном чате, потому что бывает, что не добавляется в логи запись о приглашении бота в группу.
Идем в браузер и в адресной строке вводим:
где XXXXXXXXXXXXXXXXXXXXXXX — токен бота, который любезно дал вам @BotFather.
Отлично, получили токен бота и id чата, куда будут приходить сообщения.
Теперь давайте приступим к приложению.
Front
Начнем сначала с фронта.
Я использовал для работы Node обёртку Express, который в свою очередь умеет рендерить файлы различных шаблонизаторов. Решил воспользоваться Pug. Он достаточно прост в освоении, поэтому если впервые сталкиваетесь с ним, труда познакомится с ним не возникнет. Для примера не стал использовать сборщики, поэтому скрипты подключаются по старинке.
Структура приложения сгенерирована с помощью Express Generator.
Разметка формы
Не забываем что в Pug вложенность элементов определяется отступами, как в питоне, так что учитывайте это.
Добавляем стили и вот такая форма у меня получилась.
Сообщение будет отправляться без перезагрузки страницы, поэтому вешаем обработчик на форму, собираем данные, преобразуем в json и отправляем их асинхронно себе в api + выводим сообщение о статусе запроса.
На стороне сервера для начала нужно отловить запрос со стороны клиента, для этого в роутере пишем:
Для упрощения процесса запроса установлен пакет ‘request‘.
Итак, что же здесь происходит?
В запросе мы передали json, поэтому на стороне сервера с данными можем работать как с обычным объектом.
Для удобства каждое значение объекта запихиваем в массив.
API телеграмма позволяет передать данные посредством текста в адресной строке, поэтому проходим по массиву и создаём длинную строку. Чтобы можно было передать HTML теги, необходимо закодировать строку в универсальный идентификатор (метод encodeURI()), чтобы не вылезала ошибка.
Теперь можно наконец отправить это всё на сервер телеграмма. Делаем запрос (нажимаем кнопку ‘Отправить’) и вуаля, сообщение отправлено. Не забываем обработать ответ, а то мало ли что.
После всех манипуляций, ответ приходит на фронт и уведомляет прошло все норм или не очень.
Из-за того, что для примера не использовал сборщик, а библиотечка всплывашки рассчитана на модульную сборку, пришлось немного поколхозить при ее вызове на фронте.
Если посмотреть в логи приложения на сервере, можно увидеть примерно следующее:
Поздравляю! Теперь вы знаете как отправлять сообщения с вашего сайта в Telegram.
Я описал только общую концепцию данного процесса, поэтому настоятельно рекомендую ознакомится с исходным кодом данного примера.