Установака recaptcha v2 на сайт
Пример подключения ReCaptcha на сайт, регистрация в API, вставка кода в форму, проверка правильности введенной капчи.
Регистрация сайта в сервисе ReCaptcha
Итак, сначала нужно добавить сайт в ReCaptcha API перейдя по ссылке https://www.google.com/recaptcha/admin/create (нужна авторизация), в форме нужно указать название и домен сайта где будет использоваться капча.
После отправки формы появится страница с данными для интеграции.
Вывод на сайте
Одна капча на странице
Чтобы вывести капчу в форме, нужно подключить api.js и добавить <div> c классом g-recaptcha и атрибутом data-sitekey с открытым ключом.
Пример:
Несколько recaptcha на странице
В таком случаи, в формах вставляется <div > и <div > и более, далее к ним подключается recaptcha JS-скриптом.
Пример:
Проверка заполнения капчи в PHP
После отправки формы, на стороне сервера, введённый ответ капчи (будет в $_POST['g-recaptcha-response'] ) нужно отправить на https://www.google.com/recaptcha/api/siteverify вместе с секретным ключом и получить положительный или отрицательный ответ. Данное действие можно реализовать двумя способами:
Вариант на curl (через POST)
Вариант на file_get_contents
Проверка reCAPTCHA в JS/jQuery
Чтобы проверить правильность заполнения капчи перед отправкой формы, можно применить следующий код:
Защита сайта от спама обратной связи
В предыдущей статье я рассказывал как защищать устаревшую джумлу и админку от перебора паролей. Но при этом многие задаются вопросом: «Почему мне приходит спам с моего сайта через установленную на моем сайте форму обратной связи?».
Убрать спам с контактной формы сайта
На этот раз я расскажу о вариантах защиты всяческих контактных форм и полей конструкторов, калькуляторов — вообщем того, что отправляет письмо администратору сайта. Мало того, что порой неинтересно читать спам или рекламу, которую прислали вместо потенциального клиента, уязвимость форм обратной связи грозит ещё баном от хостинга почтовой службы. И ваши клиенты в этот день уже не смогут отправить вам заявку.
Поэтому стоит заранее подумать о защите, а не когда заспамят по самое не хочу. Хотя в большинстве случаев владельцы сайтов думают, что сайт никому не интересен и не догадываются, что на них могут выйти боты. Другая половина считает, что лишние поля отпугивают потенциальных посетителей, а в некоторых случаях и слишком сложны для заполнения. В любом случае давайте разбирать подробнее.
Установка капчи на сайт как защита от спама
Чтобы предотвратить массовую отправку данных, следует своевременно позаботиться о защите подписных форм. Конечно, самым действенным вариантом будет установка капчи (captcha) — рисунка, текст или цифры с которого надо будет ввести в отдельное поле для подтверждения, что вы не робот. На данный момент существует огромный выбор разновидностей капчи:
— можно взять из примеров и написать или модифицировать стандартные капчи. При этом мы можем задать какие символы будут использоваться, и насколько буквы и цифры будут подвергаться всяким изменениям для ухудшения автоматического распознавания. Плюсом будет простота в распознавании людьми, такую капчу обычно ставят на сайтах с небольшой посещаемостью и где нет смысла её усложнять, то есть где атаки ботов минимальны. Минусом данного метода является то, что данный тип капчи очень быстро и легко взламывается, поэтому при большей активности спамеров следует поставить решение посложнее.
— готовые решения от Google, Yandex и других сторонних сервисов. Это не только цифро-буквенные капчи, среди них есть много интересных вариантов, таких как собрать картинку-паззл, выбрать подходящие изображения и т.п.
Recaptcha как универсальная альтернатива всем капчам
С выходом второй версии рекапчи от гугла она кардинально изменилась: сложным, длинным и неразборчивым фразам на смену пришёл поведенческий анализ. Теперь при первых попытках не надо вводить проверочных фраз — достаточно поставить галку подтверждения и проверка пройдена. При подозрительной активности Вам предложат сделать несложные действия, к примеру выбрать изображения с природой или витринами.
Удобство нового метода смогли оценить многие пользователи, поэтому многими разработчиками API рекапчи интегрировано в программный код, необходимо только получить уникальные ключи на домен.
Recaptcha 2 в Joomla
В популярной CMS джумла рекапча реализована системным плагином, поэтому стоит выбрать её в настройках, активировать плагин и ввести полученные ключи. После этого как системные компоненты могут обращаться к гуглокапче (к примеру, регистрация пользователей или стандартная контактная форма), так и различные сторонние модули и расширения (Virtuemart, сторонние контактные формы, Jcomments и другие).
Немного по другому ситуация обстоит в более старых версиях (Joomla 1.5 и 2.5). Максимум там можно найти первую капчу от гугла, но она настолько отпугивает своей сложностью, что стоит подумать или о дописывании своего варианта или решиться на миграцию на последнюю версию.
WordPress и рекапча от гугла
У вордпресса дела обстоят иначе: по умолчанию там в борьбе со спамом предлагается Akismet, который порой очень часто пропускает спам и работает не самым лучшим образом. Recaptcha существует отдельми плагинами, которые могут добавлять защитное поле в комментарии, форму авторизации или регистрации, а также в совместимости с контактной формой.
Быстрый взляд на популярные варианты к сожалению не нашел подходящего решения, удовлетворяющего всем параметрам. У всех решений были свои косяки: обнуление полей комментариев при неверном вводе капчи, необходимость проходить проверку для входа в админку, поле рекапчи находилось ниже кнопки отправить — не всегда заметно с первого раза.
Поэтому на мой взгляд вп требует допила.
Невидимая Recaptcha
Google анонсировала бета-тестирование нового типа рекапчи — Invisible reCAPTCHA. Как Вы знаете, усовершенствованная версия позволяла отличать ботов от настоящих людей на ранней стадии и предлагала реальным людям нажать простую кнопку. В то же время некоторые раскритиковали необходимость данного действия. Поэтому сейчас есть возможность опробовать новую вариацию — теперь и эту кнопку жать не надо, а рекапча будет сама анализировать момент появления на сайте. С одной стороны это облегчит жизнь пользователям, с другой стороны возможны проколы с пропуском ботов, однако это уже время покажет.
Для того, чтобы поставить новую невидимую рекапчу на сайт, необходимо получить отдельные ключи. Также необходимо реализовать функция обратного вызова (callback) для проверки легитимности. Более подробную информацию можно найти в API, и когда с ним разберусь, постараюсь выложить пример реализации на сайте.
Так как информации получилось много, то я вынес в отдельную статью — Используем невидимую рекапчу на сайте.
Рекапча на произвольном сайте
На самом деле нету ничего сложного в реализации recaptcha в любом модуле или самописной форме обратной связи. На сайте расписано подробное API как реализовать необходимую проверку. С размещением кода на фронтэнде обычно не возникает проблем, однако не все могут корректно отослать запрос проверки секретного ключа.
Поэтому я рассмотрю простой вариант back-end отправки json на php
<?php $recaptcha_secret = «XXXXXXXXXXXXXXXXXXXXXXX»; // Ваш секретный ключ
$response = file_get_contents(«https://www.google.com/recaptcha/api/siteverify?secret=».$recaptcha_secret.»&response=».$_POST[‘g-recaptcha-response’].»&remoteip success»] === true)
<
// Здесь должно происходить действие при корректном прохождении проверки
>
else
<
// Иначе выдаем какую-то ошибку
>
?>
Если понадобятся дополнительные действия с апи, то советую изучить документацию.
Защищаем форму обратной связи без капчи
Капча поможет решить нам проблему со спамом, однако многих она раздражает, и многие стараются обходиться без неё. Кроме этого, существуют различные сервисы как антигейт по обходу капчи (там люди за деньги заполняют данные с капчи). Поэтому не лишним будет рассмотреть альтернативные варианты. Для популярных CMS существуют готовые решения, в других случаях придется применить навыки программирования либо обратиться к специалистам.
Итак, я расскажу пару приемов, как повысить защищенность формы без капчи.
Скрытые поля как защита форм
Создаем hidden поля. Достаточно для заполняемых полей (name,phone, email) в стилях прописать display:none; и дополнительно создать поля с нестандартными атрибутами name (к примеру phone-protect). Обязательно надо изменить код под новые поля и добавить ещё одну проверку: если наши скрытые поля будут заполнены ( или изменены дефолтные значения), тогда будет выдавать ошибку » Спам здесь не пройдет, обнаружен бот».
Этот метод дает большой выбор пофантазировать в вариантах проверок и названий полей, а значит своей нестандартностью защититься от большего количества ботов
Используем cookies для проверки уникальность посетителя
Проверяем cookies. Тут можно создавать разнообразные варианты. При этом с помощью куков можно реализовать проверку на однократное исполнение формы ( К примеру пользователь отправил заявку, и начинает снова и снова заполнять форму обратной связи — вдруг он просто конкурент. А ему в ответ » Вы уже отправили свою заявку»).
Преимущество данного метода закрывает заодно достаточно распространенную уязвимость, на которую часто закрывают глаза, — CSRF данных формы. А ведь с помощью этой дыры можно совершать множество виртуозных атак.
Фильтрация входящих данных контактных форм обратной связи
Хорошая валидация полей на корректное заполнение является примером тоном правильного программирования. Это не только обезопасит Ваш сайт от SQL инъекций и XSS-уязвимостей, но с учетом того, что боты заполняют случайными значениями, в большинстве случаев они могут не пройти элементарной проверки на корректный телефон. Как дополнительный вариант можно устроить какую-нибудь самописную подгрузку какой-нибудь проверки на Javascript — чем больше уникальность вашего решения, тем меньше шансов пройти спаму!
Не забудьте проверить, не изменилась ли работоспособность с вашими правками. С этими советами можно защитить сайт от спама в формах обратной связи. Ну а в следующей статье я расскажу, как бороться против примитивных DDos-атак и снизить нагрузку на сервер от ботов.
Капча для Contact Form 7 и защита от спама формы обратной связи (все нюансы)
До недавних пор я даже не интересовался какие существуют плагины антиспама в Contact Form 7 потому что проверенная годами связка с Captcha от BestWebSoft работала как часы. Однако недавно разработчики, продвигая свой личный модуль обратной связи, перевели поддержку Contact Form7 в платную PRO версию. Хотя на самом деле это не такая уж и большая проблема, т.к. в самой форме имеется встроенная интеграция официальной Google Captcha. Единственный минус этого подхода (как по мне) в использовании 3-тьей версии капчи без возможности отката до предыдущей.
Итак, первым делом, чтобы внедрить защиту от спама в Contact Form 7 для WordPress сайта, мы после установки плагина обратной связи переходим в его подраздел “Интеграция”.
Здесь в блоке reCAPTCHA имеется на официальный сайт этой капчи. Переходите по ссылке, где представлена краткая информация и самой технологии и ее использованию. Там же на странице будет кнопка «Admin Console», позволяющую залогиниться в свой Гугл-аккаунт или для перехода на регистрацию новой учетной записи.
В личном кабинете находите иконку “+” для создания/добавления нового веб-ресурса. После нажатия увидите следующую форму:
- Указываете ярлык капчи (внутреннее название).
- Выбираете тип защиты. Да, сейчас есть супер модная версия 3 с автоматическим определением ботов, но мне больше нравится метод по старинке с ручным вводом «Я не робот».
- Внизу соглашаетесь с правилами использования и ставите галочку о получении уведомлений, если на сайте будут возникать какие-то проблемы (еще один плюс данной Contact Form 7 капчи).
На следующем шаге вам выдадут 2 значения:
- ключ сайта;
- секретный ключ.
Можете записать их в какой-то файл или временно не закрывать данное окно.
Возвращаемся в наш модуль обратной связи и кликаем по кнопке «Настройка интеграции» (см. первый скриншот выше). На открывшейся странице вводите свои ключи.
Включение reCAPTCHA в Contact Form 7 (v3 или v2)?
Теперь мы приходим к самому интересному – как поставить капчу в Contact Form 7. И тут важным моментом есть то, какой именно вариант защиты вы выбрали. Сейчас Гугл продвигает третью версию и разработчик модуля внедрил именно ее (как передовую технологию). Однако, если почитать форум поддержки в репозитории, то можно увидеть отзывы многих пользователей о том, что данный антиспам фильтр не всегда хорошо справляется.
В общем, если вы решили применять reCAPTCHA v3, то никакие дополнительные настройки после ввода ключей делать не нужно. Вам даже не требуется размещать в форме шорткод [recaptcha], который теперь просто игнорируется. Скрипт капчи работает сразу «из коробки» и самостоятельно в фоновом режиме будет определять является человек реальным или ботом.
Плагин Contact Form 7 – reCaptcha v2
Как я уже говорил выше, новой технологии пока не доверяю, поэтому нашел для себя модуль, совместимый с reCAPTCHA v2. Из его однозначных плюсов выделю: активную и быструю работу над ошибками, более 70к загрузок, простота подключения. Скачивайте отсюда либо ставьте сразу из WP-админки.
После его активации вам нужно:
1. Зайти в раздел «Contact Form 7» — пункт «Версия reCaptcha», где выбираете вторую (источник, как и был по умолчанию, остается google.com).
2. Кликаем по кнопке “Отправить”.
3. Далее открываем для редактирования нужную форму и добавляем перед кнопкой отправки шорткод [recaptcha]. Сохраняем настройки и проверяем результат на вебсайте.
Для шорткода, кстати, есть несколько доп.параметров.
Дополнительные нюансы. Если вдруг по какой-то причине автор забросит этот замечательный плагин, то выбирая среди всех остальных плагинов для капчи в Вордпресс с подобными функциями я бы посоветовал попробовать Advanced noCaptcha & invisible Captcha (v2 & v3) (находится тут). Его аналогично часто упоминают как альтернативу, но баги там исправляются чуть менее быстро (хотя также имеется 70к скачиваний).
Если вы используете в работе Flamingo, то я бы настоятельно рекомендовал ставить капчу на Contact Form 7 ибо спам в данном случае изначально фильтруется через Akismet. И когда последний у вас не настроен, то ооочень многие реальные сообщения из формы помечаются как спам. Если я правильно понял, форма в первую очередь ориентируется на Akismet, когда в проекте нет более серьезного решения от Гугла. В общем, тут еще надо тестировать всякие нюансы, но чтобы бы вы не выбрали без антиспама Flamingo лучше не оставлять.
Понравился пост? Подпишись на обновления блога по 
RSS, 
Email или 
twitter!
Оцените статью:
Как связать reCaptcha с формой обратной связи
Всем привет. Недавно помогал связать форму обратной связи, которая сделана с применением технологии ajax (то есть без перезагрузки страницы) с recaptca от Google и решил, что многим это тоже может быть интересно.
Да, есть много плагинов для CMS, но вручную сделать это немного сложнее, а раз появился такой вопрос у одного, то может и кому-то из вас пригодится статья.
Делать буду на примере свой же формы.
Форма обратной связи с recaptcha от Google
Итак, для тех, кто еще не понял, мы пытаемся добавить такую штуку в нашу форму:
В первую очередь нужно получить API key для домена, на котором будет использоваться reСaptcha. Чтобы его получить, нужно перейти на эту страницу придумать названия и указать нужный домен:
После этого, вас перебросят на страницу, где кратко будет описана интеграция на сайт, а также находиться ваш секретный ключ и ключ сайта:
Дальше, нам говорят, что перед закрывающимся тегом </head> нужно разместить следующий скрипт:
А в форму, там, где будет располагаться каптча — следующий блок:
Есть несколько дополнительных настроек, например:
- светлый или темный внешний вид — data-theme=»light» или data-theme=»dark».
- нормальный или компактный размер — data-size=»compact», data-size=»norml»
Подробнее о том, какие еще есть настройки и как встроить рекаптчу в несколько форм на одной странице можно почитать тут.
Так как в моей форме все скрипты располагаются в конце страницы, то я решил и скрипт от Google поместить там же. Выглядит это все так:
Еще раз повторюсь, что recaptcha подключается к уже существующей форме, ссылка на которую есть в первом параграфе, поэтому не буду здесь описывать каждую строку, отвечающую за форму. Если что-то будет непонятно, загляните на соседнюю страницу с формой. Или спрашивайте в комментариях.
Разметка формы сейчас выглядит так:
Еще раз повторюсь, не обращайте внимание на форму, если не используете ту, о которой шла речь в одной из прошлых статей. Просто добавьте в нужное место своей формы div с ключом, который выдал Google.
Теперь, если попытаться получить данные переданные методом POST, мы получим не только данные из полей (имя и телефон), а и значение переменной g-recaptcha-response. Его и нужно отправить Гуглу для прохождения верификации.
Самостоятельно сделать это достаточно сложно, но есть готовый скрипт, который просто подключается к обработчику формы. Скачать его можно с Github на этой страничке:
Теперь необходимо подключить его к обработчику (php файлу, который отправляет письмо) или вставить скрипт прямо в него. У меня это файл mail.php. Подключать в самом начале:
В этом файле написан код, который передаст наш секретный ключ, значение g-recaptcha-response в Google, затем произойдет проверка успешна ли пройдена каптча. Но сначала, нужно добавить несколько переменных:
Почти все готово, осталось добавить проверку в форму, чтобы показать пользователями, что они не заполнили каптчу. Я делаю такую:
Полный код моего обработчика:
Обратите внимание на почту и не забудьте поменять на свою. Кроме того, способ подключения файла recaptchalib.php предполагает, что что mail.php и recaptchalib.php находятся рядом, то есть в одной папке. Если будет «вываливаться» ошибка, убедитесь, что пути прописаны правильно или скопируйте код прямо в обработчик (в самый верх).
Вот так, достаточно просто подключить reCaptcha для к своим формам. Надеюсь статья была полезной. Помните, что этот способ не только для той формы, о которой шла речь в начале статьи. Вы легко подключите каптчу и к любой другой. На этом — все. Пока!