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

Обновлено: 08.07.2024

Данные методом GET передаются путем их добавления к URL-адресу вызываемого сценария, предназначенного для обработки полученной информации. Для пояснения данного метода наберите в адресной строке браузера URL-адрес ресурса и добавьте сначала знак вопроса ( ? ), а затем строчку num=10 . Например

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

В этом случае мы передаем параметр num равный 10. Для добавления следующих параметров сценарию нужно использовать разделитель - амперсант ( & ), например

В данном случае мы передали скрипту три параметра: num со значением 10, type со значением " new " и v со значением " text ".
Для получения этих параметров в скрипте нужно использовать встроенный массив $_GET. Ключами этого массива будут названия параметров. В нашем случае нужно использовать $_GET["num"], $_GET["type"],$_GET["v"] . Эти элементы массива и будут содержать значения переданных параметров. Для демонстрации этого примера создайте файл script.php следующего содержания

Немного прокомментирую созданную форму. Формы создаются тегом form . Поля формы создаются тегами input , select , textarea (подробнее можно почитать формы в HTML). В теге form в атрибуте action указывается URL-адрес скрипта, который получит данные формы. В нашем случае мы указали уже существующий у нас файл script.php . Атрибут method задает метод отправки данных. Мы указали метод GET. Теперь мы знаем, какому файлу будут переданы данные формы, и каким способом, осталось разобраться, где их там искать?!
Данные этой формы будут переданы веб-ресурсу браузером путем добавления их к URL-адресу: сначала будет знак вопроса ( ? ), затем будут представлены параметры разделенные амперсантом ( & ). Название параметра будет браться из атрибута name , которое должно быть прописано у любого поля формы. Значение параметра будет зависеть от типа поля. Если поле является текстовым, то значением будет введенный пользователем текст. Если же поле будет представлять собой список, группу переключателей или флажков, то значением параметра будет значение атрибута value выбранного элемента. Поясню на примере нашей формы. Если пользователь введет в поле input число 10, то названием параметра будет num (значение атрибута name тега input ), а значением будет 10 (введенное пользователем число). Соответственно браузер сформирует пару " num=10 ". Если пользователь из списка выберет вариант "Да", то названием параметра будет type (значение атрибута name тега select ), а значением будет yes (значение атрибута value тега option ). Соответственно браузер сформирует пару " type=yes ".
Теперь эту форму разместим на странице forma.php .

Теперь давайте рассмотрим, как работает метод POST.
Для отправки данных методом POST нужно использовать HTML -формы. Как мы помним, что за способ отправки данных формы отвечает атрибут method тега form . Поэтому нужно в атрибуте method тега form указать значение POST . В остальном форма может быть та же, как и для метода GET . Изменим нашу форму, которую мы уже использовали для передачи данных способом GET , для передачи методом POST .

Как видите, форма осталась та же за исключением атрибутов method и action . Теперь данные будут передаваться сценарию script_post.php . Поместим нашу форму на странице forma_post.php .

Теперь надо написать сценарий, который будет обрабатывать данные нашей формы.
Для получения в скрипте данных переданным методом POST нужно использовать встроенный массив $_POST. Ключами этого массива будут названия параметров. В нашем случае нужно использовать $_POST["num"], $_POST["type"],$_POST["v"] . Эти элементы массива и будут содержать значения переданных данных. Как видите отличие от использования способа GET , выражается лишь в использовании массива $_POST . Поэтому нам не составит труда написать файл script_post.php :

Сравнение методов GET и POST

При использовании метода GET данные передаются путем добавления к URL-адресу. Таким образом, они будут видны пользователю, что с точки зрения безопасности не всегда хорошо. Также максимальный объем передаваемых данных будет зависеть от браузера - от максимально-допустимого количества символов адресной строке браузера.
При использовании метода POST данные не будут видны пользователю (не отображаются в адресной строке браузера). И поэтому они более защищены, а, следовательно, и программа обрабатывающая эти данные более защищена в плане безопасности. Также объем передаваемых данных практически ни чем не ограничен.
Выбирая способ передачи данных нужно учитывать приведенные особенности и останавливаться на наиболее приемлемом методе.

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

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

Куда отправляются данные?

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

О клиентской/серверной архитектуре

Примечание: Для получения более полного представления о том, как работают клиент-серверные архитектуры, ознакомьтесь с модулем «Первые шаги в программировании на стороне сервера».

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

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

Атрибут action

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

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

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

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

Атрибут method

Метод GET

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

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

say , со значением Hi
to , со значением Mom

Примечание: вы можете найти этот пример на GitHub — смотрите get-method.html (see it live also).

Метод POST

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

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

Примечание: вы можете найти этот пример на GitHub — смотрите post-method.html (see it live also).

Нажмите F12
Выберите Network
Выберите "All"
Выберите "foo.com" во вкладке "Name"
Выберите "Headers"

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

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

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

