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

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

Разберёмся по шагам — от простой проверки в браузере до тестирования на реальной форме и понимания, почему браузеры иногда игнорируют ваши указания.

Почему это вообще важно

Поля ввода номера карты, срока действия и CVV — это чувствительные данные. Если браузер сохраняет их и предлагает при повторном визите, это создаёт две проблемы:

  • Безопасность. Любой, кто получит доступ к вашему компьютеру, увидит сохранённые номера карт.
  • Корректность разработки. Если вы разработчик и настраиваете платёжную форму, вам нужно гарантировать, что браузер не подставляет старые данные в поля — это влияет на пользовательский опыт и безопасность платежей.

Как устроен автокомплит в браузерах

Браузеры запоминают то, что вы вводите в поля форм, и при следующем визите предлагают варианты из сохранённых. Это не зависит от того, какое значение имеет атрибут autocomplete — браузеры могут игнорировать его для полей, которые они считают «важными» (например, адреса, имена, номера карт).

Атрибут autocomplete="off" — это рекомендация, а не строгий запрет. Современные браузеры часто его игнорируют, особенно если видят поля с типичными названиями вроде cardnumber, cc-number или exp-date.

Шаг 1. Проверьте настройки автокомплита в браузере

Первое, что стоит сделать — убедиться, что сам браузер не сохраняет данные форм.

В Google Chrome

  1. Откройте настройки: chrome://settings или через меню → Настройки.
  2. Перейдите в раздел «Автозаполнение и пароли».
  3. Найдите пункт «Способы оплаты» и «Адреса и прочее».
  4. Отключите опцию «Сохранять и предлагать способы оплаты» и «Сохранять и предлагать адреса».
  5. Проверьте список сохранённых карт и удалите ненужные.

В Mozilla Firefox

  1. Откройте настройки через меню → Настройки.
  2. Перейдите в раздел «Приватность и защита».
  3. В блоке «История» убедитесь, что выбрана нестандартная настройка — Firefox должен запоминать или не запоминать данные форм.
  4. Снимите галочку «Запоминать данные форм и поиска».
  5. Очистите сохранённые данные: «Информация о сайтах и куки» → «Управление данными» → удалите нужные сайты.

В Safari

  1. Откройте Safari → Настройки (или «Safari» → «Настройки» на macOS).
  2. Перейдите на вкладку «Автозаполнение».
  3. Снимите галочку «Кредитные карты».
  4. Нажмите «Изменить» рядом с этим пунктом и удалите сохранённые карты.

В Microsoft Edge

  1. Откройте настройки: edge://settings.
  2. Раздел «Профили» → «Платёжная информация» и «Адреса и прочее».
  3. Отключите сохранение для обоих пунктов.
  4. Удалите уже сохранённые записи.

Шаг 2. Проверьте, что конкретная форма не сохраняет данные

Настройки браузера — это половина дела. Нужно убедиться, что сама форма на сайте настроена правильно. Вот как это проверить.

Проверка атрибута autocomplete

  1. Откройте страницу с формой ввода карты.
  2. Нажмите F12, чтобы открыть инструменты разработчика.
  3. Найдите поле ввода номера карты в коде страницы (вкладка Elements).
  4. Посмотрите, есть ли у поля атрибут autocomplete и какое у него значение.

Правильные значения для полей карт:

  • autocomplete="off" — общий запрет автозаполнения.
  • autocomplete="cc-number" — указание браузеру, что это номер карты (помогает корректно заполнять, но не сохранять).
  • autocomplete="cc-exp" — для срока действия карты.
  • autocomplete="cc-csc" — для CVV-кода.

Для CVV обязательно должно стоять autocomplete="off" — этот код нельзя сохранять ни в каком случае.

Проверка через реальный ввод

  1. Откройте форму в режиме инкогнито (Ctrl+Shift+N в Chrome, Ctrl+Shift+P в Firefox).
  2. Введите тестовый номер карты (например, тестовый номер из документации платёжной системы: 4242 4242 4242 4242 для Visa).
  3. Отправьте форму (если это тестовый сайт) или просто закройте вкладку.
  4. Откройте ту же страницу заново — не в режиме инкогнито.
  5. Начните вводить номер карты. Если браузер предлагает сохранённый номер — автокомплит работает.

Шаг 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. Практические сценарии

Сценарий: вы пользователь и хотите убрать сохранённые карты

  1. Откройте настройки браузера (см. раздел выше для вашего браузера).
  2. Найдите раздел с сохранёнными способами оплаты.
  3. Удалите все сохранённые карты.
  4. Отключите автосохранение способов оплаты.
  5. Проверьте: откройте любой сайт с формой оплаты и начните вводить номер карты. Подсказок быть не должно.

Сценарий: вы разработчик и хотите гарантировать отключение автокомплита

  1. Добавьте autocomplete="off" ко всем полям ввода данных карты.
  2. Для поля CVV используйте autocomplete="cc-csc" или "new-password".
  3. Проверьте форму в Chrome, Firefox, Safari и Edge.
  4. Проверьте в обычном режиме и в режиме инкогнито.
  5. Удалите сохранённые данные перед каждым тестом — иначе результат будет некорректным.
  6. Если браузер всё равно предлагает автокомплит — измените имена полей на нестандартные.

Сценарий: вы тестировщик и проверяете требования безопасности

  1. Откройте DevTools (F12) и проверьте HTML-код всех полей карты.
  2. Убедитесь, что у полей карт стоит autocomplete="off" или специфичное значение (cc-number, cc-exp, cc-csc).
  3. Проверьте, что форма не отправляет данные на сервер до явного нажатия кнопки оплаты.
  4. Проверьте поведение при возврате на страницу через кнопку «Назад» браузера — данные не должны восстанавливаться в полях.
  5. Задокументируйте результаты для каждого браузера отдельно.

Что ещё стоит знать

Менеджеры паролей. Если вы используете менеджер паролей (1Password, Bitwarden, LastPass и т.п.), он может заполнять поля карт независимо от браузера. Проверьте настройки менеджера — отключите автозаполнение для полей карт, если оно не нужно.

Мобильные браузеры. На мобильных устройствах автокомплит работает иначе. Safari на iOS может предлагать карты, сохранённые в системе. Chrome на Android использует данные из Google-аккаунта. Проверяйте мобильные браузеры отдельно.

Сброс данных форм. В Chrome данные автокомплита хранятся отдельно от кеша. Очистка кеша и cookie не удаляет сохранённые данные форм. Нужно специально удалять их в настройках автозаполнения или через chrome://settings/addresses.

Итог

Проверить, что браузер не сохраняет автокомплит для полей карт, — это многошаговая задача. Нужно:

  • Отключить сохранение способов оплаты в настройках браузера.
  • Удалить уже сохранённые данные.
  • Проверить, что форма на сайте использует корректные значения атрибута autocomplete.
  • Протестировать в нескольких браузерах и в режиме инкогнито.
  • Не забыть про менеджеры паролей и мобильные браузеры.

Если вы разработчик — не полагайтесь только на autocomplete="off". Комбинируйте его с нестандартными именами полей и тестируйте в реальных условиях. Если вы пользователь — начните с настроек браузера, это самый быстрый способ убрать сохранённые карты из автокомплита.

Platejigid.ru