Какой метод может быть использован для передачи файла из формы
В HTML для создания форм используются теги группы form. К ним относятся:
-
- контейнер формы; - элементы формы (поля) различных типов; - кликабельная кнопка; - выпадающий список, список с множественным выбором; - пункт списка; - группа пунктов; - список предопределенных вариантов; - текстовая область; - подпись, метка поля; - группа полей; - название группы полей; - результат вычислений.
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете, нажав по названию тега.
На этой странице описана практика создания и работы с HTML формами с примером исходного кода и описанием на русском языке.
Отправка файлов при помощи объекта FormData
Вы так же можете отправлять файлы при помощи FormData. Просто включите с типом file в форму.
Примечание: Если для формы указан атрибут method , то будет использован именно этот метод для отправки данных на сервер, а не метод, указанный в вызове open()
Вы так же можете добавить File или Blob непосредственно к объекту FormData :
Метод append() принимает 3й опциональный параметр - название файла, которое добавляется в заголовок Content-Disposition при отправке на сервер. Если название файла не указано (или данный параметр не поддерживается) используется имя "blob".
Вы так же можете использовать FormData с jQuery:
Проблемы безопасности
Каждый раз, когда вы отправляете данные на сервер, вы должны учитывать безопасность. HTML-формы являются наиболее распространёнными векторами атак на серверы(места, где могут происходить атаки). Проблемы вытекают не из самих форм HTML, а из-за того, как сервер обрабатывает данные из этих форм.
В зависимости от того, что вы делаете, вы можете столкнуться с некоторыми очень известными проблемами безопасности:
Метод GET
Рассмотрим следующую форму:
Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса ( ? ), за которым следуют пары имя / значение, каждая из которых разделена амперсандом ( & ). В этом случае мы передаём две части данных на сервер:
- say , со значением Hi
- to , со значением Mom
Примечание: вы можете найти этот пример на GitHub — смотрите get-method.html (see it live also).
SQL - вброс
SQL -вброс представляет собой тип атак, при которых осуществляется попытка выполнения действия с базой данных, используемой целевым веб-сайтом. В этих случаях обычно осуществляется отправка SQL-запроса в надежде, что сервер выполнит этот запрос (обычно при попытке сервера приложения сохранить данные, отправляемые пользователем). Данный вид атак является одним из самых направленных атак на веб-сайты.
Последствия могут быть ужасающими, начиная от потери данных и заканчивая утратой контроля над всей инфраструктурой веб-сайта за счёт повышения привилегий. Это очень серьёзная угроза, поэтому никогда не сохраняйте данные, отправляемые пользователем, без выполнения фильтрации данных (например, с помощью mysqli_real_escape_string() .
Такие атаки являются самыми незаметными, но при этом могут превратить ваш сервер в зомби.
Функции для обработки данных формы
- is_string(string) – определяет, является ли переменная string строкой. Возвращает значение true или false .
- is_int(string) или is_integer(string) – определяет, является ли переменная string целым числом. Возвращает значение true или false .
- is_numeric(string) – определяет, является ли переменная string числовой строкой. Возвращает значение true или false .
- is_double(string) или is_float(string) – определяет, является ли переменная string числом с плавающей точкой. Возвращает значение true или false
- был ли отправлен запрос при щелчке на кнопке
- были ли поля заполнены цифрами, а не другими символами
- Создайте файл calculator.php
- Для построения формы воспользуйтесь конструкцией:
Лабораторная работа 8_2 (сложный вариант):
Написать интерфейс, который позволял бы создавать html-формы. Пользователь выбирает, какие элементы и в каком количестве нужно создать, придумывает им названия, а программа сама генерирует требуемую форму.
-
выбор типов элементов ввода и их количества (task_form.html);
task_form.html:
Результат:
ask_names.php:
При создании двух элементов типа «текстовая строка» и одного элемента типа «текстовая область» получим (рис. 8). Введем в эту форму, например, строки «Название», «Автор» и «Краткое содержание». Эти данные будет обрабатывать скрипт task.php.
рис. 8. Промежуточные результаты
Task.php:
Результатом работы скрипта с входными данными, приведенными выше, будет следующая форма:
Лабораторная работа 8_3 (легкий вариант):
Средствами PHP разработать простой валютный калькулятор, который конвертирует различные валюты в рубли (см. рисунок). Форму калькулятора и скрипт обработки поместить в один файл, используя функцию:
Валютный калькулятор на php
- Откройте файл в котором формируется меню.
- Измените значения всех элементов массива на index.php
- Добавьте к значению "index.php" параметр id , передаваемый методом GET
- Добавьте к параметру id уникальные значения.
Обработка HTML формы на сервере
После отправки формы данные передаются на сервер в виде параметров запроса.
Дальнейшая обработка формы осуществляется с помощью программного кода обработчика, указанного в атрибуте action формы.
Для создания обработчика понадобится один из доступных языков программирования. Распространенным вариантом является использование PHP обработчиков.
В случае использования PHP обработчика данные формы будут доступны в суперглобальных массивах $_GET и $_POST . Например, данные поля с именем "message", отправленные методом POST, будут доступны как $_POST['message'] .
Работа с формами на сервере - это отдельная обширная тема. Об обработке HTML форм на сервере читайте в справочнике по выбранному языку программирования.
Ниже представлен простейший PHP обработчик для формы обратной связи, приведенной выше. Данный обработчик отправляет данные формы на указанный email.
Этот код необходимо разместить на сервере в корневом каталоге сайта в файле feedback.php (в файле, указанном как обработчик формы).
Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).
Рис. 1. Вид поля для загрузки файла в Firefox
Рис. 2. Загрузка файлов в Chrome
При нажатии на кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.
Синтаксис поля для отправки файла следующий.
Прежде, чем использовать данное поле, в форме необходимо сделать следующее:
- задать метод отправки данных POST ( method="post" );
- установить у атрибута enctype значение multipart/form-data .
Форма для загрузки файла продемонстрирована в примере 1.
Пример 1. Создание поля для отправки файла
HTML5 IE Cr Op Sa Fx
Хотя можно установить ширину поля через атрибут size , в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.
Атрибут multiple более важен, он позволяет не ограничиваться одним файлом для выбора, а указать их сразу несколько для одновременной загрузки.
Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:
- audio/* — выбор музыкальных файлов любого типа;
- image/* — графические файлы;
- video/* — видеофайлы.
В табл. 2 показаны некоторые допустимые значения атрибута accept .
Значение | Описание |
---|---|
image/jpeg | Только файлы в формате JPEG. |
image/jpeg,image/png | Только файлы в формате JPEG и PNG. |
image/* | Любые графические файлы. |
image/*,video/* | Любые графические и видеофайлы. |
Использование дополнительных атрибутов показано в примере 2.
Пример 2. Загрузка фотографий
HTML5 IE 10+ Cr Op Sa Fx
Не все браузеры поддерживают новые атрибуты. IE полностью игнорирует multiple и accept , Safari не поддерживает accept , а Firefox не работает с MIME-типом, только с ключевыми словами. Поэтому в примере выше специально для Firefox установлено значение image/*,image/jpeg . Также учтите странную ошибку в Опере, она не допускает пробелы после запятой внутри accept .
Результат примера показан на рис. 3. Обратите внимание, что из-за наличия multiple несколько изменился вид поля.
В этой статье рассматривается, что происходит, когда пользователь отправляет форму - куда передаются данные и как мы их обрабатываем, когда они туда попадают? Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.
Предварительные знания: | Базовая компьютерная грамотность, понимание HTML и базовые знания по HTTP и программированию на стороне сервера. |
---|---|
Задача: | Понять, что происходит при отправке данных формы, в том числе получить представление о том, как данные обрабатываются на стороне сервера. |
Создание формы в HTML
Для того чтобы создать простую HTML форму, нужно поместить в код страницы тег и разместить внутри него элементы формы.
Элементы формы (другое название - поля) формируются с помощью тегов группы form. Основные типы элементов описаны ниже на этой странице. Подробное описание всех типов полей форм находится на страницах тегов соответствующих элементов.
О клиентской/серверной архитектуре
Примечание: Для получения более полного представления о том, как работают клиент-серверные архитектуры, ознакомьтесь с модулем «Первые шаги в программировании на стороне сервера».
See also
Пример HTML формы обратной связи
Итерации по массиву $_Request
Пример: В файле index.html находится форма для заполнения данных пользователем. В файле abswer.php разработать скрипт обработки данных формы с выводом введенных пользователем значений (использовать метод REQUEST )
Выполнение:
Файл index.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 , (en-US) и (en-US) полученных от любого пользователя. Это помогает снизить риск, но не исключает его полностью.
Заключение
Как мы увидели, отправлять формы просто, однако защитить приложение может быть довольно трудно. Просто помните, что фронтенд разработчики не должны задавать модель безопасности для приложения. Да, как мы увидим далее, мы можем проверить данные на стороне клиента, однако сервер не может доверять этой проверке, потому что он никогда не может по-настоящему узнать что происходит на стороне клиента.
Метод 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 не позволит. Две причины, почему это может быть важно:
Developers
При передачи данных формы на сервер формируются суперглобальные переменные — ассоциативные массивы, содержащие передаваемые значения:
- $_GET[] — ассоциативный массив, который содержит все значения, передаваемые в сценарий с помощью метода формы GET .
- $_POST[] – ассоциативный массив, который содержит все значения, передаваемые в сценарий с помощью метода формы POST .
- $_REQUEST[] – ассоциативный массив, который содержит все значение, передаваемые в сценарий с помощью методов POST и GET .
Рассмотрим пример использования метода GET
Пример: В файле index.html находится форма для заполнения данных пользователем. В файле abswer.php разработать скрипт обработки данных формы с выводом введенных пользователем значений (использовать метод GET )
Выполнение:
Файл index.html
Ваше имя" . $_GET['Firstname']; echo "
Ваша фамилия" . $_GET['Lastname']; echo "
Ваш электронный адрес" . $_GET['email']; ?>
Рассмотрим вариант безопасной обработки данных:
Безопасная обработка данных
Рассмотрим тот же самый пример с использованием метода POST
Пример: В файле index.html находится форма для заполнения данных пользователем. В файле abswer.php разработать скрипт обработки данных формы с выводом введенных пользователем значений (использовать метод POST )
Выполнение:
Файл index.html
Ваше имя" . $_POST['Firstname']; echo "
Ваша фамилия" . $_POST['Lastname']; echo "
Ваш электронный адрес" . $_POST['email']; ?>
Атрибут enctype
Этот атрибут позволяет конкретизировать значение в Content-Type HTTP заголовок, включённый в запрос, при генерировании отправки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: application/x-www-form-urlencoded . На человеческом это значит: "Это форма с данными, которые были закодированы в URL параметры."
- Указать method атрибут POST , поскольку содержимое файла, как и сам файл, не могут быть отображены в URL параметрах.
- Установить в enctype значение multipart/form-data , потому что данные будут разбиты на несколько частей: одна часть на файл (две части на два файла), и одна часть на текстовые данные (при условии, если форма содержит поле для получения тестовых данных).
- Подключите один или более File picker виджетов, чтобы позволить своим пользователям выбрать, какие и сколько файлов будут загружены.
Предупреждение: Многие сервера имеют заданные ограничения на размер загружаемых файлов и запросы от пользователей, чтобы защититься от возможных злоупотреблений. Важно проверять эти ограничения у администратора сервера, прежде чем загружать файлы.
Отправка форм и файлов при помощи AJAX без использования объекта FormData
Found a problem with this page?
Last modified: 30 мар. 2021 г. , by MDN contributors
Your blueprint for a better internet.
Support
Получение объекта FormData из HTML формы
Для создания объекта FormDatа , содержащего данные существующей формы ( ) передайте форму в качестве аргумента при создании объекта FormData:
Примечание: FormData будет использовать только те поля ввода, которые используют атрибут name.
Вы так же можете добавить дополнительные данные в объект FormData после его создания и до отправки данных:
Такой приём позволяет включать в форму дополнительную информацию, которая, например, не нуждается в демонстрации пользователю.
Стилевое оформление формы
Для оформления формы обратной связи, приведенной выше, были использованы несколько стилей CSS. Оформление не влияет на работу формы, однако, если вы хотите чтобы ваша форма выглядела также как форма из примера, воспользуйтесь CSS правилами, приведенными ниже.
Код CSS для базового оформления HTML формы обратной связи из примера выше:
Смотрите также
Если вы хотите узнать больше об обеспечении безопасности веб-приложений, вы можете использовать следующие источники информации:
Объект FormData позволяет создать набор пар ключ/значение и передать их, используя XMLHttpRequest. Объект FormData предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом submit() формы, с установленной кодировкой enctype="multipart/form-data" .
Особый случай: отправка файлов
На стороне клиента: определение способа отправки данных
Атрибут action
Этот атрибут определяет, куда отправляются данные. Его значение должно быть действительным URL. Если этот атрибут не указан, данные будут отправлены на URL-адрес страницы, содержащей форму.
Здесь мы используем относительный URL - данные отправляются на другой URL на сервере:
Многие старые страницы используют следующий синтаксис, чтобы указать, что данные должны быть отправлены на ту же страницу, которая содержит форму; это было необходимо, потому что до появления HTML5 атрибут action был обязательным. Это больше не нужно.
Атрибут method
Создание объекта FormData
Вы можете самостоятельно создать пустой объект FormData , наполнив его затем данными, используя его метод append() :
Примечание: Поля "userfile" и "webmasterfile" оба содержат файлы. Число, переданное полю "accountnum" немедленно преобразуется в строку. Преобразование осуществляется методом FormData.append() (Значение поля может быть Blob , File , или строкой: если значение не является ни Blob, ни File, то оно автоматически преобразуется в строку).
Данный пример показывает создание экземпляра FormData , содержащего поля "username", "accountnum", "userfile" и "webmasterfile". Экземпляр FormData затем отправляется при помощи метода send() объекта XMLHttpRequest . Поле "webmasterfile" является экземпляром класса Blob . Объект класса Blob является файлом-подобным объектом, содержащим "сырые" данные. Определение данных как Blob не является обязательным в нативном javascript. Интерфейс File базируется на Blob , наследуя его функциональность и расширяя его для поддержки файлов в ОС пользователя. Для создания объектов класса Blob используйте Blob() constructor .
Куда отправляются данные?
Здесь мы обсудим, что происходит с данными при отправке формы.
HTML код формы обратной связи
Рассмотрим подробно код формы.
Атрибут action содержит URL обработчика формы - по этому адресу будет отправлена форма после наступления события submit (submit - событие отправки формы).
Каждый элемент cодержит атрибут name . При отправке формы, значения введенные пользователем будут переданы в переменных с именами указанными в этом атрибуте. Атрибут type определяет тип элемента . Атрибут required делает элемент обязательными для заполнения. Форма не будет отправлена, пока пользователь не заполнит все обязательные элементы.
На стороне сервера: получение данных
Пример: Чистый 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
Стоит отметить, что использование фреймворков и работа с формами - это не всегда легко. Но это намного легче, чем пытаться написать аналогичную функциональность с нуля, и это определённо сэкономит время.
Примечание: Обучению фреймворкам и работе с серверами не входит в рамки этой статьи. Если хотите узнать больше, ссылки ниже помогут в этом.
Элементы (поля) формы html. Основные типы полей
В таблице ниже представлены основные типы элементов формы (полей). Подробную информацию о каждом элементе вы можете просмотреть на отдельной странице тега.
По умолчанию текстовое поле может принимать любые текстовые значение. Дополнительные ограничения могут быть установлены в теге (атрибут pattern), либо с помощью JavaScript.
Браузеры обычно отображают возле поля календарь, с помощью которого можно заполнить поле.
Существует несколько типов полей, содержащих данные о дате и времени:
- date - дата (число, месяц, год);
- datetime-local - дата и время (число, месяц, год, часы, минуты);
- month - месяц конкретного года (например: январь, 2004г);
- week - неделя конкретного года (например: неделя 32, 2001г).
Поле для ввода пароля:
В поле типа password введенное значение будет заменено символьной маской.
Поле для ввода чисел:
В поля из этой группы можно вводить только подходящее к типу поля содержимое.
Поля с указанным типом содержимого:
- email - поле для ввода адреса электронной почты;
- number - поле для ввода чисел;
- password - поле для ввода пароля;
- search - поле для ввода поискового запроса;
- tel - поле для ввода номера телефона;
- url - поле для ввода URL адреса.
Текстовая область может принимать в виде значения многострочный текст.
Чек-бокс представляет собой поле, в котором можно сделать отметку.
Элемент "переключатель" позволяет выбрать один из доступных вариантов.
При клике на список пользователю откроются доступные для выбора варианты.
Пользователь может выбрать сразу несколько вариантов из этого списка.
С помощью этого элемента пользователь может прикрепить к форме файл.
Для создания кликабельной кнопки можно использовать тег либо тег .
Отличие в возможности формировать название кнопки, сделанной тегом , с помощью HTML тегов.
Типы кнопок (определяются атрибутом type):
- button - простая кнопка. Действие, которое будет выполнено при нажатии кнопки, определяется через JavaScript;
- submit - кнопка отправки формы;
- reset - кнопка очистки полей формы.
Будьте параноиком: никогда не доверяйте вашим пользователям
Как вы боретесь с такими угрозами? Этот вопрос выходит далеко за рамки данной статьи, но есть несколько общих правил, которые следует всегда соблюдать. Самое важное из них - никогда не доверяйте вашим пользователям, в том числе себе; даже проверенный пользователь может быть атакован.
Все данные, поступающие на ваш сервер, необходимо проверять и санитизировать. Все и всегда. Без исключений.
- Избегайте потенциально опасных символов. Конкретные символы, с которыми следует соблюдать осторожность, зависят от контекста, в котором используются данные, а также от используемой платформы. Однако, все языки на стороне сервера имеют соответствующие функции для обеспечения такой защиты.
- Ограничьте входящий объем данных для поступления только реально необходимых данных.
- Помещайте загруженные файлы в песочницу (храните их на другом сервере и предоставляйте доступ к фалам только через отдельный поддомен или даже через совершенно другое доменное имя).
Соблюдая эти три правила, вы сможете избежать многих/большинства проблем. При этом следует помнить, что периодически необходимо проводить анализ защищённости, желательно квалифицированной сторонней организацией. Не считайте, что вы уже сталкивались со всеми возможными угрозами.
Примечание: В статье Безопасность веб-сайта нашего раздела серверного обучения приведено подробное обсуждение упомянутых угроз и возможных способов их устранения.
Our communities
Читайте также: