Скажите “Прощай” спаму! Полное руководство по reCAPTCHA

by Alex Brown
Скажите “Прощай” спаму! Полное руководство по reCAPTCHA thumbnail

В 2013 году Target теперь стал известен компрометацией данных десятков миллионов покупателей в событии, которое сократило продажи, привело к судебным искам и даже привело к отставке генерального директора.

Что произошло?

Хакеры получили доступ к Target через стороннего поставщика, у которого не было CAPTCHA или какой-либо формы аутентификации, чтобы убедиться, что в их систему входит человек — а не вредоносный бот.

Оттуда, боту не потребовалось много времени, чтобы проникнуть в организацию этого стороннего поставщика и пробраться в платежную сеть крупного ритейлера.

Какой здесь урок?

Если злоумышленники ищут способ проникнуть на ваш сайт, CAPTCHA может стать мощной первой линией защиты и даже убедить их перейти к более лёгкой цели (игра слов *весьма* уместна).

Заинтересовалась этой концепцией CAPTCHA?

Тогда читайте дальше, чтобы узнать:

  • Разница между CAPTCHA и reCAPTCHA (и что означают все эти буквы!)
  • Основные типы CAPTCHA, используемые сегодня
  • Как CAPTCHA может помочь владельцам сайтов избежать спама и злоупотреблений
  • Некоторые недостатки, которые стоит учитывать при использовании CAPTCHA
  • Два способа добавить Google reCAPTCHA на ваш сайт WordPress

Получайте контент прямо в свой почтовый ящик

Подпишитесь сейчас, чтобы получать все последние обновления прямо в свой почтовый ящик.

Что такое reCAPTCHA?

Готовьтесь, друзья, потому что это будет многоуровнево.

Давайте начнем с базового определения: «reCAPTCHA — это сервис от Google, который помогает защищать веб-сайты от спама и злоупотреблений».

reCAPTCHA от Google — популярная, брендированная версия CAPTCHA. Изначальная идея CAPTCHA была предложена в Университете Карнеги-Меллон примерно в 2000 году. reCAPTCHA также была создана разработчиками из того же университета, а затем куплена Google примерно в 2009 году.

Теперь следующий слой: Что на самом деле означают все буквы в слове «CAPTCHA»?

Фраза CAPTCHA является сокращением от “полностью автоматизированный общедоступный тест Тьюринга для различения компьютеров и людей”.

И эти объяснения приводят нас к последнему, логическому слою, который следует раскрыть: Что такое Тест Тьюринга?

Если вы похожи на нас, то ваше основное знакомство с Тестом Тьюринга произошло благодаря фильму 2014 года The Imitation Game, где главный герой – математик и компьютерный ученый Алан Тьюринг.

Алан Тьюринг разработал Тест Тьюринга (который он изначально назвал игрой в подражание — скромно), чтобы ответить на вопрос: «Могут ли машины думать?»

Сегодня тесты Тьюринга в первую очередь используются для различения людей и ботов, проверяя способность бота демонстрировать такое же интеллектуальное поведение, как у человека. Боты в данном случае относятся к автоматизированным программным приложениям, часто работающим на основе искусственного интеллекта (AI).

Глоссарий DreamHost

Bot

Bot — это программа, предназначенная для автоматизации определенных задач. Например, поисковые системы используют ботов для сканирования интернета, следуя по ссылкам для картографирования и индексации новых страниц. Боты также широко распространены в вредоносном программном обеспечении.

Читать далее

CAPTCHAs помогают предотвращать спам и злоупотребления на веб-сайтах, блокируя ботов с помощью задач, которые для нас, людей, относительно легко понять и выполнить, но часто разоблачают ботов как программы, которыми они являются.

Теперь, когда вы знаете достаточно, чтобы определенно написать роман о происхождении CAPTCHA, давайте поговорим о всех различных способах, которыми мы видим это понятие в повседневной жизни.

Различные типы CAPTCHA

CAPTCHA развивались в различных направлениях на протяжении многих лет в попытке различить человека и бота. Сегодня существует несколько распространенных типов CAPTCHA, требующих различных форм рассуждений и ввода данных.

Текстовые CAPTCHA

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

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

Пример текстовых CAPTCHA

Капчи на основе изображений

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

Тесты reCAPTCHA от Google часто используют этот метод — что логично, учитывая их обширный источник фотографий из Google Street View.

Пример капчи на основе изображений

Аудио CAPTCHA

В аудио-основанных CAPTCHA звук является средством. Этот метод часто используется в сочетании с другими, например, текстовыми и визуальными CAPTCHA.

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

Пример аудио-основанных CAPTCHA

CAPTCHA на основе флажков

Хотя эти CAPTCHA могут показаться простыми на первый взгляд, на самом деле они оценивают, как пользователи сайта взаимодействуют с самим чекбоксом.

Боты заполняют формы и отмечают чекбоксы мгновенно, в то время как люди делают это медленнее.

Этот метод может использоваться в сочетании с другими CAPTCHA, если вы хотите быть еще более уверенными в том, что пользователь не является программным обеспечением, хитро маскирующимся под человека в толстовке и пьющего Starbucks.

Пример CAPTCHA на основе флажков

CAPTCHA на основе поведения

Дело в том, что программное обеспечение стало настолько умным, что многие из вышеупомянутых CAPTCHA могут быть обойдены в наши дни.

Именно поэтому новая версия reCAPTCHA — reCAPTCHA v3 от Google — изменила правила игры, предложив метод CAPTCHA, который работает в фоновом режиме.

reCAPTCHA v3 — это в основном невидимая reCAPTCHA, которая использует JavaScript API и механизм адаптивного анализа рисков на основе машинного обучения для оценки пользователей на основе их поведения при взаимодействии с вашими веб-страницами.

За кулисами reCAPTCHA v3 присваивает каждому пользователю оценку, которая пытается определить, является ли он человеком или ботом. Конечно, в некоторых случаях этого контроля может быть недостаточно, чтобы остановить действительно умных ботов.

Кроме того, в эпоху, когда маятник качнулся обратно в сторону конфиденциальности в интернете, этот метод может быть спорным, поскольку он отслеживает вашу активность на сайте, а единственным предупреждением часто является маленький значок reCAPTCHA.

Пример поведенческих CAPTCHA

То, о чем мы говорили здесь, — это лишь самые распространенные CAPTCHAs. Другие типы программ просят пользователя сайта перемещать объекты в определенную точку на экране, играть в «микроигры» и так далее. Ознакомьтесь с другими примерами CAPTCHA здесь.

Примеры использования: Где применять CAPTCHA для предотвращения спама

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

Тем не менее, злоумышленники определенно нашли способы использовать эту технологию для атаки на веб-сайты.

Глоссарий DreamHost

Атака DDoS

DDoS означает Распределенная атака типа «отказ в обслуживании». Это атака, которая пытается сделать систему или сеть недоступной за счет перегрузки трафиком с множества источников.

Читать далее

Вот несколько лучших примеров использования, где применение CAPTCHA может защитить ваш сайт от спама и злоупотреблений.

Опросы и анкеты

Компании используют опросы и анкеты по самым разным причинам.

Снаружи они могут помочь вам собрать отзывы и новые идеи для продуктов, услуг, маркетинга, брендинга, контента и всего остального, что связано с пользователем.

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

Вы бы не хотели искажать эти результаты из-за большого количества автоматизированных, ложных ответов, не так ли?

Ну, боты определенно могут.

Входы пользователей

Боты часто используются для помощи хакерам в доступе к веб-сайтам через уже существующие учетные записи пользователей.

Обычно они делают это с помощью атак методом грубой силы, которые используют программное обеспечение для автоматического угадывания сотен паролей за секунды.

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

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

Разделы комментариев

Вы, вероятно, часто видели спам, появляющийся в разделах комментариев на веб-сайтах и в социальных сетях.

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

Формы

Так же, как и разделы комментариев, формы, которые не защищены с помощью CAPTCHA, могут быть переполнены ложными отправками от ботов, запрограммированных пытаться продать вам что-то, распространять определенные идеи или даже фишить конфиденциальные данные.

Оформление заказа

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

Первое очевидно: покупка билетов или других товаров со скоростью, с которой не могут справиться люди. А затем, вероятно, перепродажа их в другом месте по более высоким ценам. (Мы совсем не обижены из-за упущенных билетов на Тейлор Свифт…)

Во-вторых, боты могут использовать незащищенные процессы оформления заказа для так называемой проверки карт. Это происходит, когда они запускают автоматизированные скрипты в вашей системе оформления заказа, чтобы проверить, пригодны ли украденные номера кредитных карт для использования или нет.

Требуя решение CAPTCHA перед выполнением вышеуказанных действий, ваш веб-сайт должен иметь возможность определять и прекращать большинство автоматических злоупотреблений, осуществляемых ботами.

Глоссарий DreamHost

Атака методом грубой силы

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

Читать далее

Возможные недостатки использования CAPTCHA

Хотя CAPTCHA безусловно имеет свои преимущества, есть некоторые недостатки, которые следует учитывать при настройке этой системы на вашем сайте:

  • CAPTCHAs могут делать ваш сайт менее доступным для людей с нарушениями слуха и/или зрения, или для тех, кто не знает язык, на котором представлена ваша CAPTCHA.
  • CAPTCHAs могут прерывать пользовательский опыт, и если они слишком сложные, могут мешать взаимодействию даже с человеческими пользователями.
  • CAPTCHAs не являются абсолютно надежными, поэтому владельцам сайтов не следует успокаиваться — нам все еще нужно оставаться бдительными к признакам спама и атак.

Кроме того, есть некоторые элементы reCAPTCHA от Google, о которых в частности должны знать владельцы сайтов:

  • reCAPTCHA v3 может показаться пользователям навязчивой, так как она отслеживает поведение на всем сайте для своей работы, что может заставить осторожных в вопросах конфиденциальности людей избегать использования вашего сайта.
  • Бизнес-модель Google заключается в использовании или продаже данных для рекламы, что может оттолкнуть владельцев сайтов (и пользователей), которые не хотят, чтобы их поведение или данные коммерциализировались.
  • reCAPTCHA использует труд пользователей, собирая данные из взаимодействий пользователей для обучения систем визуальной идентификации Google, что может вызвать дискомфорт у некоторых людей.
  • Google иногда блокируется в странах, таких как Китай, поэтому использование технологий Google может серьезно ограничить глобальную доступность сайта.

Как добавить reCAPTCHA в WordPress через плагин (6 шагов)

Предисловие: CAPTCHA всех видов могут быть добавлены на сайты любого типа.

Однако, поскольку WordPress является одной из самых популярных платформ для сайтов и reCAPTCHA от Google мощная, бесплатная (до миллиона оценок) и очень популярная, — сегодня мы сосредоточимся на интеграции этих двух систем.

Теперь давайте приступим к защите вашего сайта.

Шаг 1: Зарегистрируйте ваш сайт

Прежде всего, зарегистрируйте ваш сайт WordPress в административной панели Google reCAPTCHA. Для завершения этого шага вы должны войти в свою учетную запись Google или создать ее.

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

Скриншот регистрации на Google reCAPTCHA

Шаг 2: Получите Ваши Ключи

После отправки регистрации Google предоставит ключ сайта и секретный ключ. Вот как вы заставите Google reCAPTCHA взаимодействовать с вашим сайтом на WordPress.

Скопируйте их, потому что мы скоро начнем их использовать.

Шаг 3: Установка плагина WordPress

Теперь войдите в WordPress.

Если у вас еще не установлен плагин reCAPTCHA, перейдите в Панель управления > Plugins > Add New и найдите «reCAPTCHA.» reCaptcha от BestWebSoft, CAPTCHA 4WP и Contact Form 7 являются популярными вариантами.

После установки большинство этих плагинов проведут вас через процесс подключения вашего сайта к Google reCAPTCHA. Мы продолжим данный учебник, используя Contact Form 7 в качестве примера того, насколько это может быть доступно.

Шаг 4: Включить reCAPTCHA

После установки Contact Form 7 перейдите в WordPress в раздел Контакт > Интеграция. Найдите блок интеграции reCAPTCHA и начните процесс настройки.

Вам будет предложено вставить ключи сайта и секретные ключи, которые вы только что получили от Google. После добавления ключей и сохранения изменений, reCAPTCHA начнет работать на вашем сайте.

Скриншот включения reCAPTCHA на WordPress

Для получения инструкций по настройке Contact Form 7, ознакомьтесь с нашей статьей в Базе знаний по устранению неполадок с контактными формами WordPress.

Шаг 5: Добавить reCAPTCHA в форму

Теперь, когда функциональность reCAPTCHA включена, вам нужно добавить её в любые формы, которые вы хотите защитить от отправки ботами.

Для этого перейдите в Contact > Панель управления в WordPress и добавьте новую форму.

Здесь вы собираетесь слегка изменить код шаблона формы, чтобы добавить reCAPTCHA.

Добавьте “[recaptcha]” прямо перед строкой “[submit “Submit”]”. После сохранения вы должны увидеть шорткод под заголовком формы.

Скриншот того, как добавить reCAPTCHA к форме

Шаг 6: Опубликуйте Вашу форму reCAPTCHA на Вашем сайте

Скопируйте этот только что созданный шорткод.

Теперь вставьте этот код в записи, страницы или текстовые виджеты, чтобы установить новую форму вместе с reCAPTCHA!

Как вручную добавить reCAPTCHA в WordPress (4 шага)

В качестве альтернативы использованию плагина, вы можете вручную добавить reCAPTCHA на любую форму на вашем сайте.

Это потребует некоторой работы с кодом. Если вас пугают такие вещи, как теги заголовков и фрагменты JavaScript, то вам может быть более комфортно остановиться на готовом решении.

Но если вы готовы засучить рукава, настройка довольно проста и охватывает диапазон от очень простого (запуск нового сайта с DreamHost) до очень сложного (решение задачи трех тел).

Давайте начнем.

Шаг 1: Зарегистрируйте ваш сайт и получите ваши ключи

Как и в случае с плагином, вам необходимо начать с регистрации в reCAPTCHA на веб-сайте Google.

Вы можете сделать это в два быстрых шага:

  1. Зарегистрируйте ваш сайт WordPress в административной панели reCAPTCHA Google и выберите тип reCAPTCHA.
  2. Скопируйте ваш ключ сайта и секретный ключ для будущего использования.

Теперь давайте вернемся к текущему веб-сайту. Существует три основных элемента, которые заставляют reCAPTCHA работать:

  • Библиотека JavaScript (API reCAPTCHA)
  • Элемент формы HTML
  • Код проверки ответа

Мы начнем с библиотеки JavaScript reCAPTCHA.

Шаг 2: Добавьте библиотеку JavaScript reCAPTCHA

Чтобы начать, нам нужно добавить библиотеку JavaScript на ваш сайт. Это небольшой фрагмент кода, который нужно добавить на каждую страницу, которая будет использовать reCAPTCHA:

“<script src="https://www.google.com/recaptcha/api.js" async defer></script>”

Самый простой способ убедиться, что это доступно на всех необходимых страницах, – добавить это в ваш универсальный заголовок перед закрывающим тегом “</head>”.

Вы можете сделать это одним из двух способов:

  1. Вручную, путем доступа к header.php напрямую через администратора WordPress или файловый менеджер в вашей панели управления хостингом
  2. Используя плагин для добавления кода в ваш заголовок

Добавление кода вручную

Если вы выберете первый путь, вам потребуется использовать либо редактор файлов темы внутри WordPress, либо ваш файловый менеджер для доступа к header.php напрямую.

Важное замечание: Прямое редактирование файлов вашей темы может нарушить работу вашего сайта, и ваши изменения могут быть перезаписаны при обновлении темы. Если вы не имеете опыта в прямом редактировании файлов темы, перейдите к разделу «Использование плагина для добавления кода» для менее рискованного решения.

Ваш файловый менеджер будет выглядеть по-разному в зависимости от вашего хоста, но если вы используете DreamHost, перейдите в WordPress > Управляемый WordPress в боковой панели. Найдите домен, к которому вы хотите добавить reCAPTCHA, и выберите Управление.

Если вы хотите добавить код вручную, вам нужно будет использовать либо редактор файлов темы в WordPress, либо ваш файловый менеджер для прямого доступа к header.php. Если вы используете DreamHost, перейдите в раздел WordPress > Управляемый хостинг WordPress на боковой панели. Найдите домен, к которому вы хотите добавить reCAPTCHA, и выберите Управление.

Затем, кликните на кнопку Управление файлами в разделе Детали.

Откройте папку, которая имеет ваше доменное имя. Оттуда перейдите в wp-content > themes и найдите папку вашей текущей темы WordPress.

Найдите файл с именем header.php, откройте его и найдите закрывающий тег <code>“&lt;/head&gt;”</code> в коде.

Скопируйте и вставьте фрагмент JavaScript reCAPTCHA прямо перед этой строкой.

Скопируйте и вставьте фрагмент JavaScript reCAPTCHA в файл header.php

Использование плагина для добавления кода

Если вышеизложенное кажется слишком сложным, не беспокойтесь. Мы всё предусмотрели.

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

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

Из вашей панели администратора WordPress перейдите в Plugins > Add New и выполните поиск WPCode.

Клик Установить, затем Активировать.

После активации WPCode вы должны увидеть новый раздел в вашем левом боковом меню под названием Code Snippets.

Перейдите в Фрагменты кода > Заголовок & Нижний колонтитул.

Используя плагин, например WPCode, вы можете легко добавлять соответствующие фрагменты кода в ключевые части вашей темы WordPress

Внутри страницы Header & Footer вставьте JavaScript код в раздел Header и сохраните изменения.

Бум — код добавлен!

Шаг 3: Добавьте reCAPTCHA в вашу форму

Теперь мы собираемся настроить код на самой форме, где вы хотите видеть вашу reCAPTCHA.

Снова вы можете использовать файловый менеджер, редактор WordPress или даже FTP.  Он должен находиться внутри папки wp-content , где хранятся все ваши плагины, темы и медиафайлы.

В код формы вставьте следующий код перед строкой отправки, чтобы добавить reCAPTCHA:

“<div class="g-recaptcha" data-sitekey="your_site_key"></div>”

Вот пример того, как это может выглядеть:

Пример добавления reCAPTCHA к вашей форме

Замените “your_site_key” на ключ сайта, который вы получили от Google.

Шаг 4: Обработка ответа

Возможно, самой сложной частью процесса является добавление кода для обработки ответа от reCAPTCHA. Это в основном сообщает вашему сайту, следует ли обрабатывать форму или блокировать ее.

Для настройки этого вам потребуется добавить еще один фрагмент кода в форму (функцию обратного вызова):

$secretKey = "your_secret_key";
$response = $_POST['g-recaptcha-response'];
$remoteIp = $_SERVER['REMOTE_ADDR'];

$url = "https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$response."&remoteip=".$remoteIp;
$response = file_get_contents($url);
$responseKeys = json_decode($response,true);

if(intval($responseKeys["success"]) !== 1) {
    // Обработка неудачной проверки reCAPTCHA
} else {
    // Обработка отправки формы
}

В этом коде вам нужно заменить “your_secret_key” на секретный ключ, предоставленный Google.

Это лишь один пример реализации, который позволит вам настроить обработку отправки данных. Существует множество других методов для обработки серверной валидации и функций обратного вызова.

Для получения дополнительной информации о том, как обращаться с этой частью процесса, обратитесь к официальной документации от Google.

Прощай, Спам. Здравствуй, безопасность

Хотя мы должны повторить, что reCAPTCHA и CAPTCHA не являются универсальным средством в области безопасности сайтов, они представляют собой важный шаг в помощи вам отражать автоматизированные боты и хакеров с плохими намерениями.

Для получения дополнительных советов по защите вашего сайта на WordPress и не только, следите за DreamHost блогом. Мы всегда публикуем ресурсы, которые помогут вам сохранить ваш сайт безопасным, быстрым и доступным в сети, чтобы произвести впечатление на посетителей сайта и поисковые системы.

Фоновое изображение объявления

Вы мечтаете, мы программируем

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

Узнать больше