403 и CAPTCHA с вашим дизайном
Как оформить страницы 403 и CAPTCHA в фирменном стиле, а для графической CAPTCHA – загрузить собственные изображения.
403 со своим дизайном
Что такое 403
Страница 403 — это страница-ошибка Forbidden; её видят все, кого система защиты посчитала нелегитимным ботом и не пустила на ваш ресурс. Так выглядит стандартная страница:
Зачем кастомизировать 403
Это поможет улучшить пользовательский опыт для случаев, когда страница 403 выпадает человеку:
-
Интерфейс будет более user-friendly: при попадании на 403 нет ощущения «разрыва» взаимодействия с брендом, потому что страница оформлена в стиле вашего сайта/приложения
-
Пользователь сможет связаться с вами и попросить снять блокировку для него (если вы дали такую возможность на странице)
Сделать страницу 403 со своим дизайном
Шаг 1. Скопируйте HTML-шаблон.
Раскройте шаблон ниже, наведите курсор на код и нажмите на появившийся значок 📋 в верхнем правом углу. Вставьте код в файл на своём компьютере.
Открыть шаблон
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="text-align: center;">
<h1>Forbidden</h1>
<p id="REQUEST-DATE">Datetime: %REQUEST_DATETIME%</p>
<p id="REQUEST-IP">IP: %REQUEST_IP%</p>
<p id="REQUEST-ID">ID: %REQUEST_ID%</p>
<p id="ORIGIN-ID"></p>
<p>If you are not a bot, please copy the report and send it to our support team.</p>
<p><button onclick="copy()">Copy</button></p>
</div>
<script>
function copy() {
document.oncopy = function (e) {
const t = {
report: {
datetime: document.getElementById("REQUEST-DATE").innerHTML,
ip: document.getElementById("REQUEST-IP").innerHTML,
id: document.getElementById("REQUEST-ID").innerHTML
}
};
e.clipboardData.setData("text", JSON.stringify(t));
e.preventDefault();
};
document.execCommand("copy");
}
document.addEventListener("DOMContentLoaded", function() {
const origin = window.location.protocol + "//" + window.location.host;
document.getElementById('ORIGIN-ID').innerHTML = "Origin: " + origin;
});
</script>
</body>
</html>Шаг 2. Измените страницу по своему вкусу.
Оформите страницу в стиле своей компании, изменив и дополнив исходный код. Соблюдайте требования:
-
Формат файла HTML
-
Размер не больше 5 КБ
-
Нельзя удалять переменные
REQUEST_DATETIME,REQUEST_IP,REQUEST_IDили менять их порядок. Если нужно использовать какую-то из переменных несколько раз, обращайтесь к ней по её id -
Можно менять стили, тексты и добавлять собственные блоки
Рекомендуем для улучшения пользовательского опыта добавить на страницу:
-
Информацию о домене, на котором произошла блокировка
-
Контактную информацию для связи
-
Напоминание, что блокировка может быть вызвана использованием VPN/proxy или расширениями к браузеру (например, AdBlock)
Шаг 3. Напишите в техническую поддержку или своему персональному менеджеру.
В сообщении укажите, что хотите кастомизировать страницу 403, и приложите созданный HTML-файл. Имейл нашей поддержки: cybert@servicepipe.ru.
Шаг 4. Дождитесь подтверждения.
Мы сообщим, что страница успешно добавлена. С этого момента пользователи будут видеть 403 с вашим дизайном.
CAPTCHA со своим дизайном и картинкой
Что такое CAPTCHA
CAPTCHA — это тест, который помогает отличить человека от бота. Система защиты выдаёт его как альтернативу блокировки, чтобы легитимные пользователи могли получить доступ к сервису: люди тест пройдут, боты провалят.
Виды CAPTCHA
Доступны два вида CAPTCHA:
-
Символьная — пользователь вводит символы с картинки.
-
С поворотом картинки — пользователь мышкой поворачивает изображение в правильное положение.
|
|
Символьная |
С поворотом картинки |
По умолчанию используется символьная, по запросу можем настроить выдачу CAPTCHA с картинкой.
Сделать CAPTCHA со своим дизайном
Символьная CAPTCHA
Шаг 1. Скопируйте HTML-шаблон.
Раскройте шаблон ниже, наведите курсор на код и нажмите на появившийся значок 📋 в верхнем правом углу. Вставьте код в файл на своём компьютере.
Открыть шаблон
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<title>Captcha</title>
<style>
body {
margin: 0;
overflow-x: hidden;
background: white;
font-family: 'ui-monospace', 'monospace', sans-serif;
}
.header {
background: rgba(0, 233, 198, 0.4);
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 30px 25px 47px 25px;
flex-wrap: wrap;
}
.header-title {
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 27px;
color: #000000;
margin-bottom: 31px;
flex-wrap: wrap;
}
.header-subtitle {
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 20px;
color: rgba(0, 0, 0, 0.6);
flex-wrap: wrap;
}
.main {
background: white;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 65px 25px 65px 25px;
}
.captcha {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.captcha-number {
font-style: normal;
font-weight: 400;
font-size: 34px;
line-height: 46px;
letter-spacing: 0.25px;
color: #041614;
margin-bottom: 16px;
}
input {
text-align: center;
background: #FFFFFF;
border: 2px solid #D1DBD9;
border-radius: 10px;
margin-bottom: 39px;
box-sizing: border-box;
width: 100%;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
color: #828B89;
padding: 17px 10px;
}
.captcha-input {
width: 100%;
}
.captcha-btn button {
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
text-transform: uppercase;
color: #FFFFFF;
background: #01CDCB;
border-radius: 100px;
margin-top: 10px;
margin-bottom: 10px;
padding: 14px 82px;
box-shadow: none;
border: 1px solid transparent;
}
.captcha-btn:active {
transform: scale(0.98);
}
button:disabled,
button[disabled]{
background: #01DDDB;
}
.about {
display: none;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 50px;
}
.list-title {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 27px;
letter-spacing: 0.5px;
color: #041614;
margin-bottom: 5px;
}
.list-item {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: 0.5px;
color: #041614
}
.footer-data {
font-style: normal;
font-weight: 500;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.25px;
color: #7A7A7A;
margin-bottom: 4px;
}
.footer-ip {
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 27px;
letter-spacing: 0.5px;
color: #000000;
}
.footer-ip span {
color: #7A7A7A;
font-weight: 400;
}
.container {
margin: 0;
}
@media only screen and (min-width: 768px) {
.container-inner {
background: #FFFFFF;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
.about {
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 20px;
letter-spacing: 0.5px;
color: #041614;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 15px;
}
.about-title {
font-weight: 500;
margin-bottom: 10px;
}
body {
background: #E5E5E5;
}
.container {
max-width: 610px;
width: 100%;
margin: 15vh auto;
}
}
@media only screen and (min-width: 1024px) {
.captcha {
margin: 0;
}
.container {
max-width: 1020px;
width: 100%;
margin: 15vh auto;
}
.container-inner {
background: #FFFFFF;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
body {
background: #E5E5E5;
}
.about {
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 20px;
letter-spacing: 0.5px;
color: #041614;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 15px;
}
.about-title {
font-weight: 500;
margin-bottom: 10px;
}
}
@media only screen and (max-width: 400px) {
img {
width: 100%;
}
}
</style>
</head>
<body style=" margin: 0; height: 100%; ">
<div class="container">
<div class="container-inner">
<div class="header">
<div class="header-title">
Требуется дополнительная проверка
</div>
<div class="header-subtitle">
Мы хотим убедиться, что имеем дело именно с вами, а не с роботом.
<br>
Пожалуйста, пройдите капчу ниже, чтобы получить доступ к сайту.
</div>
</div>
<div class="main">
<div class="captcha">
<form name="form" method="post" action="" id="id_captcha_loaded">
<div class="captcha-number">
<img src="captcha_image.php?<?php echo $query_string ?>" id="captcha_image">
</div>
<div class="captcha-input">
<input id="captcha_input" type="text" placeholder="Введите цифры и буквы" name="captcha">
</div>
<div class="captcha captcha-btn">
<button type="submit" form="id_captcha_loaded" id="submit_button">Проверить</button>
</div>
<div class="captcha">
или
</div>
<div class="captcha captcha-btn">
<button type="submit" form="id_captcha_loaded" id="renew_button">Обновить</button>
</div>
</form>
</div>
<div class="about">
<div class="about-title">
Зачем потребовалась эта проверка?
</div>
<div>
Что-то в поведении вашего браузера привлекло наше внимание.<br>
Можете обратиться в техподдержку (например, используя email) передав следующие данные:
</div>
</div>
<div class="footer">
<div style="margin-left: 20px;">
<div class="footer-data"><?php echo $request_datetime ?></div>
<div class="footer-ip">Ваш IP: <span> <?php echo $request_ip ?></span></div>
<div class="footer-ip">ID запроса: <span><?php echo $request_id ?></span></div>
</div>
<div class="captcha captcha-btn">
<button onclick="copy()">Копировать</button>
</div>
</div>
</div>
</div>
</div>
<script>
function copy() {
document.oncopy = function(event) {
let report = {
report: {
datetime: "<?php echo $request_datetime ?>",
ip: "<?php echo $request_ip ?>",
id: "<?php echo $request_id ?>"
}
};
event.clipboardData.setData("text", JSON.stringify(report));
event.preventDefault();
};
document.execCommand("copy");
}
const btn = document.getElementById("submit_button");
btn.addEventListener('click', function handleClick() {
console.log("click");
btn.innerHTML = "Проверка...";
btn.disabled = true;
document.getElementById("id_captcha_loaded").submit();
});
const btn_r = document.getElementById("renew_button");
btn_r.addEventListener('click', function handleClick() {
console.log("click");
btn_r.innerHTML = "Обновляем...";
btn_r.disabled = true;
const input_field = document.getElementById("captcha_input");
input_field.value = "";
document.getElementById("id_captcha_loaded").submit();
});
</script>
</body>
</html>Шаг 2. Измените страницу по своему вкусу.
Оформите страницу в стиле своей компании, изменив и дополнив исходный код. Соблюдайте требования:
-
Формат файла HTML
-
Нельзя менять PHP-переменные и их вызовы, основные элементы формы и JS-код, который обрабатывает кнопки
-
Можно менять стили и тексты и добавлять собственные блоки или необходимый JS-код
-
Файл не должен содержать внешних зависимостей
Рекомендуем для улучшения пользовательского опыта добавить на страницу:
-
Информацию о домене, на котором произошла блокировка
-
Контактную информацию для связи
-
Напоминание, что дополнительная проверка может быть вызвана использованием VPN/proxy или расширениями к браузеру (например, AdBlock)
Шаг 3. Напишите в техническую поддержку или своему персональному менеджеру.
В сообщении укажите, что хотите кастомизировать страницу символьной CAPTCHA, и приложите созданный HTML-файл. Имейл нашей поддержки: cybert@servicepipe.ru.
Шаг 4. Дождитесь подтверждения.
Мы сообщим, что страница успешно добавлена. С этого момента пользователи будут видеть CAPTCHA с вашим дизайном.
CAPTCHA с картинкой
Шаг 1. Скопируйте HTML-шаблон.
Раскройте шаблон ниже, наведите курсор на код и нажмите на появившийся значок 📋 в верхнем правом углу. Вставьте код в файл на своём компьютере.
Открыть шаблон
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&family=Roboto:wght@300;500;700&display=swap" rel="stylesheet">
<link href="./sp_rotated_captcha/js/style.css" rel="stylesheet">
<script language="JavaScript" type="text/javascript" src="./sp_rotated_captcha/js/captchaIntGen.js"></script>
<style>
.captcha-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.box {
margin: 117px 0;
width: 1087px;
height: auto;
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
border: 0px solid transparent;
overflow: hidden;
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
}
.captcha-header {
display: flex;
align-items: flex-start;
background-color: #00E9C666;
padding: 44px 60px;
justify-content: space-between;
}
.captcha-header-text {
font-family: Manrope;
font-size: 20px;
font-weight: 400;
line-height: 27px;
text-align: left;
color: rgba(0, 0, 0, 0.6);
}
.captcha-header-info-box {
display: flex;
align-items: flex-start;
}
.captcha-header-span {
font-family: Manrope;
font-size: 15px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.25px;
text-align: left;
color: #7A7A7A;
margin-bottom: 6px;
}
.captcha-header-label {
font-family: Manrope;
font-size: 16px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
text-align: left;
margin-bottom: 6px;
}
.button-copy {
border: none;
background: transparent;
cursor: pointer;
}
.captcha {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 33px 44px;
}
.captcha-title {
font-family: Manrope;
font-size: 18px;
font-weight: 500;
line-height: 27px;
letter-spacing: 0.5px;
text-align: left;
margin-bottom: 33px;
}
.captcha-control {
position: relative;
width: var(--size-control);
height: 20px;
margin: 0 auto;
margin-top: 33px;
margin-bottom: 53px;
}
.captcha-control-wrap {
left: 0;
width: 100%;
background: #D1DBD9;
overflow: hidden;
}
.captcha-control-wrap, .captcha-control-button {
position: absolute;
top: 0;
height: 100%;
border-radius: 100px;
box-sizing: border-box;
}
.captcha-control-button {
position: absolute;
width: 50px;
background: #fff;
cursor: pointer;
box-shadow: 0 21px 52px 0 rgba(82,82,82,.2);
transform: translateX(0);
border: 3px solid #01CDCB;
top: -15px;
height: 50px;
}
.captcha-control-button i {
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 28px;
margin-left: -14px;
margin-top: -14px;
background: #01CDCB;
border-radius: 50%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.support-block-title {
font-family: Manrope;
font-size: 15px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.5px;
text-align: left;
margin-bottom: 13px;
}
.support-block-subtitle {
font-family: Manrope;
font-size: 15px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.5px;
text-align: left;
margin-bottom: 20px;
}
.support-block-dsc {
font-family: Manrope;
font-size: 15px;
font-weight: 500;
line-height: 30px;
letter-spacing: 0.5px;
text-align: left;
margin-bottom: 5px;
}
.support-block-span {
font-family: Manrope;
font-size: 15px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0.5px;
text-align: left;
margin-bottom: 10px;
}
.support-block-span span {
margin-right: 10px;
}
@media screen and (max-width: 600px) {
.captcha-header-text {
display: none;
}
.box {
margin: 0;
width: 100%;
height: auto;
background-color: transparent;
border-radius: 0px;
border: none;
overflow: hidden;
box-shadow: none;
}
.captcha-wrap {
width: 100%;
}
body {
margin: 0;
padding: 0;
}
.captcha-header {
display: flex;
align-items: flex-start;
background-color: #00E9C666;
padding: 44px 60px;
justify-content: center;
}
.captcha {
justify-content: center;
align-items: center;
}
.support-block-title {
display: none;
}
.support-block-subtitle {
display: none;
}
}
</style>
</head>
<body>
<script>
function copyToClipboard(string) {
let textarea;
let result;
let report = {
report: {
datetime: "<?php echo $request_datetime ?>",
ip: "<?php echo $request_ip ?>",
id: "<?php echo $request_id ?>"
}
};
string = JSON.stringify(report)
try {
textarea = document.createElement('textarea');
textarea.setAttribute('readonly', true);
textarea.setAttribute('contenteditable', true);
textarea.style.position = 'fixed'; // prevent scroll from jumping to the bottom when focus is set.
textarea.value = string;
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
const range = document.createRange();
range.selectNodeContents(textarea);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
textarea.setSelectionRange(0, textarea.value.length);
result = document.execCommand('copy');
} catch (err) {
console.error(err);
result = null;
} finally {
document.body.removeChild(textarea);
}
// manual copy fallback using prompt
if (!result) {
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
const copyHotkey = isMac ? '⌘C' : 'CTRL+C';
result = prompt(`Press ${copyHotkey}`, string); // eslint-disable-line no-alert
if (!result) {
return false;
}
}
return true;
}
</script>
<div id="captcha-holder">
<div id="captcha_root" class="captcha-root">
<div class="captcha-wrap">
<div class="box">
<div class="captcha-header">
<div class="captcha-header-text">
Мы хотим убедиться, что имеем дело именно с вами, а не с ботом.
<br> Пожалуйста, пройдите проверку, чтобы получить доступ к сайту.
</div>
<div class="captcha-header-info-box">
<div>
<div class="captcha-header-span">
<?php echo $request_datetime ?>
</div>
<div class="captcha-header-label">
Ваш IP:
<span class="captcha-header-span"> <?php echo $request_ip ?></span>
</div>
<div class="captcha-header-label">
ID запроса:
<span class="captcha-header-span"><?php echo $request_id ?></span>
</div>
</div>
<div>
<button class="button-copy" onclick="copyToClipboard()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 20H8C7.20435 20 6.44129 19.6839 5.87868 19.1213C5.31607 18.5587 5 17.7956 5 17V7C5 6.73478 4.89464 6.48043 4.70711 6.29289C4.51957 6.10536 4.26522 6 4 6C3.73478 6 3.48043 6.10536 3.29289 6.29289C3.10536 6.48043 3 6.73478 3 7V17C3 18.3261 3.52678 19.5979 4.46447 20.5355C5.40215 21.4732 6.67392 22 8 22H16C16.2652 22 16.5196 21.8946 16.7071 21.7071C16.8946 21.5196 17 21.2652 17 21C17 20.7348 16.8946 20.4804 16.7071 20.2929C16.5196 20.1054 16.2652 20 16 20ZM21 8.94C20.9896 8.84813 20.9695 8.75763 20.94 8.67V8.58C20.8919 8.47718 20.8278 8.38267 20.75 8.3L14.75 2.3C14.6673 2.22222 14.5728 2.15808 14.47 2.11H14.38L14.06 2H10C9.20435 2 8.44129 2.31607 7.87868 2.87868C7.31607 3.44129 7 4.20435 7 5V15C7 15.7956 7.31607 16.5587 7.87868 17.1213C8.44129 17.6839 9.20435 18 10 18H18C18.7956 18 19.5587 17.6839 20.1213 17.1213C20.6839 16.5587 21 15.7956 21 15V9C21 9 21 9 21 8.94ZM15 5.41L17.59 8H16C15.7348 8 15.4804 7.89464 15.2929 7.70711C15.1054 7.51957 15 7.26522 15 7V5.41ZM19 15C19 15.2652 18.8946 15.5196 18.7071 15.7071C18.5196 15.8946 18.2652 16 18 16H10C9.73478 16 9.48043 15.8946 9.29289 15.7071C9.10536 15.5196 9 15.2652 9 15V5C9 4.73478 9.10536 4.48043 9.29289 4.29289C9.48043 4.10536 9.73478 4 10 4H13V7C13 7.79565 13.3161 8.55871 13.8787 9.12132C14.4413 9.68393 15.2044 10 16 10H19V15Z" fill="#7A7A7A"/>
</svg>
</button>
</div>
</div>
</div>
<div class="captcha" id="id_captcha_loaded">
<div class="captcha-title">
Разверните картинку вертикально
</div>
<div class="captcha-main">
<div class="captcha-wrap">
<div class="captcha-image" style="--size-img-margin: 30px">
<div class="captcha-img" style="--size-img: 152px">
<!-- Для шаблона-->
<svg width="152" height="152" xmlns="http://www.w3.org/2000/svg">
<circle cx="76" cy="76" r="76" fill="#D3D3D3" />
</svg>
<!-- <img src="./sp_rotated_captcha/get_image.php">-->
</div>
<div class="captcha-coordinate"></div>
</div>
</div>
<div class="captcha-control" style="--size-control: 275px">
<div class="captcha-control-wrap"></div>
<div class="captcha-control-button"><i></i></div>
</div>
</div>
<div class="support-block">
<div class="support-block-title">Зачем потребовалась эта проверка?</div>
<div class="support-block-subtitle">Что-то в поведении вашего браузера привлекло наше внимание.</div>
<div class="support-block-dsc">Возможные причины:</div>
<div class="support-block-list">
<div class="support-block-span">
<span>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.49922 8.10078L2.39922 6.00078L1.69922 6.70078L4.49922 9.50078L10.4992 3.50078L9.79922 2.80078L4.49922 8.10078Z" fill="black" fill-opacity="0.87"/>
</svg>
</span>
Вы просматриваете страницы и кликаете со скоростью, намного превышающую ожидаемую от человека
</div>
<div class="support-block-span">
<span>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.49922 8.10078L2.39922 6.00078L1.69922 6.70078L4.49922 9.50078L10.4992 3.50078L9.79922 2.80078L4.49922 8.10078Z" fill="black" fill-opacity="0.87"/>
</svg>
</span>
Что-то мешает работе javascript в вашем браузере
</div>
<div class="support-block-span">
<span>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.49922 8.10078L2.39922 6.00078L1.69922 6.70078L4.49922 9.50078L10.4992 3.50078L9.79922 2.80078L4.49922 8.10078Z" fill="black" fill-opacity="0.87"/>
</svg>
</span>
Ваше поведение похоже на поведение автоматизированных систем
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
<script language="JavaScript" type="text/javascript">
let myCaptcha = new Captcha();
</script>
</body>
</html>Шаг 2. Измените страницу по своему вкусу.
Оформите страницу в стиле своей компании, изменив и дополнив исходный код. Соблюдайте требования:
-
Формат файла HTML
-
Размер не больше 400 КБ
-
Нельзя менять структуру шаблона, id элементов и имена классов
-
Можно менять CSS и классы, тексты, графику и добавлять собственные блоки и JS-код
-
Файл не должен содержать внешних зависимостей
Если через редактированием html не удастся добиться нужного дизайна, вы можете редактировать стили отдельно в style.css. Шаблон:
Открыть шаблон
captcha {
position: relative;
width: var(--size-width);
padding: 20px 15px 25px;
text-align: center;
background: #fff;
}
.captcha .captcha-title h2 {
font-size: 14px;
line-height: 14px;
color: #b8b8b8;
padding-bottom: 10px;
}
.captcha .captcha-title p {
font-size: 18px;
line-height: 24px;
color: #1f1f1f;
}
.captcha-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.captcha-image {
position: relative;
overflow: hidden;
margin: var(--size-img-margin) auto;
}
.captcha-img {
position: relative;
z-index: 999;
width: var(--size-img);
height: var(--size-img);
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f5f5f5;
}
.captcha-img img {
width: 100%;
height: 100%;
pointer-events: none;
border: 0;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
-webkit-animation: fadeIn 0.8s forwards;
animation: fadeIn 0.8s forwards;
}
.captcha-img.captcha-loading img {
display: none;
}
.captcha-img .captcha-loader {
display: none;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.captcha-img.captcha-loading .captcha-loader {
display: flex
}
.captcha-coordinate {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcoAAAHLBAMAAAC67sVKAAAAG1BMVEUAAAD////////////////////////////////rTT7CAAAACXRSTlMAzGcNwPRatBpQE/jnAAACVElEQVR42u3asU3DUBSG0ShZgBsxAO9NkMILBCagSI+yAg0lo1PYCZZoiW3de05DiT7Br2sHdjsA8viuEHn4rFC5P1aoHJ5PBSpbvBSY5TneCswyosAwh4gCw2wR+Yd5OEfkH+Y+osAwh4gCw2wR+Yd5OEfkH+Y+osAwh7Ey+TDHWSYf5jTL5MOcZpl8mMOtMvUwb7NMPcz7LFMP8z7L1MMcfisTD/N3lomHOZtl4mHOZpl4mMO8Mu0w57PMO8xr7733iGPvvfeP1K8lEU+7/GpUAoB7qVKlSpUqAcC9VKlSpUqV3kkAwL1UqVKlSpUA4F6qVKlSpUrvJADgXqpUqVKlSgBwL1WqVKlSpXcSAHAvVapUqVIlALiXKlWqVKkSAPBUoFKlSpUqAcC9VKlSpUqVAICnApUqVapUCQDupUqVKlWqBAA8FahUWbTyeqpQ2V5PFSpj/czHa1Ehs0WFzBYVMltUyBwrs2dOlckzb5UrZi5yL1fPXLTynhnjt13sy+Xy/vhv9CczeeWUmb0yvvwsc+0y871M/WDQKkRu4dnHc6x3Eu+X2/usYKGn9ZV/kstUrv3rWuPzWJ+t/5MafyfZAP+7BQDupUqVKlWqBAD3UqVKlSpVAgCeClSqVKlSJQC4lypVqlSpEgDwVKBSpUqVKgHAvVSpUqVKlQCApwKVKlWqVAkA7qVKlSpVqgQA7yQqVapUqVIlALiXKlWqVKkSALyTqFSpUqVKlQDgXqpUqVKlSgDwTqJSpUqVKlUCgHupUqVKlSoBwL1UqVKlSpUqN+YHG9iGwKYOVR0AAAAASUVORK5CYII=);
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.captcha-fail .captcha-coordinate {
display: none !important;
}
.captcha-control {
position: relative;
width: var(--size-control);
height: 50px;
margin: 0 auto;
}
.captcha-control-wrap,
.captcha-control-button {
position: absolute;
top: 0;
height: 100%;
-webkit-border-radius: 100px;
border-radius: 100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.captcha-control-wrap {
left: 0;
width: 100%;
background: #f5f5f5;
overflow: hidden;
}
.captcha-control-button {
position: absolute;
width: 50px;
background: #fff;
cursor: pointer;
cursor: var(--cursor-pointer);
-webkit-box-shadow: 0 21px 52px 0 rgba(82,82,82,.2);
box-shadow: 0 21px 52px 0 rgba(82,82,82,.2);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
}
.captcha-control-button i {
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 28px;
margin-left: -14px;
margin-top: -14px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 1024 1024" version="1.1"><path fill="%23444444" d="M384 896a32 32 0 0 1-32-32V160a32 32 0 0 1 64 0v704a32 32 0 0 1-32 32z m257.056 0.128a32 32 0 0 1-32-32v-704a32 32 0 1 1 64 0v704a32 32 0 0 1-32 32zM864 736a32 32 0 0 1-32-32V320a32 32 0 1 1 64 0v384a32 32 0 0 1-32 32zM160 736a32 32 0 0 1-32-32V320a32 32 0 0 1 64 0v384a32 32 0 0 1-32 32z"></path></svg>'); -webkit-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.captcha-fail .captcha-control-button {
border: 1px solid #f33;
background: #f33
}
.captcha-control-button.captcha-button-active {
color: #fff;
background: var(--theme);
}
.captcha-control-button.captcha-button-active i,
.captcha-fail .captcha-control-button i {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 1024 1024" version="1.1"><path fill="%23ffffff" d="M384 896a32 32 0 0 1-32-32V160a32 32 0 0 1 64 0v704a32 32 0 0 1-32 32z m257.056 0.128a32 32 0 0 1-32-32v-704a32 32 0 1 1 64 0v704a32 32 0 0 1-32 32zM864 736a32 32 0 0 1-32-32V320a32 32 0 1 1 64 0v384a32 32 0 0 1-32 32zM160 736a32 32 0 0 1-32-32V320a32 32 0 0 1 64 0v384a32 32 0 0 1-32 32z"></path></svg>');
}
/* state */
.captcha-image .captcha-state {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: rgba(0,0,0,0.7);
transform: translate(0, 0);
-webkit-animation: fadeIn 0.3s forwards;
animation: fadeIn 0.3s forwards;
}
.captcha-image .captcha-state .captcha-state-icon-fail,
.captcha-image .captcha-state .captcha-state-icon-success {
display: none;
}
.captcha-success .captcha-image .captcha-state,
.captcha-fail .captcha-image .captcha-state,
.captcha-fail .captcha-image .captcha-state .captcha-state-icon-fail,
.captcha-success .captcha-image .captcha-state .captcha-state-icon-success {
display: block;
}
/* fade anim */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* fail anim */
@-webkit-keyframes horizontal {
0% {
-webkit-transform: translate(0px,0);
-ms-transform: translate(0px,0);
transform: translate(0px,0)
}
10%,30%,50%,70%,90% {
-webkit-transform: translate(-1px,0);
transform: translate(-1px,0)
}
20%,40%,60%,80% {
-webkit-transform: translate(1px,0);
transform: translate(1px,0)
}
100% {
-webkit-transform: translate(0px,0);
transform: translate(0px,0)
}
}
@keyframes horizontal {
0% {
-webkit-transform: translate(0px,0);
transform: translate(0px,0)
}
10%,30%,50%,70%,90% {
-webkit-transform: translate(-1px,0);
transform: translate(-1px,0)
}
20%,40%,60%,80% {
-webkit-transform: translate(1px,0);
transform: translate(1px,0)
}
100% {
-webkit-transform: translate(0px,0);
transform: translate(0px,0)
}
}
.captcha-control-horizontal {
-webkit-animation: horizontal .6s .2s ease both;
-moz-animation: horizontal .6s .2s ease both;
animation: horizontal .6s .2s ease both
}
/* success timer progress */
.captcha .captcha-timer-progress-bar-wrap {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 4px;
overflow: hidden;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.captcha .captcha-timer-progress-bar {
width: 100%;
height: 4px;
background-color: var(--progress-bar-color);
}
@media only screen and (max-width:400px) { }
Рекомендуем для улучшения пользовательского опыта добавить на страницу:
-
Информацию о домене, на котором произошла блокировка
-
Контактную информацию для связи
-
Напоминание, что дополнительная проверка может быть вызвана использованием VPN/proxy или расширениями к браузеру (например, AdBlock)
Шаг 3. Напишите в техническую поддержку или своему персональному менеджеру.
В сообщении укажите, что хотите использовать CAPTCHA c картинкой и приложите:
-
(Обязательно) созданный HTML-файл
-
(Не обязательно) отредактированный файл style.css — если использовали его для своего дизайна
Имейл нашей поддержки: cybert@servicepipe.ru.
Шаг 4. Дождитесь подтверждения.
Мы сообщим, что страница успешно добавлена. С этого момента пользователи будут видеть CAPTCHA с вашим дизайном.