wplearn.ru wordpress WP Learn

Как отключить автозаполнение форм в WordPress для улучшения безопасности

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

Что такое автозаполнение форм и почему его могут отключать

Автозаполнение — это функция браузера, которая позволяет пользователю быстро заполнять формы, используя сохранённые данные, например, имена, адреса, пароли. Для большинства сайтов этот функционал полезен, но в некоторых случаях автозаполнение может вызвать проблемы:

  • Пользователь может случайно отправить на сервер устаревшие или неправильные данные.
  • На общих компьютерах автозаполнение может раскрыть личную информацию.
  • Некоторые формы, например, формы оплаты или авторизации, требуют повышенной безопасности.

В таких сценариях лучше отключить автозаполнение на определённых формах или полях.

Как отключить автозаполнение в WordPress — базовый способ

Самый простой способ — добавить в тег <form> атрибут autocomplete="off". Это скажет браузеру не предлагать автозаполнение для данной формы.

Если вы создаёте форму вручную в шаблоне или через shortcode, добавьте атрибут так:

<form method="post" action="" autocomplete="off">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" value="Войти" />
</form>

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

Отключение автозаполнения для форм WordPress через хук wpforms_frontend_form_atts

Если вы используете плагин WPForms, можно добавить следующий код в файл functions.php темы или в плагин-«муфту»:

function wplearn_disable_autocomplete_wpforms( $atts, $form_data ) {
    $atts['autocomplete'] = 'off';
    return $atts;
}
add_filter( 'wpforms_frontend_form_atts', 'wplearn_disable_autocomplete_wpforms', 10, 2 );

Этот код добавит атрибут autocomplete="off" всем формам, созданным через WPForms.

Отключение автозаполнения для отдельных полей с помощью JavaScript

Если по каким-то причинам атрибут autocomplete="off" не срабатывает (некоторые браузеры игнорируют его для полей пароля), можно дополнительно использовать JavaScript для управления поведением полей.

Пример кода, который отключает автозаполнение для всех полей формы с классом no-autocomplete:

document.addEventListener('DOMContentLoaded', function() {
    const forms = document.querySelectorAll('form.no-autocomplete');
    forms.forEach(function(form) {
        form.setAttribute('autocomplete', 'off');
        const inputs = form.querySelectorAll('input');
        inputs.forEach(function(input) {
            input.setAttribute('autocomplete', 'off');
            input.setAttribute('autocorrect', 'off');
            input.setAttribute('autocapitalize', 'off');
            input.setAttribute('spellcheck', 'false');
        });
    });
});

Добавьте класс no-autocomplete к нужным формам в разметке, и скрипт отключит автозаполнение и подсказки браузера.

Отключение автозаполнения в формах WooCommerce

WooCommerce генерирует много форм: регистрации, оформления заказа, оплаты. Для повышения безопасности можно отключить автозаполнение на некоторых из них.

Добавьте следующий код в functions.php темы, чтобы отключить автозаполнение на форме оформления заказа:

function wplearn_disable_autocomplete_checkout_form( $fields ) {
    foreach ( $fields as $fieldset_key => $fieldset ) {
        foreach ( $fieldset as $key => $field ) {
            $fields[$fieldset_key][$key]['autocomplete'] = 'off';
        }
    }
    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wplearn_disable_autocomplete_checkout_form' );

Этот код добавляет атрибут autocomplete="off" ко всем полям на странице оформления заказа WooCommerce.

Использование плагина Clearfy Pro для управления автозаполнением

Если вы используете плагин Clearfy Pro, в нём есть удобные настройки для безопасности и оптимизации, в том числе отключение автозаполнения на формах.

Это избавит вас от необходимости править код вручную и обеспечит комплексное управление функциями безопасности.

Подводим итоги: рекомендации по безопасности и UX

Отключение автозаполнения форм — это баланс между удобством пользователя и безопасностью. Рекомендуется:

  • Отключать автозаполнение только для чувствительных форм (вход, регистрация, платежи).
  • Использовать атрибут autocomplete="off" на уровне формы и полей.
  • Для надёжности — добавлять JavaScript, особенно для браузеров, которые игнорируют атрибут.
  • Проверять влияние на пользовательский опыт, чтобы не ухудшить удобство.

Используйте приведённые в статье техники и примеры, чтобы быстро и безопасно управлять автозаполнением на вашем WordPress-сайте.

×
День SEO
Время сделать подарок своему WordPress!
-20% на премиум

шаблоны и плагины

Порадуй свой сайт ⋙