Как отправить запрос на публикацию из браузера

Обновлено: 05.07.2024

Эта страница создана с помощью сети HTML, CSS и Javascript, отправленной вам Codecademy через Интернет. Интернет состоит из множества ресурсов, размещенных на разных серверах. Термин «ресурс» относится к любому объекту в Интернете, включая файлы HTML, таблицы стилей, изображения, видео и сценарии. Чтобы получить доступ к контенту в Интернете, ваш браузер должен запрашивать у этих серверов необходимые ему ресурсы, а затем отображать эти ресурсы для вас. Этот протокол запросов и ответов позволяет просматривать эту страницу в браузере.

В этой ситуации ваш компьютер, который делает запрос, называется клиентом. Запрашиваемый вами URL-адрес принадлежит серверу.

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

Вторая строка запроса содержит адрес сервера "www.codecademy.com" . Также могут быть дополнительные строки в зависимости от того, какие данные предпочитает отправлять ваш браузер.

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

Если сервер не может найти путь, запрошенный клиентом, он ответит заголовком:

Аналогия:

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

Доставщик почты возвращается на легком скоростном поезде, разрывая пути на обратном пути, и сообщает вам, что возникла проблема «404 Not Found». После проверки правописания того, что вы написали, вы понимаете, что ошиблись в названии газеты. Вы исправляете его и сообщаете исправленный заголовок доставщику почты.

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

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

Использование инспектора

Не закрывая инспектор, нажмите на вкладку Сеть:

Вложенная вкладка по умолчанию Заголовки показывает заголовки запросов, отправленных на сервер, а также заголовки ответов, полученные от сервера.

Нажмите на вложенную вкладку Ответ, чтобы просмотреть необработанные данные ответа.

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

Вы должны увидеть только один запрос и ответ, содержащий HTML, но никаких дополнительных запросов, автоматически выдаваемых, как вы видите в браузере.

Методы запроса

Вернемся к диаграмме из шага 3 выше, когда мы рассмотрели ответы на вкладке Сеть. Возможно, вы заметили два столбца с именами «Метод» и «Статус». Если столбец «Метод» не отображается, возможно, он скрыт по умолчанию. Чтобы отобразить столбец «Метод», щелкните правой кнопкой мыши «Статус» и выберите Метод. Столбец «Метод» теперь должен отображаться рядом со столбцом «Статус».

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

В столбце Статус отображается статус ответа на каждый запрос. Подробнее об ответах мы поговорим позже в этой книге. Важно понимать, что каждый запрос получает ответ, даже если ответ является ошибкой — это все равно ответ. (Технически это не на 100 % верно, так как время ожидания некоторых запросов может истечь, но мы пока отложим эти редкие случаи.)

GET-запросы

Пользователи curl могут ввести следующую команду на своем терминале:

перед отправкой запроса обязательно выберите ПОЛУЧИТЬ .

Команда curl для этого примера:

POST-запросы

Вот команда curl:

Давайте рассмотрим еще один пример выполнения запроса POST путем заполнения веб-формы. Наш образец формы выглядит в браузере следующим образом:

После заполнения формы вы будете перенаправлены на страницу, которая выглядит следующим образом:

Примечание. Убедитесь, что заголовок Content-Type имеет значение application/x-www-form-urlencoded . В противном случае ваш POST-запрос не будет правильно интерпретирован приложением.

Если вы используете Paw 3, выберите вкладку Form URL-Encoded вместо вкладки Text.
Если вы используете Insomnia, убедитесь, что вы выбрали "Form URL Encoded" в раскрывающемся меню Body. И если вы используете Postman, убедитесь, что переключатель для x-www-form-urlencoded выбран на вкладке Body.

Или вы можете использовать curl:

Обратите внимание, что на снимке экрана и в команде curl мы указываем дополнительный параметр player_name=albert . Это имеет тот же эффект, что и ввод имени в первое поле «Как тебя зовут?» форму и отправить ее.

Мы можем проверить содержимое с помощью инспектора (щелкните правой кнопкой мыши и выберите «Проверить» ). Вы увидите, что параметр player_name, который мы отправляем как часть POST-запроса, встроен в форму через атрибут name элемента ввода:

Запрос POST, сгенерированный инструментом HTTP или curl, аналогичен заполнению формы в браузере, отправке этой формы и последующему перенаправлению на следующую страницу. Внимательно посмотрите на необработанный ответ на снимке экрана инструмента HTTP. Ключевая информация, которая перенаправляет нас на следующую страницу, указана в поле Location: http://al-blackjack.herokuapp.com/bet. Расположение и связанные с ним данные являются частью того, что известно как заголовок ответа HTTP (да, запросы тоже имеют заголовки, но в данном случае это заголовок ответа). Пока не слишком беспокойтесь об этом, так как мы обсудим заголовки в следующем разделе. Ваш браузер видит заголовок ответа и автоматически отправляет новый запрос на URL-адрес, указанный в заголовке Location, тем самым инициируя новый, несвязанный запрос. Форма "Сделать ставку", которую вы видите, является ответом на этот второй запрос.

Примечание. Если вы используете какой-либо другой HTTP-инструмент, например Insomnia или Postman, вам, возможно, придется снять флажок "автоматически следовать перенаправлениям", чтобы увидеть заголовок ответа Location.

Если вы не поняли предыдущий абзац, прочитайте его еще раз. Очень важно понимать, что при использовании браузера браузер скрывает от вас большую часть лежащего в основе цикла HTTP-запроса/ответа. Ваш браузер выдал первоначальный запрос POST, получил ответ с заголовком Location, затем выдал другой запрос без каких-либо действий с вашей стороны, а затем отобразил ответ на этот второй запрос. Опять же, если бы вы использовали чистый HTTP-инструмент, вы бы увидели заголовок ответа Location из первого запроса POST, но инструмент не выдал бы вам второй запрос автоматически.(Некоторые инструменты HTTP имеют эту возможность, если вы отметите опцию «автоматически следовать перенаправлениям».)

Выше показаны различные заголовки, передаваемые во время цикла запроса/ответа. Кроме того, мы видим, что запрос и ответ содержат разные наборы заголовков в разделе «Заголовки запроса»:

Заголовки запроса

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

Обзор

В этой статье мы расскажем, как создать POST-запрос с помощью Requests и как это может упростить нам этот процесс.

Создание запроса JSON POST с запросами

1. Установите метод запроса на POST

2. Установите данные POST

Чтобы действительно отправить некоторые данные, мы предоставляем аргумент данных. По умолчанию данные отправляются в виде HTML-формы, которую мы получили бы, отправив любую форму в Интернете. Запросы задают тип содержимого «application/x-www-form-urlencoded», поэтому нет необходимости устанавливать какие-либо заголовки.

Проверив ответ службы httpbin.org, мы можем увидеть, что было отправлено в виде данных формы с помощью ключа "form".

Если мы хотим отправить JSON, мы можем предоставить строку в формате JSON. В нашем примере мы используем модуль json для преобразования словаря в форматированную строку JSON, готовую к отправке.

3. Установите заголовки POST

4. ОТПРАВИТЬ JSON-данные

Если вы думаете, что наши примеры JSON выглядят немного сложными, вы совершенно правы. Запросы позволяют очень легко свести все это к гораздо более простому вызову. Мы можем просто предоставить аргумент «json» с нашими данными. Запросы будут правильно устанавливать наши заголовки и автоматически кодировать форматированную строку JSON для нас.

Чтение ответов JSON

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

В качестве альтернативы, если мы хотим получить доступ к ответу как к объекту JSON, мы также можем использовать запросы, встроенные в декодер JSON, вызвав .json() для объекта ответа.

Выполнение запросов POST в сеансе

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

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

Вам часто понадобятся прокси-серверы для проектов парсинга веб-страниц, обязательно ознакомьтесь с этой статьей о том, как использовать прокси-серверы с запросами Python.

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

После проверки данных формы на стороне клиента можно отправлять форму. И, поскольку мы рассмотрели проверку в предыдущей статье, мы готовы представить! В этой статье рассматривается, что происходит, когда пользователь отправляет форму — куда попадают данные и как мы обрабатываем их, когда они туда попадают? Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.

Требования:	Базовая компьютерная грамотность, понимание HTML и базовые знания HTTP и серверного программирования.
Цель:	Понять, что происходит при отправке данных формы, в том числе получить общее представление о том, как данные обрабатываются на сервере. td>

Сначала мы обсудим, что происходит с данными при отправке формы.

Архитектура клиент/сервер

Примечание. Чтобы лучше понять, как работают архитектуры клиент-сервер, прочитайте наш модуль "Первые шаги по программированию веб-сайтов на стороне сервера".

