Adapter une source javascript dans mon site

**scoubi77** · 07/02/2014, 19h09

Bonsoir à tous,

J'ai récupéré une source qui m'intéresse pour essayer de sécuriser mon livre d'or.
Voici le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>BotBoot</title>
 
    <script type="text/javascript">
    var a = Math.ceil(Math.random() * 10);
    var b = Math.ceil(Math.random() * 10);       
    var c = a + b
    function DrawBotBoot()
    {
        document.write("What is "+ a + " + " + b +"? ");
        document.write("<input id='BotBootInput' type='text' maxlength='2' size='2'/>");
    }    
    function ValidBotBoot(){
        var d = document.getElementById('BotBootInput').value;
        if (d == c) return true;        
        return false;
        }
    </script>
</head>
<body>
 
Are you human?<br />
 
<script type="text/javascript">DrawBotBoot()</script>
<input id="Button1" type="button" value="Check" onclick="alert(ValidBotBoot());"/>
</body>
</html>

Cela fonctionne sans problème sauf que voudrais le transformer un peu de façon à n'avoir une alerte que si le résultat est faux en bloquant l'envoi du message dans mon livre d'or et à l'inverse permettre l'envoi du message sans une alerte comme quoi le résultat est bon.
Voici le code de ma page :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" CONTENT="">
<meta HTTP-EQUIV="IMAGETOOLBAR" content="no" SCROLLING="yes" >
<meta name="keywords" CONTENT="">
<head>
<title>Livre d'or</title>
<script src="jquery.js"></script>
 
<style type="text/css">
 body { 
  background: #000000; 
  color: #000000;
  font-family: Verdana ;
 color:white;
font-size:14px;
    }
</style> 
<style type="text/css">
div.grande 
    { 
 
    width : 70%; 
    } 
p{
  line-height:25px;
}
</style>
 
<?php
if(isset($_POST['nobot'])) {
    // la case est cochée
}
?>
    <script type="text/javascript">
    var a = Math.ceil(Math.random() * 10);
    var b = Math.ceil(Math.random() * 10);       
    var c = a + b
    function DrawBotBoot()
    {
        document.write("What is "+ a + " + " + b +"? ");
        document.write("<input id='BotBootInput' type='text' maxlength='2' size='2'/>");
    }    
    function ValidBotBoot(){
        var d = document.getElementById('BotBootInput').value;
        if (d == c) return true;        
        return false;
        
    }
    </script> 
 
</head>
<body>
 
 
 
<form method=post action=writeguest.php 
onSubmit='if ( this.nom.value.length < 2 ) { return false ;}' >
  <BR><p align="center"><FONT FACE="gabriola" size="9" color="white">titre</FONT></BR><FONT FACE="gabriola" size="6" color="white">Livre d'or </FONT></p></FONT> 
 
<table border="0" align="center"> 
<tr><td><img src="test.jpg"></td><td>
 <Div>
<table>
<tr><td><FONT FACE="monotype corsiva" size="4" color="white">Nom :</FONT></td>
    <td><input type=text name=nom size=25 ></td></tr>
<tr><td><FONT FACE="monotype corsiva" size="4" color="white">Mail :</FONT></td>
    <td><input type=text name=mail size=25 ></td></tr>
<tr><td><FONT FACE="monotupe corsiva" size="4" color="white">Message:</FONT></td><td colspan=1>
        <textarea name=message rows=6 cols=47></textarea>
    </td></tr>
</table>
</Div>
</td><td><img src="livre.jpg"></td></td></tr></table>
<!-- On affiche l'image générée par notre script -->
<script>
 
 
$(document).ready(function(){
 
    $('<div style="text-align:center;"><input type="checkbox" name="nobot" required="true"> Je confirme ne pas être un robot</div>').prependTo($('#maDiv'));
});
 
</script>
 
 
<div style="text-align:center;"><div id="maDiv"></div></div></BR>
<div style="text-align:center;"><script type="text/javascript">DrawBotBoot()</script></div>
 
 
<div style="text-align:center;"><INPUT border=0  src="envoyer.jpg" type=image onclick="alert(ValidBotBoot());" name="sub" value="envoyer" /></div>
</form>
<div style="text-align:center;"><a href="http://index.php"onMouseOver="window.status='';return true"><img src="bfermer.jpg"  BORDER="0" alt=""/></a></div>
<div align="center" ><div class="grande" style="border:3px solid #000000; padding 1px;"><div style="text-align:left;"><FONT FACE="gabriola" size="6" color="white"  >Vos impressions, commentaires:</FONT></div></div>
<div align="center" >
<div class="grande" style="border:3px solid #FFFFFF; padding 3px;"><div style="text-align:left;">
 <?php include("guestbook.txt"); ?></div></div>
</body>
</html>

Merci par avance à tous ceux qui pourront m'apporter un peu d'aide car malgré de très nombreux tests je n'y arrive pas !!!
Amicalement scoubi

**Auteur** · 08/02/2014, 23h04

bonsoir,

plusieurs choses me chagrinent dans ton code

- la méthode document.write() est à bannir !
- je vois une balise <Div> alors que c'est <div> (avec un "d" minuscule) .
- des balises <FONT> sont pour du HTML 4 or d'après ton DOCTYPE tu es en HTML 5, utilise le CSS.
- des balises <BR> alors que c'est <br/>.
-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
form method=post action=writeguest.php 
onSubmit='if ( this.nom.value.length < 2 ) { return false ;}' >

les événements s'écrivent en minuscules : onclick, onload, onsubmit, etc.
les valeurs des attributs d'une balise HTML doivent s'écrire entre guillemets : method="post", action="writeguest.php".
-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<meta name="description" CONTENT="">
<meta HTTP-EQUIV="IMAGETOOLBAR" content="no" SCROLLING="yes" >

les valeurs et attributs d'une balise HTML doivent s'écrire en minuscules.

**scoubi77** · 09/02/2014, 14h26

Bonjour et merci pour toutes ces précisions que je vais tacher de corriger, je suis débutant et je fait des erreurs.

J'ai fait des recherches concernant document.write()

Le comportement de cette fonction est problématique. Il n'est pas constant et induit les débutants en erreur. Lors du chargement d'une page HTML cette fonction ajoute la chaine passée en paramètre au contenu. Une fois la page chargée, cette fonction remplace totalement le HTML de la page par la chaine en paramètre.

On a vu plus haut que le chargement d'une page HTML est séquentiel, c'est un exercice périlleux pour le navigateur que de rajouter du contenu à une page en train de charger. Si c'est périlleux, les bugs ne sont pas loin. Pour éviter les comportements « étranges » il ne faut pas utiliser document.write() !

L'alternative est — encore une fois — d'utiliser les standards et plus précisément le DOM. Si on veut rajouter du contenu à une page HTML le plus simple est de placer un élément vide à l'endroit voulu et de le remplir une fois la page chargée. Si l'on applique les recommandations sur la place de <script> , c'est simple et direct :

Etant attaqué depuis un mois par un robot spameur je cherche des solutions pour supprimer tous les messages ( environs 50 par heure !!! ), j'ai ajouté en jquery pourtant une case à cocher que ce robot passe sans soucis !!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
if(isset($_POST['nobot'])) {
    // la case est cochée
}
?>
 
<script>
 
 
$(document).ready(function(){
 
    $('<div style="text-align:center;"><input type="checkbox" name="nobot" required="true"> Je confirme ne pas être un robot</div>').prependTo($('#maDiv'));
});
 
</script>
 
 
<div style="text-align:center;"><div id="maDiv"></div></div><br/>

voici un message par exemple ( j'ai modifié les url pour les rendre inactives ):

azart11 ngmrb@szer.fr
le: 09/02/2014 à 10:32:02
îíëàéí êàçèíî ðóëåòêà îáûãðàòü <a h r e f= hhhh://kingteingria.hotbox.ru/page1848. >ñëîò àâòîìàò blackbird èãðàòü îíëàéí áåñïëàòíî</a> êàçèíî ðóëåòêà ìèíèìàëüíàÿ ñòàâêà <a h r e f= [url]hhhh://kinngria.hotbox.ru/page858.[/u rl] >èãðîâûå àâòîìàòû áåçðåãèñòðàöèè áåçïëàòíî</a> èãðà îíëàéí áåñïëàòíî êîðîëü ïîêåðà, îíëàéí êàçèíî âèí xp <a h r e f= [url]hhhh://kigria.hotbox.ru/page2304.l[/u r l] >èíòåðíåò êàçèíî wm àçàðò</a> êàçèíî êîðîíà ìîñêâà <a h r e f= [url]hhhh://.ru/page1320.l[/u rl] >ìèðîâîé ïîêåð îíëàéí</a>

peux tu m'aider pour adapter ce code à mes besoins ?
Cordialement

Scoubi

**Auteur** · 09/02/2014, 15h23

bonjour,

Si j'ai bien compris ton script tu demandes à l'utilisateur de réaliser une opération arithmétique assez simple et tu poses une question assez basique :

"Etes-vous un humain ?"

Pour sécuriser ton livre d'or tu devrais utiliser un captcha. Sur ce point je ne suis pas en mesure de t'aider car cela se gère au niveau du serveur. En attendant de mettre ce captcha au point tu devrais verrouiller ton livre d'or.

**scoubi77** · 09/02/2014, 15h27

Merci pour ta réponse,

J'ai déjà essayé de mettre un captcha en partant de celui ci http://www.captcha.fr/index.php?langue=fr&page=34 mais sans succès car je n'arrive pas en php après à gérer l'évènement si c'est bon je post si c'est mauvais je stop, il faut donc que j'arrive à modifier cette partie du code qui pourrait m'aider

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if (d == c) return true;        
        return false;

De la façon suivante :
si l'addition est bonne on envoi le formulaire, si elle est fausse message et on n'envoi pas le formulaire tant que l'addition n'est pas bonne.
Peux tu m'aider ?
Cordialement
Scoubi

**Auteur** · 09/02/2014, 15h32

Envoyé par scoubi77

si l'addition est bonne on envoi le formulaire, si elle est fausse message et on n'envoi pas le formulaire tant que l'addition n'est pas bonne.
Peux tu m'aider ?

sur ce point la FAQ javascript peut t'aider :
http://javascript.developpez.com/faq...s#ControleForm

**scoubi77** · 09/02/2014, 15h46

Merci à toi, j'ai déjà regardé cela avant de poster

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
if (d == c) {
 
   return true;
     }
     alert ('Le résultat est faux !');
     return false;
      }

mais sans succès car même si le résultat est faux le message est quand même posté !!! et j'ai deux message d'alerte l'un pour true et l'autre pour false que je n'arrive pas à supprimer ! d'où ma demande d'aide

**scoubi77** · 09/02/2014, 16h17

C'est bon j'ai trouvé pour supprimer l'alerte du true et false cela venait du bouton

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="text-align:center;"><INPUT border=0  src="envoyer.jpg" type=image onclick="alert(ValidBotBoot());" id="ValidBotBoot" name="ValidBotBoot" value="envoyer" /></div>

j'ai supprimé alert mais il me rest donc le dernier soucis qui est de taille , si le résultat est faux ça envoi quand même le message !!!
Sauf erreur de ma part

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return false;

devrait stopper l'envoi ????
Une idée ?

**Auteur** · 09/02/2014, 17h22

regarde le code HTML de l'exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form action="page.html" method="post" onsubmit="return verification();">

ensuite pour que l'événement onsubmit se déroule normalement tu dois utiliser un input de type submit :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" value="Valider le formulaire" />

sans événement onclick !

**scoubi77** · 09/02/2014, 17h29

donc il faut que je transforme mon bouton image en submit afin de conserver l'image de ce dernier :

J'ai donc transformé mon bouton comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="text-align:center;"><INPUT border=0  src="envoyer.jpg" type=image value="submit" onsubmit="ValidBotBoot();" method="post" id="ValidBotBoot" name="ValidBotBoot"  /></div>

maintenant vrai ou faux ça poste et j'ai plus d'alerte que le résultat est faux !!!

je suis perdu !

**Auteur** · 09/02/2014, 17h38

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<INPUT border=0  type=image Value=submit  >

Non cela ne fonctionnera pas parce que tu n'appliques pas les règles de codage HTML que j'ai données plus haut.

Essaye cet exemple, le formulaire doit être envoyé si tu tapes 42 dans le champ texte :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<form action="page.html" method="post" onsubmit="return verification();">
<!-- les éléments de ton formulaire-->
<input type="text" id="solution"/><br/>
<input type="submit" value="Envoyer">
</form>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function verification()
{
     var e = document.getElementById("solution").value;
     var s = parseInt(e);
 
     if (s == 42) 
     {
         return true;
     }
 
     alert ('Le résultat est faux !');
     return false;
}

**scoubi77** · 09/02/2014, 17h56

Je comprend bien sauf que je n'ai pas le choix que de garder l'image du bouton ! donc j'ai essayé de transformer comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="text-align:center;"><INPUT border=0  src="envoyer.jpg" type=image value="submit" onsubmit="ValidBotBoot();" method="post" id="ValidBotBoot" name="ValidBotBoot"  /></div>

afin d'affecter le submit en value et à la place du onclick="ValidBotBoot();" par onsubmit="ValidBotBoot();"

et j'ai pour le formulaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<form method=post action=writeguest.php 
onSubmit='if ( this.nom.value.length < 2 ) { return false ;}' >

mais devines ça ne marche pas , je suis totalement perdu et je ne comprend plus rien ! je suis au fond de l'impasse ou rien ne ce passe !

**scoubi77** · 09/02/2014, 18h22

Bon j'ai tout recommencé, fait un tour dehors...

J'ai donc supprimé ma vérification si il y a moins de deux caractères en ajoutant comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<form method=post action=writeguest.php 
onSubmit="ValidBotBoot();" >

et j'ai modifié mon bouton comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="text-align:center;"><INPUT border=0  src="envoyer.jpg" type=image value="submit"   /></div>

j'ai bien une alerte si l'addition est fausse mais ça poste quand même !!!

**Auteur** · 09/02/2014, 18h36

Tu n'as pas examiné le code que j'ai posté (message n°11)

**scoubi77** · 09/02/2014, 18h45

Un milliard d'escuses j'avais oublié le " return "

J'ai donc remodifié et ajouté ma vérification des deux caractères en bonus

ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<form method=post action=writeguest.php 
 onSubmit="return ValidBotBoot(); if ( this.nom.value.length < 2 ) { return false ;}  " >

et ça marcheeeeeeeeeeeeeeeeeeeee

un grand merci pour ta patience

Adapter une source javascript dans mon site

JavaScript

Discussions similaires

Partager

Partager