Вы вводите номер карты на сайте, и вдруг подсказка подсказывает вам чужой или старый номер. Или вы разрабатываете платёжную форму и хотите убедиться, что браузер не подставляет сохранённые данные в поля, где этого быть не должно. В обоих случаях вопрос один: как реально проверить, что автокомплит для полей карт отключён и не сохраняется.
Разберёмся по шагам — от простой проверки в браузере до тестирования на реальной форме и понимания, почему браузеры иногда игнорируют ваши указания.
- Почему это вообще важно
- Как устроен автокомплит в браузерах
- Шаг 1. Проверьте настройки автокомплита в браузере
- В Google Chrome
- В Mozilla Firefox
- В Safari
- В Microsoft Edge
- Шаг 2. Проверьте, что конкретная форма не сохраняет данные
- Проверка атрибута autocomplete
- Проверка через реальный ввод
- Шаг 3. Проверка в разных браузерах
- Шаг 4. Что делать разработчикам: правильная настройка формы
- Атрибут autocomplete со значением «new-password»
- Уникальные имена полей
- Поля в iframe
- Шаг 5. Частые ошибки при проверке
- Шаг 6. Практические сценарии
- Сценарий: вы пользователь и хотите убрать сохранённые карты
- Сценарий: вы разработчик и хотите гарантировать отключение автокомплита
- Сценарий: вы тестировщик и проверяете требования безопасности
- Что ещё стоит знать
- Итог
Почему это вообще важно
Поля ввода номера карты, срока действия и CVV — это чувствительные данные. Если браузер сохраняет их и предлагает при повторном визите, это создаёт две проблемы:
- Безопасность. Любой, кто получит доступ к вашему компьютеру, увидит сохранённые номера карт.
- Корректность разработки. Если вы разработчик и настраиваете платёжную форму, вам нужно гарантировать, что браузер не подставляет старые данные в поля — это влияет на пользовательский опыт и безопасность платежей.
Как устроен автокомплит в браузерах
Браузеры запоминают то, что вы вводите в поля форм, и при следующем визите предлагают варианты из сохранённых. Это не зависит от того, какое значение имеет атрибут autocomplete — браузеры могут игнорировать его для полей, которые они считают «важными» (например, адреса, имена, номера карт).
Атрибут autocomplete="off" — это рекомендация, а не строгий запрет. Современные браузеры часто его игнорируют, особенно если видят поля с типичными названиями вроде cardnumber, cc-number или exp-date.
Шаг 1. Проверьте настройки автокомплита в браузере
Первое, что стоит сделать — убедиться, что сам браузер не сохраняет данные форм.
В Google Chrome
- Откройте настройки:
chrome://settingsили через меню → Настройки. - Перейдите в раздел «Автозаполнение и пароли».
- Найдите пункт «Способы оплаты» и «Адреса и прочее».
- Отключите опцию «Сохранять и предлагать способы оплаты» и «Сохранять и предлагать адреса».
- Проверьте список сохранённых карт и удалите ненужные.
В Mozilla Firefox
- Откройте настройки через меню → Настройки.
- Перейдите в раздел «Приватность и защита».
- В блоке «История» убедитесь, что выбрана нестандартная настройка — Firefox должен запоминать или не запоминать данные форм.
- Снимите галочку «Запоминать данные форм и поиска».
- Очистите сохранённые данные: «Информация о сайтах и куки» → «Управление данными» → удалите нужные сайты.
В Safari
- Откройте Safari → Настройки (или «Safari» → «Настройки» на macOS).
- Перейдите на вкладку «Автозаполнение».
- Снимите галочку «Кредитные карты».
- Нажмите «Изменить» рядом с этим пунктом и удалите сохранённые карты.
В Microsoft Edge
- Откройте настройки:
edge://settings. - Раздел «Профили» → «Платёжная информация» и «Адреса и прочее».
- Отключите сохранение для обоих пунктов.
- Удалите уже сохранённые записи.
Шаг 2. Проверьте, что конкретная форма не сохраняет данные
Настройки браузера — это половина дела. Нужно убедиться, что сама форма на сайте настроена правильно. Вот как это проверить.
Проверка атрибута autocomplete
- Откройте страницу с формой ввода карты.
- Нажмите F12, чтобы открыть инструменты разработчика.
- Найдите поле ввода номера карты в коде страницы (вкладка Elements).
- Посмотрите, есть ли у поля атрибут
autocompleteи какое у него значение.
Правильные значения для полей карт:
autocomplete="off"— общий запрет автозаполнения.autocomplete="cc-number"— указание браузеру, что это номер карты (помогает корректно заполнять, но не сохранять).autocomplete="cc-exp"— для срока действия карты.autocomplete="cc-csc"— для CVV-кода.
Для CVV обязательно должно стоять autocomplete="off" — этот код нельзя сохранять ни в каком случае.
Проверка через реальный ввод
- Откройте форму в режиме инкогнито (Ctrl+Shift+N в Chrome, Ctrl+Shift+P в Firefox).
- Введите тестовый номер карты (например, тестовый номер из документации платёжной системы:
4242 4242 4242 4242для Visa). - Отправьте форму (если это тестовый сайт) или просто закройте вкладку.
- Откройте ту же страницу заново — не в режиме инкогнито.
- Начните вводить номер карты. Если браузер предлагает сохранённый номер — автокомплит работает.
Шаг 3. Проверка в разных браузерах
Поведение автокомплита различается от браузера к браузеру. Вот сравнение того, как они работают с полями карт:
| Браузер | Учитывает autocomplete=»off» для карт | Сохраняет номера карт по умолчанию | Как отключить полностью |
|---|---|---|---|
| Chrome | Частично игнорирует | Да | Настройки → Способы оплаты → отключить |
| Firefox | Частично игнорирует | Да | Настройки → Приватность → снять галочку с данных форм |
| Safari | В основном игнорирует | Да | Настройки → Автозаполнение → снять с «Кредитные карты» |
| Edge | Частично игнорирует | Да | Настройки → Профиль → Платёжная информация → отключить |
Ключевой вывод: ни один современный браузер не гарантирует 100% игнорирование autocomplete="off" для платёжных полей. Поэтому полагаться только на этот атрибут нельзя — нужно комбинировать подходы.
Шаг 4. Что делать разработчикам: правильная настройка формы
Если вы разрабатываете форму ввода данных карты, вот что реально работает для отключения автокомплита.
Атрибут autocomplete со значением «new-password»
Это один из самых надёжных способов для полей, которые браузер не должен запоминать. Браузеры уважают значение new-password для полей паролей и часто применяют его логику к другим чувствительным полям:
<input type="text" name="cvv" autocomplete="new-password"> Для номера карты можно использовать:
<input type="text" name="cardnumber" autocomplete="cc-number"> Но учтите: cc-number как раз разрешает автозаполнение — браузер будет предлагать сохранённые карты. Если нужно запретить — используйте off или new-password.
Уникальные имена полей
Браузеры определяют тип поля по его name и id. Если поле называется cardnumber, cc-number, creditcard — браузер с большой вероятностью предложит автокомплит. Хитрость в том, чтобы использовать нестандартные имена:
<input type="text" name="field_1" autocomplete="off"> Это не красивое решение, но оно работает. Правда, для полей CVV всё же лучше использовать autocomplete="cc-csc" или "off" — браузеры понимают эти значения корректно.
Поля в iframe
Некоторые платёжные системы встраивают поля карты через iframe. В этом случае настройки autocomplete на родительской странице не влияют на содержимое iframe. Проверять нужно отдельно — открыть URL iframe напрямую и проверить его код.
Шаг 5. Частые ошибки при проверке
Ошибка 1. Проверять только в одном браузере. Поведение Chrome и Firefox различается — если вы тестируете только в Chrome, вы можете пропустить проблему в другом браузере.
Ошибка 2. Проверять только обычный режим, но не инкогнито. В режиме инкогнито браузер не использует сохранённые данные — вы можете ложно решить, что всё работает.
Ошибка 3. Полагаться только на
autocomplete="off". Как мы уже разобрали, браузеры его часто игнорируют для платёжных полей.Ошибка 4. Не очищать сохранённые данные перед проверкой. Если в браузере уже есть сохранённые номера карт, он будет их предлагать независимо от настроек формы.
Ошибка 5. Проверять только поле номера карты, но забывать про срок действия и CVV. Все три поля нужно проверять отдельно.
Шаг 6. Практические сценарии
Сценарий: вы пользователь и хотите убрать сохранённые карты
- Откройте настройки браузера (см. раздел выше для вашего браузера).
- Найдите раздел с сохранёнными способами оплаты.
- Удалите все сохранённые карты.
- Отключите автосохранение способов оплаты.
- Проверьте: откройте любой сайт с формой оплаты и начните вводить номер карты. Подсказок быть не должно.
Сценарий: вы разработчик и хотите гарантировать отключение автокомплита
- Добавьте
autocomplete="off"ко всем полям ввода данных карты. - Для поля CVV используйте
autocomplete="cc-csc"или"new-password". - Проверьте форму в Chrome, Firefox, Safari и Edge.
- Проверьте в обычном режиме и в режиме инкогнито.
- Удалите сохранённые данные перед каждым тестом — иначе результат будет некорректным.
- Если браузер всё равно предлагает автокомплит — измените имена полей на нестандартные.
Сценарий: вы тестировщик и проверяете требования безопасности
- Откройте DevTools (F12) и проверьте HTML-код всех полей карты.
- Убедитесь, что у полей карт стоит
autocomplete="off"или специфичное значение (cc-number,cc-exp,cc-csc). - Проверьте, что форма не отправляет данные на сервер до явного нажатия кнопки оплаты.
- Проверьте поведение при возврате на страницу через кнопку «Назад» браузера — данные не должны восстанавливаться в полях.
- Задокументируйте результаты для каждого браузера отдельно.
Что ещё стоит знать
Менеджеры паролей. Если вы используете менеджер паролей (1Password, Bitwarden, LastPass и т.п.), он может заполнять поля карт независимо от браузера. Проверьте настройки менеджера — отключите автозаполнение для полей карт, если оно не нужно.
Мобильные браузеры. На мобильных устройствах автокомплит работает иначе. Safari на iOS может предлагать карты, сохранённые в системе. Chrome на Android использует данные из Google-аккаунта. Проверяйте мобильные браузеры отдельно.
Сброс данных форм. В Chrome данные автокомплита хранятся отдельно от кеша. Очистка кеша и cookie не удаляет сохранённые данные форм. Нужно специально удалять их в настройках автозаполнения или через chrome://settings/addresses.
Итог
Проверить, что браузер не сохраняет автокомплит для полей карт, — это многошаговая задача. Нужно:
- Отключить сохранение способов оплаты в настройках браузера.
- Удалить уже сохранённые данные.
- Проверить, что форма на сайте использует корректные значения атрибута
autocomplete. - Протестировать в нескольких браузерах и в режиме инкогнито.
- Не забыть про менеджеры паролей и мобильные браузеры.
Если вы разработчик — не полагайтесь только на autocomplete="off". Комбинируйте его с нестандартными именами полей и тестируйте в реальных условиях. Если вы пользователь — начните с настроек браузера, это самый быстрый способ убрать сохранённые карты из автокомплита.
