В корзине нет товаров.
Как скрыть значок reCAPTCHA v3, не сломав его
Значок reCAPTCHA можно скрыть. Google это разрешает. Но есть нюанс, который большинство руководств пропускает: его нужно заменить видимым текстом-атрибуцией, иначе вы нарушите Условия использования reCAPTCHA. В этом руководстве разобраны рабочий CSS, точная формулировка, которую требует Google, и как после этого убедиться, что v3 по-прежнему оценивает ваш трафик.
Почему бейдж вообще появляется
У reCAPTCHA v3 нет ни флажка, ни головоломки с картинками. Она незаметно оценивает посетителей в фоне. Плавающий значок в правом нижнем углу — единственный признак того, что он работает на вашем сайте, и в этом весь смысл. Через этот значок Google сообщает вашим пользователям о сборе данных.
Изучите его — и вы найдёте обёртку с встроенными стилями вроде этих:
<div class="grecaptcha-badge" data-style="bottomright" style=" width: 256px; height: 60px; position: fixed; visibility: visible; right: -186px; /* collapsed, only the 70px logo sticks out */ bottom: 14px; box-shadow: gray 0px 0px 5px; transition: right 0.3s ease 0s; "></div>
Тот right: -186px сбивает людей с толку больше всего остального в значке, и это не баг. Значок имеет ширину 256px, и Google прячет 186px из них за пределами экрана, так что видна только плитка с логотипом. Наведите на него курсор, и переход выдвинет его обратно right: 0 чтобы открыть полную панель.
Важная деталь в том, что это встроенный стилями. Обычный right: -256px правило в вашей таблице стилей проигрывает в борьбе за специфичность, и именно поэтому так много попыток незаметно сдвинуть значок ни к чему не приводят.
Что на самом деле говорят условия Google
FAQ по reCAPTCHA от Google разрешает скрывать значок при одном условии:
Вам разрешено скрывать значок при условии, что вы включите брендинг reCAPTCHA на видном месте в пользовательском процессе.
На практике: если значок скрыт, упоминание об использовании reCAPTCHA должно быть видно на каждой странице или в каждой форме, где работает reCAPTCHA. Не спрятано в политике конфиденциальности. Не внутри свёрнутого аккордеона в футере. Видимое, в потоке, там, где действительно находится пользователь.
Сайты, которые скрывают значок без указания авторства, рискуют тем, что их site key будет отключён. Это реальный механизм принуждения, а не теоретический, поэтому он стоит тридцати секунд вашего времени.
Шаг 1: скройте значок с помощью CSS
Использовать visibility: hidden, а не display: none. Установка display: none полностью убирает элемент из дерева компоновки, и из-за этого скрипт reCAPTCHA вёл себя некорректно в определённых сочетаниях браузера и загрузки скрипта. Свойство visibility сохраняет блок измеримым, но при этом делает его невидимым.
/* Hide the reCAPTCHA v3 badge.
Google's inline styles set visibility: visible, so !important
is genuinely required here. */
.grecaptcha-badge {
visibility: hidden !important;
}Если вы хотите убрать его только на определённых страницах, ограничьте его область вместо глобального применения:
/* Only hide the badge on checkout and contact. */
body.page-checkout .grecaptcha-badge,
body.page-contact .grecaptcha-badge {
visibility: hidden !important;
}Шаг 2: добавьте атрибуцию
Вставьте это прямо под кнопкой отправки на каждой форме, где используется reCAPTCHA. Обе ссылки обязательны. Обычный текст без них не удовлетворяет условию.
<p class="recaptcha-terms"> This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply. </p>
Мелкий шрифт допустим, но он должен оставаться читаемым. Требование в том, чтобы упоминание было видимым, и серый текст 8px на сером фоне не выдержит проверки, если кто-то присмотрится:
.recaptcha-terms {
font-size: 0.8rem;
line-height: 1.4;
color: #6b7280;
margin-top: 0.75rem;
}Шаг 3: убедитесь, что v3 по-прежнему работает
Скрытие значка не должно влиять на генерацию токена, но лучше это подтвердить, а не надеяться. Откройте консоль на своей странице и запросите токен вручную:
// Paste into the browser console on your own page.
// A healthy v3 setup returns a long token starting with "03A".
grecaptcha.ready(function () {
grecaptcha
.execute("YOUR_SITEKEY", { action: "verify" })
.then(function (token) {
console.log("token length:", token.length);
console.log(token.slice(0, 24) + "...");
});
});Получаете токен обратно — значит, ваш CSS ничего не сломал. Если возникает ошибка grecaptcha is not defined, скрипт reCAPTCHA изначально вообще не загрузился, и значок здесь ни при чём. Вы можете сравнить с заведомо рабочей настройкой на нашей живая демо-страница reCAPTCHA v3.
Есть одна оговорка, о которой стоит знать: токен доказывает, что скрипт отработал, а не то, что ваша оценка в порядке. Скрытие значка никак не влияет на оценку, а вот многое другое влияет. Низкие оценки — это отдельная проблема с отдельным решением.
Чего не следует делать
| Подход | Почему это не работает |
|---|---|
display: none | Удаляет элемент из разметки. Вызывало нестабильное поведение при разных сочетаниях браузера и загрузки скриптов. |
opacity: 0 без указания авторства | Это всё равно нарушение условий. Invisible остаётся невидимой, с какого бы ресурса вы сюда ни попали. |
| Удаление узла с помощью JavaScript | Скрипт может внедрить его заново, и вы зря создали состояние гонки. |
| Упоминание только в политике конфиденциальности | Google запрашивает это явно в пользовательском сценарии, а не прячет на отдельной странице. |
z-index: -1 | Непредсказуемо задвигает значок за другие элементы. На страницах без фона он всё равно может отображаться. |
Часто задаваемые вопросы
Снижает ли скрытие значка мою оценку reCAPTCHA v3?
Нет. Оценка формируется из поведения пользователя и сигналов браузера, а не из того, виден ли значок на экране. Его скрытие никак не меняет то, как оценивается запрос.
Можно ли переместить бейдж вместо того, чтобы скрывать его?
Да, и это более безопасный вариант, если вас не устраивает только расположение. Установите data-badge="bottomleft" или data-badge="inline" на вашем элементе reCAPTCHA. С inline вы сами располагаете контейнер, и, поскольку значок остаётся видимым, текст атрибуции вам не нужен.
Применимо ли это к reCAPTCHA v2?
Только к invisible v2. Виджет-чекбокс v2 сам является уведомлением, поэтому отдельного значка, с которым нужно разбираться, нет. Invisible v2 показывает тот же плавающий значок, что и v3, и подчиняется тем же правилам. Наше руководство по что такое reCAPTCHA и как она работает охватывает различия между версиями.
Действительно ли Google будет это применять?
Site key могут быть отключены за нарушение условий. Для сайтов с низким трафиком это редкость, но добавление сниппета атрибуции занимает полминуты, поэтому нет реальной причины идти на риск.
Сводка
Скройте значок с помощью visibility: hidden !important, добавьте абзац с указанием авторства и обеими ссылками Google под кнопкой отправки, затем убедитесь в консоли, что генерация токена по-прежнему работает. Это весь путь к соответствию требованиям, и он занимает около пяти минут.
Если вы работаете с reCAPTCHA v3 в коде, а не просто оформляете её, CapSkip — это локальный сервис распознавания капчи который работает на вашей собственной машине и возвращает токены через API, который вы уже используете. Наш решение для reCAPTCHA v3 странице есть детали интеграции.