Состояние фильтров удобно хранить в параметрах URL, если пользователь должен открывать ссылку с теми же результатами, делиться ею или возвращаться к ней кнопкой браузера. Определите, какие значения безопасно и полезно передавать, задайте однозначный формат, проверяйте входные данные и синхронизируйте адрес с интерфейсом без лишних записей в истории.
Опорные решения для URL-фильтров
- Передавайте в адресе только фильтры, которые должны восстанавливаться при открытии ссылки.
- Выберите стабильные имена параметров и единый формат значений.
- Проверяйте и нормализуйте параметры до применения к каталогу или запросу к серверу.
- Используйте добавление записи в историю для значимых действий, а обновление текущей записи - для частых промежуточных изменений.
- Не помещайте в URL пароли, персональные данные и другие чувствительные значения.
Определите, какие фильтры стоит отражать в адресе
Этот подход подходит, когда посетителю важно сохранить подборку, поделиться результатами или восстановить фильтры после обновления страницы. Например, фильтры каталога интернет-магазина обычно стоит включать в URL, если они заметно меняют выдачу.
Не передавайте в адресе временные значения интерфейса, не влияющие на результат, и данные, которые не должны быть видны в ссылке, истории браузера или журналах сервера. Если фильтр содержит чувствительную информацию, храните его состояние на сервере и связывайте с URL безопасным идентификатором либо не делайте ссылку переносимой.
Спроектируйте схему параметров без неоднозначностей
Перед разработкой составьте список фильтров и определите для каждого тип, допустимые значения и поведение при отсутствии параметра. Параметры фильтров в URL должны читаться однозначно: например, ?brand=acme&color=blue&in_stock=true.
- Модель состояния: список полей, их типы, значения по умолчанию и ограничения.
- Правила формата: имена параметров, способ передачи нескольких значений и формат диапазонов.
- Контракт с сервером: согласованные правила разбора URL и применения фильтров на клиенте или сервере.
- Инструменты: средства проекта для чтения и изменения query-параметров, а также тесты для разбора ссылок.
- Доступы: возможность менять интерфейс фильтров, маршрутизацию и обработчик выдачи.
Для списка значений выберите один формат и используйте его последовательно: повторяющиеся ключи, например ?color=blue&color=green, или согласованное строковое представление. Не смешивайте способы кодирования одного и того же фильтра.
Кодируйте состояние и проверяйте входные значения
Перед реализацией учтите риски и ограничения:
- URL может попасть в историю браузера, журналы сервера и сообщения, которыми делятся пользователи. Не включайте туда секреты и личные данные.
- Параметры URL являются внешним вводом: не доверяйте им и проверяйте тип, диапазон и принадлежность допустимым значениям.
- Не считайте клиентскую проверку достаточной: сервер тоже должен проверять параметры, если фильтрация выполняется на сервере.
- Не добавляйте запись в историю на каждое промежуточное изменение поля: это затрудняет возврат к предыдущему состоянию.
-
Опишите модель фильтров.
Зафиксируйте тип каждого поля, допустимые значения и значение по умолчанию. Например, для цены задайте числовые границы, а для категории - список разрешённых идентификаторов. -
Разберите URL и нормализуйте значения.
Прочитайте query-параметры средствами маршрутизатора или стандартного API браузера. Приведите значения к нужному типу, удалите дубликаты, а неизвестные или некорректные значения отклоните либо замените безопасным значением по правилам проекта. -
Сформируйте запрос по проверенному состоянию.
Используйте только нормализованные фильтры, а не необработанную строку URL. При серверной фильтрации передавайте проверенные значения обработчику и не подставляйте пользовательский ввод напрямую в запрос к базе данных. -
Обновляйте параметры без потери остальных.
При изменении одного фильтра меняйте соответствующие параметры, сохраняя сортировку и другие параметры страницы, если они должны оставаться активными. Удаляйте ключ, когда фильтр сброшен до значения по умолчанию и его наличие не требуется. -
Применяйте состояние к интерфейсу.
При открытии ссылки заполните поля фильтров из разобранного состояния и покажите соответствующую выдачу. При изменении интерфейса обновите URL по заранее выбранному правилу истории браузера.
Синхронизируйте URL с интерфейсом и историей браузера
Выберите поведение истории под сценарий. Если пользователь применяет готовый набор фильтров, добавление записи позволяет вернуться к предыдущему набору кнопкой "Назад". Если адрес меняется при каждом нажатии клавиши в поле цены, обновление текущей записи обычно избавляет от длинной цепочки промежуточных состояний. Для поиска с частыми вводами можно обновлять адрес после короткой паузы или после подтверждения.
- Открытие ссылки восстанавливает значения полей и выдачу.
- Изменение фильтра обновляет URL в согласованном формате.
- Обновление страницы не сбрасывает выбранные фильтры.
- Кнопки "Назад" и "Вперёд" меняют состояние интерфейса вслед за URL.
- Сброс фильтров удаляет соответствующие параметры, не затрагивая несвязанные настройки страницы.
- Параметры сортировки и пагинации сохраняются или сбрасываются по заранее определённым правилам.
- Повторное применение тех же фильтров не создаёт лишних записей истории.
Такая синхронизация фильтров с URL должна работать и при прямом переходе по ссылке, а не только после действий внутри страницы.
Обработайте сброс, значения по умолчанию и устаревшие ссылки
- Оставлять пустые параметры: удаляйте ключи без значения, если пустая строка не имеет отдельного смысла.
- Путать отсутствие и значение по умолчанию: определите, равнозначны ли они, и применяйте правило одинаково при чтении и записи URL.
- Сбрасывать несвязанные параметры: при изменении фильтра обновляйте только нужные ключи, кроме случаев, когда зависимая пагинация должна сбрасываться.
- Не ограничивать числовые значения: проверяйте границы и порядок значений в диапазоне; некорректный диапазон нормализуйте или отклоняйте.
- Принимать неизвестные значения без проверки: сопоставляйте значения со списком допустимых и безопасно обрабатывайте неизвестные категории или сортировки.
- Игнорировать старый формат ссылок: при изменении схемы поддержите преобразование прежних параметров либо покажите корректное состояние без ошибки.
- Передавать личные данные в адресе: не используйте URL для секретов и сведений, раскрытие которых нежелательно.
Проверьте фильтрацию на некорректных и граничных параметрах
При разработке фильтров для сайта выберите обработку ошибок по назначению страницы и ожиданиям пользователей:
- Безопасное значение по умолчанию. Подходит для необязательных фильтров: недопустимый параметр игнорируется, а страница показывает обычную выдачу.
- Нормализация. Уместна, когда ошибку можно исправить предсказуемо, например ограничить числовое значение допустимым диапазоном. Показывайте пользователю итоговое состояние.
- Явное сообщение об ошибке. Используйте, если неверный ввод мешает понять результат или исправить фильтр. Не выводите необработанный ввод как HTML.
- Перенаправление на канонический URL. Подходит, когда проекту важно иметь единый адрес для эквивалентных состояний; сохраняйте только проверенные параметры.
Проверьте пустую строку, повторяющиеся ключи, неизвестное значение, слишком большое число и обратный диапазон. Убедитесь, что такие URL не ломают страницу и не обходят серверную проверку.
Нюансы обмена состоянием фильтров через URL
Какие фильтры лучше не хранить в адресе?
Не помещайте в URL пароли, токены и личные сведения. Временное состояние интерфейса также можно не передавать, если его не нужно восстанавливать по ссылке.
Что делать с неизвестным параметром?
Задайте единое правило: игнорировать его, нормализовать или показать сообщение. Не применяйте неизвестное значение без проверки.
Как передавать несколько значений одного фильтра?
Выберите один формат - например, повторяющийся ключ или согласованный список - и одинаково обрабатывайте его на клиенте и сервере.
Когда добавлять новую запись в историю браузера?
Добавляйте запись после значимого применения фильтров, если пользователь должен вернуться к предыдущему состоянию. Для частых промежуточных изменений обновляйте текущую запись или отложите запись до подтверждения.
Нужно ли проверять URL на сервере?
Да, если сервер использует параметры для формирования выдачи или запроса к данным. Клиентская проверка улучшает интерфейс, но не заменяет серверную валидацию.
Как поступить с устаревшими ссылками?
Если прежний формат можно преобразовать однозначно, преобразуйте его в актуальное состояние. В остальных случаях безопасно игнорируйте неподдерживаемые значения или сообщите, что фильтр больше недоступен.