Пример: Чистый PHP

Пример: Python

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

Два шаблона из коде выше взаимодействуют так:

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

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

Другие языки и фреймворки

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

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

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

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

Атрибут enctype

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

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

Примечание: Некоторые браузеры поддерживают multiple атрибут элемента <input> , который позволяет выбрать больше одного файла для загрузки, при использовании одного элемента <input> . То, как сервер работает с этими файлами, напрямую зависит от технологий, используемых на сервере. Как упоминалось ранее, использование фреймворков сделает вашу жизнь намного легче.

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

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

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

В зависимости от того, что вы делаете, вы можете столкнуться с некоторыми очень известными проблемами безопасности:

XSS "Межсайтовый скриптинг" и CSRF "Подделка межсайтовых запросов"

Межсайтовый скриптинг (XSS "Cross Site Request Forgery") и подделка межсайтовых запросов (CSRF "Cross-Site Scripting") - это распространённые типы атак, которые происходят при отображении данных после ответа сервера или другого пользователя.

Межсайтовый скриптинг (XSS "Cross Site Request Forgery") позволяет злоумышленникам внедрить клиентский скрипт в веб-страницы, просматриваемые другими пользователями. Подделка межсайтовых запросов (CSRF "Cross-Site Scripting") может использоваться злоумышленниками для обхода средств контроля доступа, таких как одна и та же политика происхождения. Последствие от этих атак может варьироваться от мелких неудобств до значительного риска безопасности.

CSRF-атаки аналогичны XSS-атакам в том, что они начинаются одинаково - с внедрения клиентского скрипта в веб-страницы - но их конечные цели разные. Злоумышленники CSRF пытаются назначить права пользователям с более высоким уровнем прав доступа(например, администратору сайта), чтобы выполнить действие, которое они не должны выполнять (например, отправка данных ненадёжному пользователю). Атаки XSS используют доверие пользователя к веб-сайту, в то время как атаки CSRF используют доверие веб-сайта к пользователю.

Чтобы предотвратить эти атаки, вы всегда должны проверять данные, которые пользователь отправляет на ваш сервер, и (если вам нужно отобразить их) стараться не отображать HTML-контент, предоставленный пользователем. Вместо этого вы должны обработать предоставленные пользователем данные, чтобы не отображать их слово в слово. Сегодня почти все платформы на рынке реализуют минимальный "фильтр", который удаляет элементы HTML <script> , <iframe> (en-US) и <object> (en-US) полученных от любого пользователя. Это помогает снизить риск, но не исключает его полностью.

SQL - вброс

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

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

Такие атаки являются самыми незаметными, но при этом могут превратить ваш сервер в зомби.

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

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

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

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

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

Примечание: В статье Безопасность веб-сайта нашего раздела серверного обучения приведено подробное обсуждение упомянутых угроз и возможных способов их устранения.

Заключение

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

Смотрите также

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

Передача данных в адресной строке

Одним из простых способов передачи данных php сценарию является адресная строка браузера, где после знака ? вы можете указать набор параметров в формате имя_параметра=значение если параметров несколько они разделяются сиvволом & . Например:

Все переданные параметры можно получить в сценарии script.php следующим образом:

Здесь мы выводим на экран глобальный массив $_GET функцией print_r() , если вы всё сделали правильно, то в браузере вы увидите примерно такой результат:

Справка: $_GET — это ассоциативный массив переменных, переданных php сценарию через адресную строку браузера (параметры URL). Обратите внимание, что данный массив не только заполняется для GET-запросов (отправляемых формой), а скорее для всех запросов со строкой запроса (обращения поисковых роботов, запросы к API и т.п.). Аналогично есть глобальный массив $_POST в который попадают переменные отправленные методом POST и массив $_REQUEST в который попадают все переменные из POST и GET запросов.

Такой способ передачи данных скрипту используется редко, обычно для тестирования (чтобы не писать html-форму) или когда вы пишите какой-то простой скрипт для промежуточной задаче и нужен некий «механизм» его запуска, можно поставить условие в сценарии на наличие параметра start=yes в адресной строке.

Трансляция формы

Теперь перейдём непосредственно к теме статьи. Для продолжения нам придётся сверстать небольшую форму, я предлагаю сделать её внутри тестового скрипта script.php из примеров выше. Вот пример html-формы:

Обратите внимание на атрибуты формы:

action — адрес скрипта который будет обрабатывать запрос от формы и
method — метод передачи данных

Параметр method по умолчанию равен get, но я привык указывать его явно. Так же обратите внимание на то, что у каждого поля формы ОБЯЗАТЕЛЬНО должен быть атрибут name именно значение из атрибута name попадёт в адресную строку как имя_параметра. Если вы не укажете name у полей формы, вы не сможете корректно обработать переданные скрипту данные. Давайте отправим тестовые данные через форму и посмотрим результат.

Адресная строка при этом содержит всё что мы вводили в поля формы:

Пример максимально упрощён.

Обработка списков

Работа с выпадающим списком selectbox мало чем отличается от обычных полей, тут больше отличие со стороны HTML, давайте добавим в нашу форму небольшой selexbox для наглядной демонстрации:

Обратите внимание что у поля selectbox атрибут name указывается непосредственно в теге <select> а вот value — значение поля указывается внутри у тегов <option> . Более того, по умолчанию при выводе формы в браузере, в поле selectbox всегда выбрано первое доступное значение. Т.е. при передаче данных скрипту, в параметре $_GET[‘gov’] всегда будет выбрано «Среднее». Чтобы этого избежать, обычно добавляют дополнительный <option> в начало с пустым атрибутом value. Тогда пользователю нужно будет непосредственно выбрать доступную в выпадающем списке опцию. Так же это позволяет легко отфильтровать переданные пустые значения на стороне сервера (в php скрипте). После корректировки наше поле «Образование» приобретает такой вид:

Обработка массивов

Что делать когда нужно передать несколько значений одного параметра? Например то же образование у человека может быть и средне-специальное и высшее. Можно добавить атрибут multipli в наш selectbox или использовать поле типа checkbox. Давайте превратим наш selextbox в checkbox.

Обратите внимание на квадрантные скобки в атрибуте name наших checkbox-ов, эти скобки означают что вы можете передать несколько значений под одним именем в данном случае edu ( сокращение от английского education — образование ) . Если заполнить форму и выбрать несколько образований, параметр edu будет передан как массив:

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

Особенности отправки checkbox

Обратите внимание на прошлый пример. При использовании checkbox не нужно создавать отдельное поле с пустым value как это было у selectbox. Дело в том, что если вы не выбрали ни одно значение из предложенных checkbox-ов, этот параметр вовсе не будет отправлен на сервер. Это следует учитывать в вашем скрипте и делать дополнительную проверку на существование переменной в глобальном массиве $_GET.

Передача файла

Для отправки файла средствами веб-формы предусмотрено специальное поле file, давайте добавим его в нашу форму. Но прежде чем это сделать, нужно внести изменения в тег <form> а именно:

Изменить метод передачи данных на post
Добавить атрибут enctype=«multipart/form-data»

Так же следует отметить, что данные о переданном на сервер файле попадают в отдельный глобальный массив $_FILES откуда мы можем их получить и корректно обработать файл.

Я добавил вот такой код перед формой, чтобы наглядно продемонстрировать содержимое глобальных массивов $_POST и $_FILES:

Отправляем форму, получаем такую картину:

Как видите поле resume не попало в массив $_POST а сразу перешло в массив $_FILES. Php сам определяет какие данные, каким методом и какого типа были переданы и распределяет их по доступным глобальным массивам.

Безопасность

Одно из главных правил при обработке форм на php — НИКОГДА не доверяйте данным пришедшим с формы. Вам нужно обязательно отфильтровать каждое поле на стороне сервера, даже если на клиенте у вас стоит jQuery валидатор и прочие javascript обработчики призванные предотвратить некорректную или злонамеренную отправку данных через форму на сервере.

Существует множество способов фильтрации данных, один из приёмов это так называемый «Белый список» когда вы точно знаете что в переменной age у вас может быть только целочисленное значение в диапазоне от 18 до 60, вы можете проверить переменную на int а так же входит ли число в заданный диапазон.

Поле email можно проверять при помощи регулярного выражения на соответствие определённому шаблону, например:

И тому подобное. Всегда помните что все данные приходящие из формы несут потенциальную опасность и их нужно тщательно проверить. А на этом всё. По мере работы буду добавлять в статью «живые примеры» и детали. Желаю удачи!

Функции и конструкции языка использованные в статье: intval(), is_numeric()

Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action элемента <form> , как показано в примере 1.

Пример 1. Отправка данных формы

В этом примере данные формы, обозначенные атрибутом name ( login и password ), будут переданы в файл по адресу handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.

Передача на сервер происходит двумя разными методами: GET и POST. Для задания метода в <form> применяется атрибут method , а его значениями выступают ключевые слова, соответственно, get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.

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

Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами ?q=node/add и ?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.

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

Передача небольших текстовых данных на сервер; поиск по сайту.

Данные для поисковых систем и поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.

Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target элемента <form> . Популярные значения — _blank для открытия формы в новом окне или вкладке; имя фрейма, которое задаётся атрибутом name элемента <iframe> (пример 2).

Пример 2. Открытие формы во фрейме

Элементы формы традиционно располагаются внутри <form> , тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, поскольку сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).

Пример 3. Связывание формы с полями

Хотя параметры передачи формы традиционно указываются внутри <form> , их можно перенести и в кнопки отправки формы ( <button> и <input type="submit"> ). Для этого применяется набор атрибутов formaction , formmethod , formenctype и formtarget , которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.

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