127 lines
5.0 KiB
HTML
127 lines
5.0 KiB
HTML
Voici un exemple de code pour un composant de captcha souverain SVG avec verification PHP anti-bot. Ce composant utilisera des classes Tailwind-like pour faciliter la personnalisation du design.
|
|
|
|
**captcha-souverain.html**
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Captcha Souverain</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
|
|
<style>
|
|
.captcha {
|
|
width: 400px;
|
|
height: 200px;
|
|
border: 1px solid #ccc;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.captcha svg {
|
|
height: 100%;
|
|
}
|
|
.captcha .bouton {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 10px;
|
|
}
|
|
.captcha .bouton svg {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="captcha" class="captcha">
|
|
<svg id="svg-capteur" viewBox="0 0 200 200" width="100%" height="100%">
|
|
<?php
|
|
// Génération aléatoire des lignes et des points du captcha
|
|
for ($i = 0; $i < 10; $i++) {
|
|
echo '<line x1="' . rand(10, 190) . '" y1="' . rand(10, 190) . '" x2="' . rand(10, 190) . '" y2="' . rand(10, 190) . '" fill="none" stroke="#000" stroke-width="2" />';
|
|
}
|
|
for ($i = 0; $i < 50; $i++) {
|
|
echo '<circle cx="' . rand(10, 190) . '" cy="' . rand(10, 190) . '" r="2" fill="#000" />';
|
|
}
|
|
?>
|
|
</svg>
|
|
<button id="bouton-refresh" class="bouton"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4c-3.08 0-5.5 2.42-5.5 5.5s2.42 5.5 5.5 5.5 5.5-2.42 5.5-5.5S15.08 4 12 4zm0 14c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg></button>
|
|
</div>
|
|
|
|
<script>
|
|
const boutonRefresh = document.getElementById('bouton-refresh');
|
|
boutonRefresh.addEventListener('click', function() {
|
|
const svg = document.getElementById('svg-capteur');
|
|
svg.innerHTML = "";
|
|
for (let i = 0; i < 10; i++) {
|
|
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
line.setAttribute('x1', Math.random() * 180);
|
|
line.setAttribute('y1', Math.random() * 180);
|
|
line.setAttribute('x2', Math.random() * 180);
|
|
line.setAttribute('y2', Math.random() * 180);
|
|
line.setAttribute('fill', 'none');
|
|
line.setAttribute('stroke', '#000');
|
|
line.setAttribute('stroke-width', 2);
|
|
svg.appendChild(line);
|
|
}
|
|
for (let i = 0; i < 50; i++) {
|
|
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
circle.setAttribute('cx', Math.random() * 180);
|
|
circle.setAttribute('cy', Math.random() * 180);
|
|
circle.setAttribute('r', 2);
|
|
circle.setAttribute('fill', '#000');
|
|
svg.appendChild(circle);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
Il est important de noter que cette mise en œuvre utilise une méthode de generation aléatoire des lignes et des points du captcha, ceci peut s'améliorer pour rendre le code plus secure.
|
|
|
|
La verification PHP anti-bot peut être ajoutée en utilisant des techniques d'anti-bot telles que la génération de challenge pour la vérification du captcha, vérification des champs de formulaire par méthode non-js, etc.
|
|
|
|
Pour la mise en œuvre de la verification PHP anti-bot, il est possible de suivre les étapes suivantes :
|
|
|
|
1. Génération d'un challenge unique pour chaque requête (par exemple : image de référence du captcha)
|
|
2. Vérification que les valeurs saisies par l'utilisateur se trouvent bien sur l'image de référence (par la méthode cv2.findContours et cv2.matchTemplate)
|
|
|
|
Ce sont des étapes complexes qui nécessitent une bonne maîtrise de PHP, d'algorithmie et d'images.
|
|
|
|
Voici un exemple de code PHP pour la mise en œuvre de la verification anti-bot :
|
|
|
|
```php
|
|
<?php
|
|
function verification_captcha($code_formulaire, $codereference_img) {
|
|
// Vérification de la correspondance entre les valeurs saisies et les lignes du captcha
|
|
$src1 = imagecreatefromjpeg($codereference_img);
|
|
$src2 = imagecreatefromjpeg($codereference_img);
|
|
imagefilter($src2, IMG_FILTER_grayscale);
|
|
$result = jaccard_distance($src1, $src2);
|
|
if($result >= 0.9 || ($code_formulaire== "") || ($result <= 0.2) ){
|
|
return true;
|
|
}
|
|
else{
|
|
return false;
|
|
}
|
|
|
|
}
|
|
function jaccard_distance($image1, $image2){
|
|
$src1 = imagecreatefromjpeg($image1);
|
|
$src2 = imagecreatefromjpeg($image2);
|
|
imagefilter($src2, IMG_FILTER_grayscale);
|
|
$tall = imagesy($src1);
|
|
$tall = imagesy($src2);
|
|
$width = imagesx($src1);
|
|
$dist = 0;
|
|
for ($row = 0; $row < $tall; $row++) {
|
|
for ($col = 0; $col < $width; $col++) {
|
|
$distance = jaccard_sim($src1[$row][$col], $src2[$row][$col]); // compare two pixels with jaccard sim
|
|
$dist += $distance;
|
|
}
|
|
}
|
|
$total_pixels = $tall |