Ввод скрытой информации
< input > элементы типа hidden позволяют веб-разработчикам включать данные, которые не могут быть просмотрены или изменены пользователями при отправке формы. Например, идентификатор контента, который в данный момент заказывается или редактируется, или уникальный токен безопасности. Скрытые входные данные полностью невидимы на отображаемой странице, и нет никакого способа сделать их видимыми в содержимом страницы.
Примечание. События input и change не применяются к этому типу ввода. Скрытые входы не могут быть сфокусированы даже с помощью JavaScript (например, hiddenInput.focus()).
<input type="hidden" id="postId" name="postId" value="34657">Использование скрытых входов
Как упоминалось выше, скрытые входные данные можно использовать везде, где вы хотите включить данные, которые пользователь не может видеть или редактировать вместе с формой, когда она отправляется на сервер. Давайте рассмотрим несколько примеров, иллюстрирующих его использование.
Отслеживание отредактированного контента
Одним из наиболее распространенных применений скрытых входных данных является
отслеживание того, какую запись базы данных необходимо обновить при отправке формы редактирования.
Типичный рабочий процесс выглядит так:
1. Пользователь решает отредактировать некоторый контент, которым он управляет, например, запись в блоге или запись о продукте.
Они запускаются нажатием кнопки редактирования.
2. Редактируемый контент берется из базы данных и загружается в HTML-форму, чтобы пользователь мог вносить изменения.
3. После редактирования пользователь отправляет форму, и обновленные данные отправляются обратно на сервер для обновления в базе данных.
Идея здесь заключается в том, что на шаге 2 идентификатор обновляемой записи хранится в скрытом вводе. Когда форма отправляется на шаге 3, идентификатор автоматически отправляется обратно на сервер вместе с содержимым записи. Идентификатор позволяет серверному компоненту сайта точно знать, какую запись необходимо обновить с помощью представленных данных.
<form>
<div>
<label for="title">Post title:</label>
<input type="text" id="title" name="title" value="My excellent blog post">
</div>
<div>
<label for="content">Post content:</label>
<textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
</textarea>
</div>
<div>
<button type="submit">Update post</button>
</div>
<input type="hidden" id="postId" name="postId" value="34657">
</form>
Сервер установит значение скрытого ввода с идентификатором " postID" в идентификатор сообщения в своей базе данных перед отправкой формы в браузер пользователя и будет использовать эту информацию, когда форма будет возвращена, чтобы узнать, какую запись базы данных следует обновить. модифицированная информация. Для обработки этого не требуется никаких сценариев в содержимом.
Повышение безопасности веб-сайта
Скрытые входные данные также используются для хранения и отправки токенов безопасности или секретов в целях повышения безопасности веб-сайта. Основная идея заключается в том, что, если пользователь заполняет конфиденциальную форму, например, форму на своем банковском веб-сайте, для перевода денег на другой счет, секрет, который ему будет предоставлен, докажет, что он является тем, за кого себя выдает, и что они используют правильную форму для отправки запроса на перевод.
Это помешает злоумышленнику создать фальшивую форму, притвориться банком и отправить форму по электронной почте ничего не подозревающим пользователям, чтобы обманным путем заставить их перевести деньги не в то место. Этот тип атаки называется подделкой межсайтовых запросов (CSRF) ; практически любой авторитетный серверный фреймворк использует скрытые секреты для предотвращения таких атак.
Примечание. Размещение секрета в скрытом вводе не делает его безопасным по своей сути. Состав и кодировка ключа сделают это. Ценность скрытого ввода заключается в том, что он хранит секрет, связанный с данными, и автоматически включает его при отправке формы на сервер. Вам нужно использовать хорошо продуманные секреты, чтобы действительно защитить свой сайт.