На стороне клиента: определение способа отправки данных

Элемент определяет способ отправки данных.Все его атрибуты предназначены для того, чтобы вы могли настроить отправку запроса, когда пользователь нажимает кнопку отправки. Двумя наиболее важными атрибутами являются action и method .

Атрибут действия

Атрибут действия определяет, куда отправляются данные. Его значение должно быть допустимым относительным или абсолютным URL-адресом. Если этот атрибут не указан, данные будут отправлены на URL страницы, содержащей форму — текущей страницы.

Здесь мы используем относительный URL-адрес — данные отправляются на другой URL-адрес того же источника:

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

Имена и значения нефайловых элементов управления формы отправляются на сервер в виде пар имя=значение, соединенных амперсандами. Значением действия должен быть файл на сервере, который может обрабатывать входящие данные, включая обеспечение проверки на стороне сервера. Затем сервер отвечает, обычно обрабатывая данные и загружая URL-адрес, определенный атрибутом действия, вызывая загрузку новой страницы (или обновление существующей страницы, если действие указывает на ту же страницу).

Способ отправки данных зависит от атрибута метода.

Атрибут метода

Метод GET

Метод GET – это метод, используемый браузером для запроса сервера на отправку данного ресурса: "Эй, сервер, я хочу получить этот ресурс". В этом случае браузер отправляет пустое тело. Поскольку тело пусто, если форма отправляется с использованием этого метода, данные, отправляемые на сервер, добавляются к URL-адресу.

Рассмотрите следующую форму:

< /p>

Данные добавляются к URL-адресу в виде последовательности пар имя/значение. После того, как веб-адрес URL закончился, мы добавляем вопросительный знак ( ? ), за которым следуют пары имя/значение, каждая из которых разделена амперсандом ( & ). В этом случае мы передаем на сервер две части данных:

say , значение которого равно Hi
to , значение которого равно Mom

Примечание. Этот пример можно найти на GitHub — см. get-method.html (также смотрите его вживую).

Метод POST

Давайте рассмотрим пример — это та же форма, которую мы рассматривали в разделе GET выше, но с атрибутом метода, установленным на POST .

Заголовок Content-Length указывает размер тела, а заголовок Content-Type указывает тип ресурса, отправляемого на сервер. Мы обсудим эти заголовки позже.

Примечание. Этот пример можно найти на GitHub — см. post-method.html (также смотрите его вживую).

Откройте инструменты разработчика.
Выберите "Сеть".
Выберите "Все"
Выберите «foo.com» на вкладке «Имя».
Выберите "Заголовки".

Затем вы можете получить данные формы, как показано на изображении ниже.

< /p>

Единственное, что отображается для пользователя, — это вызываемый URL. Как мы упоминали выше, с запросом GET пользователь увидит данные в своей строке URL, но с запросом POST они не увидят. Это может быть очень важно по двум причинам:

Если вам нужно отправить пароль (или любую другую конфиденциальную часть данных), никогда не используйте метод GET, иначе вы рискуете отобразить его в строке URL, что было бы очень небезопасно.
Если вам нужно отправить большой объем данных, предпочтительнее использовать метод POST, поскольку некоторые браузеры ограничивают размер URL-адресов. Кроме того, многие серверы ограничивают длину принимаемых URL-адресов.

На стороне сервера: получение данных

Пример: необработанный PHP

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

В этом примере отображается страница с отправленными нами данными. Вы можете увидеть это в действии в нашем примере файла php-example.html, который содержит тот же пример формы, что и раньше, с методом POST и действием php-example.php. Когда он отправляется, он отправляет данные формы в php-example.php, который содержит код PHP, показанный в приведенном выше блоке. Когда этот код выполняется, в браузере выводится Hi Mom .

< /p>

Примечание. Этот пример не будет работать, если вы загрузите его в браузер локально — браузеры не могут интерпретировать код PHP, поэтому при отправке формы браузер просто предложит загрузить файл PHP для вас. Чтобы заставить его работать, вам нужно запустить пример через какой-либо PHP-сервер.Хорошими вариантами локального тестирования PHP являются MAMP (Mac и Windows) и AMPPS (Mac, Windows, Linux).

Также обратите внимание: если вы используете MAMP, но не установили MAMP Pro (или если срок действия пробной версии MAMP Pro истек), у вас могут возникнуть проблемы с его работой. Мы обнаружили, что для того, чтобы оно снова заработало, вы можете загрузить приложение MAMP, а затем выбрать пункты меню MAMP > Настройки > PHP, и установите "Стандартная версия:" на "7.2.x" (x будет отличаться в зависимости от установленной версии).

Пример: Python

В этом примере показано, как можно использовать Python для выполнения той же задачи — отображения отправленных данных на веб-странице. При этом используется среда Flask для рендеринга шаблонов, обработки отправки данных формы и т. д. (см. python-example.py).

Два шаблона, упомянутые в приведенном выше коде, выглядят следующим образом (они должны находиться в подкаталоге templates в том же каталоге, что и файл python-example.py, если вы пытаетесь запустить пример самостоятельно):

: Та же форма, которую мы видели выше в разделе Метод POST, но с установленным действием > . Это шаблон Jinja2, который в основном представляет собой HTML, но может содержать вызовы кода Python, на котором работает веб-сервер, заключенный в фигурные скобки. url_for('hello') в основном говорит "перенаправить на /hello при отправке формы". : этот шаблон просто содержит строку, которая отображает два бита данных, переданных ему при его отображении. Это делается с помощью функции hello(), показанной выше, которая запускается при переходе по URL-адресу /hello.

Примечание. Опять же, этот код не будет работать, если вы просто попытаетесь загрузить его непосредственно в браузер. Python работает немного иначе, чем PHP — для локального запуска этого кода вам нужно установить Python/PIP, а затем установить Flask с помощью pip3 install flask. На этом этапе вы сможете запустить пример с помощью python3 python-example.py , а затем перейти к localhost:5042 в своем браузере.

Другие языки и платформы

для Python (немного более тяжелый, чем Flask, но с большим количеством инструментов и опций). для Node.js. для PHP. для Руби. для Явы.

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

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

Особый случай: отправка файлов

Атрибут enctype

Этот атрибут позволяет указать значение HTTP-заголовка Content-Type, включенного в запрос, сгенерированный при отправке формы. Этот заголовок очень важен, потому что он сообщает серверу, какие данные отправляются. По умолчанию его значение равно application/x-www-form-urlencoded. Говоря простым языком, это означает: "Это данные формы, которые были закодированы в параметры URL".

Если вы хотите отправить файлы, вам нужно выполнить три дополнительных шага:

Установите для атрибута метода значение POST, поскольку содержимое файла нельзя поместить в параметры URL.
Установите для enctype значение multipart/form-data, поскольку данные будут разделены на несколько частей, по одной для каждого файла плюс одна для текстовых данных, включенных в тело формы (если в форму также вводится текст).
Включите один или несколько элементов управления, чтобы пользователи могли выбирать файлы для загрузки.

Проблемы безопасности

Каждый раз, когда вы отправляете данные на сервер, вам необходимо учитывать безопасность. HTML-формы на сегодняшний день являются наиболее распространенными векторами атаки на сервер (местами, где могут произойти атаки). Проблемы никогда не возникают из-за самих форм HTML — они возникают из-за того, как сервер обрабатывает данные.

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

Будьте параноиками: никогда не доверяйте своим пользователям

Итак, как вы боретесь с этими угрозами? Это тема, выходящая далеко за рамки данного руководства, но есть несколько правил, о которых следует помнить. Самое главное правило: никогда не доверяйте своим пользователям, включая себя; даже доверенный пользователь мог быть взломан.

Все данные, поступающие на ваш сервер, должны быть проверены и очищены. Всегда. Никаких исключений.

Избегайте потенциально опасных персонажей. Конкретные символы, с которыми следует быть осторожными, различаются в зависимости от контекста, в котором используются данные, и используемой вами серверной платформы, но все серверные языки имеют функции для этого. На что следует обратить внимание, так это на последовательности символов, которые выглядят как исполняемый код (например, команды JavaScript или SQL).
Ограничьте объем входящих данных, чтобы разрешить только то, что необходимо.
Файлы, загруженные в песочницу.Храните их на другом сервере и разрешайте доступ к файлу только через другой поддомен или, что еще лучше, через совсем другой домен.

Вы сможете избежать многих/большинства проблем, если будете следовать этим трем правилам, но всегда полезно поручить проверку безопасности компетентной третьей стороне. Не думайте, что вы видели все возможные проблемы.

Обзор

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

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

См. также

Если вы хотите узнать больше о защите веб-приложений, вы можете изучить следующие ресурсы:

Читайте также: