<< Click to Display Table of Contents >> Настройка капчи

Настройка капчи

В этом разделе

Комплекс применяет сервис капчи Yandex Smart CAPTCHA при подозрительном трафике. Подключение сервиса капчи необходимо для работы механизма защиты от DDoS-атак уровня приложений (подробнее АнтиБот). Для каждого подключаемого веб-ресурса можно задать только одну страницу капчи.

Работа с сервисом Yandex Smart CAPTCHA

Для подключения сервиса Yandex Smart CAPTCHA необходимо выполнить следующие действия:

1.Зарегистрироваться в сервисе предоставляющем Яндекс.капчу.

2.Создать индивидуальную страницу указав защищаемое веб-приложение в разделе Список хостов.

3.Получить ключ клиента и ключ сервера.

4.Выбрать параметры капчи (цвет текста и фона, фокус, чекбокс-элемент и тп.).

Примечание: Более подробную информацию по сервису Yandex Smart CAPTCHA можно изучить в официальной документации.

Добавление страниц капчи в веб-интерфейсе

Для каждого кластера можно загрузить несколько страниц сервиса капчи:

1.Перейдите в раздел Структура → Кластеры.

2.Нажмите Настройки → Капча для управления страницами капчи.

3.Нажмите Добавить, чтобы добавить новую страницу капчи.

4.Для редактирования страницы капчи нажмите .

5.Для удаления страницы капчи нажмите .

Добавление капчи

Для добавления страницы капчи выполните:

1.Перейдите в раздел Структура → Кластеры.

2.Нажмите Настройки → Капча и Добавить. Выберите YANDEX.

3.Заполните поля:

3.1.Название страницы – индивидуальное название капчи.

3.2.Содержимое – импорт html-файла. Если чек-бокс не активен, то будет использоваться содержимое по умолчанию.

3.3.Ключ Клиента – данные настройки капчи Яндекса.

3.4.Ключ Сервера – данные настройки капчи Яндекса.

4.Нажмите Создать.

Ниже указан html-файл для использования в поле Содержимое:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Captcha Yandex</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: rgb(234, 234, 234);
      display: flex;
      justify-content: space-around;
    }
    .captchaBox {
      width: 30vw;
      height: 30vh;
      color: rgb(230, 230, 230);
      font-family: 'Helvetica', sans-serif;
      font-size: 1.5em;
      font-weight: lighter;
      display: flex;
      overflow-wrap: break-word;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }
    .captchaMessage {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: start;
      word-wrap: break-word;
      text-wrap: wrap;
      font-size: 1.4rem;
      text-wrap: wrap;
      text-overflow: ellipsis;
    }
    .mainBlock {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      height: 100vh;
      width: 40vw;
    }
  </style>
  <script src="https://smartcaptcha.yandexcloud.net/captcha.js?render=onload&onload=onloadFunction" defer></script>
</head>
<body>
  <script>
    let solved_token_global = "";
    function onloadFunction() {
      if (window.smartCaptcha) {
        const container = document.getElementById('captcha_div');
        const widgetId = window.smartCaptcha.render(container, {
          sitekey: '%YASERVICE_SITEKEY%',
          hl: 'ru',
        });
        const unsubscribe = window.smartCaptcha.subscribe(
          widgetId,
          'success',
          (solve_token) => {
            solved_token_global = solve_token;
            redirectToSource();
          }
        );
      }
    }
    async function redirectToSource() {
      let response = await fetch(`%CAPTCHA_HANDLER_LOCATION_NORMALIZED%/validate?token=` + solved_token_global);
      let resp_json = await response.json();
      if (resp_json["status"] === "ok") {
        location.href = source_uri_str;
      }
    }
  </script>
  <div class="mainBlock">
    <div class="captchaBox">
      <div class="captchaMessage">
        <div id="captcha_div"></div>
      </div>
    </div>
  </div>
  <script>
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    var source_uri_str = "%weblock_source_uri_javascript%"
  </script>
</body>
</html>

Редактирование капчи

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

Важно! Поле Содержимое осуществляется заменой html-файла. Содержимое старого html-файла шифруется и точечно редактировать его невозможно.

Выбор страницы капчи в веб-интерфейсе

После загрузки страниц сервиса капчи для кластера следует выбрать по одной странице капчи для каждого сервера кластера (для защиты АнтиБот). Для настройки выполните:

1.Перейдите в раздел Структура → Серверы.

2.Нажмите и нажмите Капча.

3.Нажмите для выбора нужной капчи.

4.Для удаления капчи нажмите .

После настройки капчи можно проверить правильность отображения в WCS-схеме прямо в веб-интерфейсе нажав :

В WCS-схеме веб-сервера секция captcha_pages:

"captcha_pages": [
    {
        "locked": false,
        "alias": "alias_c",
        "file": "alias_f",
        "type": "yandex",
        "vars":[
            {
                "name": "YASERVICE_SECRET",
                "value": "secret"
            },
            {
                "name": "YASERVICE_SITEKEY",
                "value": "sitekey"
            }
        ]
    }
],

Параметры

Список переменных и их значений vars для сервиса Yandex SmartCaptcha приведен в таблице.