All posts tagged jquery

IE 6 doit mourrir, aidons le un peu

A l’heure ou les sites web sont de plus en plus compliqués, aussi bien au niveau graphique qu’au niveau du code, assurer la compatibilité des sites que l’on développe avec IE 6 est devenu un véritable calvaire. Support des css médiocre (comparé à Safari ou Firefox), performances faiblardes en javascript, … Bref, les développeur web se réjouirons lorsque IE 6 passera sous la barre des 5 % d’utilisation, ou moins.

Pour accélérer un peu le declin d’IE 6, je me suis décidé à afficher un message aux visiteurs de tous les sites que je gère, leur indiquant que le navigateur qu’ils utilisent est obsolète et qu’ils devraient le mettre à jour. Avant de développer quelque chose, je me suis dis que je n’étais surement pas le premier à avoir cette idée et qu’une solution existait peut être déjà. Mon ami Google m’a trouvé l’outils parfait : ie6update.

Il s’agit en fait d’un javascript à placer sur son site, et qui affiche un message si le visiteur utilise IE 6, en prenant l’apparence d’une véritable notification d’IE :

ie6update

Pour l’installer, rien de plus simple. Téléchargez le script, puis placez ce bout de code dans votre page :

<!--[if IE 6]>
	<script type="text/javascript">
		/*Load jQuery if not already loaded*/ if(typeof jQuery == 'undefined'){ document.write("<script type=\"text/javascript\"   src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>"); var __noconflict = true; }
		var IE6UPDATE_OPTIONS = {
			icons_path: "http://static.ie6update.com/hosted/ie6update/images/",
			message: "Votre navigateur n'est pas &agrave; jour, cela repr&eacute;sente un risque, cliquez ici pour le mettre &agrave; jour",
			url: "http://www.microsoft.com/france/windows/internet-explorer/default.aspx"
		}
	</script>
	<script type="text/javascript" src="ie6update/ie6update.js"></script>
<![endif]-->

Le script inclut la librairie Jquery si elle n’est pas présente, puis initialise le script en passant 3 paramètres :

icons_path : le chemin vers les images utilisées par le script (elles peuvent se trouver en local, ou utiliser celles se trouvant sur le serveur d’ie6update)
message : le message à afficher
url : le lien ou sera redirigé le visiteur s’il clique sur le message

Simple et efficace.

Par simplicité, je redirige vers la page de téléchargement d’IE 8. Une meilleure approche consisterait à rediriger vers une page listant les différents navigateur (Firefox, Safari, Chrome, …).

J’ai mis en place ce script sur un site ayant un traffic mensuel d’environ 24 000 visiteurs uniques. IE 6 représente environ 14 % des visites.

ie6stats

Rendez-vous dans quelques mois pour voir si la descente s’accélère. En attendant, je vais l’ajouter sur le maximum de site possible. Et vous ?

Sécuriser un formulaire sans captcha

Eternel problème du développeur web, sécuriser les formulaires qui se trouvent sur un site pour empêcher les robots de soumettrent des formulaires de spam. Jusqu’à aujourd’hui, deux solutions s’offrent à nous pour bloquer ces robots :

  • Utiliser un captcha
  • Utiliser les services d’un filtre antispam, genre Akismet

Je suis personnellement totalement contre les captcha, qui compliquent beaucoup trop la saisie d’un formulaire, qui se doit d’être simple si on veut que le visiteur le remplisse et l’envoi. Les captcha affichent des images de plus en plus compliquées, au point que même un être humain a du mal à identifier les lettres qu’il est censé recopier.
Pour les filtres anti-spam, je n’ai pas pris le temps de tester, peut être est-ce efficace, mais cela fait reposer le bon fonctionnement de votre formulaire sur un service tiers, et ajoute donc des potentialités de pannes.

La solution que j’utilise était jusqu’à présent composée d’une double protection, qui s’est avérée insuffisante, je viens donc d’en ajouter une troisième.

1. Contrôler les champs renvoyés par le formulaire :

Il arrive que les robots ajoutent des champs au formulaire qu’ils renvoient. La solution consiste donc à ne traiter que les formulaires qui ne contiennent que les champs que nous avons défini.
Pour l’exemple, utilisons un formulaire de contact ou l’utilisateur entre son nom, son mail et un message. Le formulaire retournera donc 4 résultats : nom, mail, message, ainsi que la valeur du bouton submit (si le formulaire est envoyé avec un champ input submit et pas un lien).

En php, on définit une liste de champs acceptés :

$whitelist = array('nom', 'mail', 'message', 'envoyer');

Lors de la soumission du formulaire, on contrôle ce qui est retourné :

if(checkWhitelist($whitelist))
{
     // Traitment du formulaire
}

La fonction checkWhitelist retourne false s’il trouve un champ qui ne figure pas dans la whitelist

function checkWhitelist ($list)
{
	foreach ($_POST as $key => $item)
	{
		if (!in_array($key, $list))
		{
			return false;
		}
	}

	return true;
}

2. Placer un token en session

De nombreux robots ne sont pas capable de gérer des cookies. La solution consiste donc à placer un nombre aléatoire dans un champ caché du formulaire, et à stocker ce nombre en session. Une fois que le formulaire est retourné, on vérifie que le nombre retourné par le formulaire est identique au nombre stocké en session. Les robots ne gérant pas les sessions ne retourneront rien, et du coup le formulaire ne sera pas traité.

Au chargement de la page, on génère un token (le paramètre de la fonction est le nom du formulaire) :

$token = generateFormToken('contact_form');

La fonction generateFormToken génère un nombre aléatoire, le stock en session, et le retourne.

function generateFormToken($form)
{
    $token = md5(uniqid(microtime(), true));
    $_SESSION[$form.'_token'] = $token;
    return $token;
}

On place ensuite ce token dans un champ caché du formulaire :

<input type="hidden" name="token" value="<?php echo $token; ?>" />

Lorsque le formulaire est retourné, on vérifie le token :

if(verifyFormToken('contact_form'))
{
    // Traitement du formulaire
}

Fonction verifyFormToken :

function verifyFormToken($form)
{
    if (!isset($_SESSION[$form.'_token']))
    {
        return false;
    }

    if (!isset($_POST['token']))
    {
        return false;
    }

    if ($_SESSION[$form.'_token'] !== $_POST['token'])
    {
        return false;
    }

    return true;
}

3. Changer le contenu d’un champ caché en javascript

Les robots ne remplissent pas les formulaires, ils se contentent d’envoyer directement le contenu du formulaire à l’adresse définie. La troisième solution consiste donc à placer un champ caché dans le formulaire, avec une valeur de 0 (ou autre), et de changer la valeur de ce champ lorsque l’utilisateur saisie son nom (ou autre).

A l’aide de Jquery, on attache une action qui sera déclenchée dès que l’utilisateur placera son curseur dans le champ nom. Cette action va modifier la valeur de notre champ caché (appellé ici « control ») :

$(function(){
	$('#nom').bind('focus', function(){
		$("#control").val('666');
	})
});

Lorsque le formulaire est renvoyé, on vérifie que le champ control a bien la valeur 666 :

if($_POST['control'] == 666)
{
    // Traitement du formulaire
}

Pour résumer, voici le script en entier :

<?php
	session_start();

	function generateFormToken($form)
	{

	    $token = md5(uniqid(microtime(), true));
		$_SESSION[$form.'_token'] = $token;
	   	return $token;
	}

	function verifyFormToken($form)
	{

	    if (!isset($_SESSION[$form.'_token']))
		{
			return false;
	    }

		if (!isset($_POST['token']))
		{
			return false;
	    }

		if ($_SESSION[$form.'_token'] !== $_POST['token'])
		{
			return false;
	    }

		return true;
	}

	function checkWhitelist ($list)
	{
		foreach ($_POST as $key => $item)
		{
			if (!in_array($key, $list))
			{
				return false;
			}
		}

		return true;
	}

	$whitelist = array('nom', 'mail', 'message', 'envoyer', 'control', 'token');

	if(isset($_POST['nom']) && verifyFormToken('contact_form') && checkWhitelist($whitelist) && $_POST['control'] == 666)
	{
		// Traitement du formulaire
	}

	$token = generateFormToken('contact_form');
?>
<!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></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#mail').bind('focus', function(){
				$("#control").val('666');
			});
		});
	</script>
</head>
<body>
	<form action="" method="post" name="contact_form">
		<label for="nom">Nom</label>
		<input type="text" name="nom" id="nom" />
		<label for="mail">Mail</label>
		<input type="text" name="mail" id="mail" />
		<label for="message">Message</label>
		<textarea name="message"></textarea>
		<input type="hidden" name="control" id="control" value="0" />
		<input type="hidden" name="token" value="<?php echo $token; ?>" />
		<input type="submit" name="envoyer" value="Envoyer"
	</form>
</body>
</html>

J’utilise cette solution depuis quelques temps, elle semble efficace. Concernant les deux premières techniques, je les ai trouvé sur un site anglais, mais pas moyen de retrouver l’adresse de ce site ; je l’ajouterai si je la retrouve. Pour la troisième technique, elle pose un problème si le visiteur du site a désactivé le javascript sur son navigateur. A vous de voir si cela est acceptable ou pas.

Si vous utilisez une autre technique, qui soit simple et efficace, n’hésitez pas à en faire part dans les commentaires.

Espionner les visiteurs d’un site avec javascript

Pour un projet, je souhaitais connaître les liens qu’avaient visité les gens sur le site, pour afficher ou pas des informations complémentaires. Ma première idée a été de lister les liens ayant l’état :visited. Ceci est facile avec un petit bout de javascript (j’utilise Jquery, mais cela fonctionne avec n’importe quelle bibliothèque javascript) :

$('a:visited').each(function(){
	console.log($(this).attr("href"));
});

Le petit bout de code ci-dessus affiche dans la console la liste de tous les liens qui ont été visités par l’internaute.

Mais cette technique a une limite de taille : elle ne permet de lister que les liens qui se trouvent effectivement dans la page en cours de consultation. Si on voulait l’utiliser pour vérifier toutes les pages d’un site, il faudrait que chaque page affiche les liens vers toutes les pages du site.

En fouillant sur internet, j’ai trouvé une solution tellement simple que je m’étonne qu’elle ne soit pas plus populaire. J’ai trouvé cette technique sur le blog de David Walsh, technique qu’il nomme Spyjax.

En fait, on peut facilement définir une couleur pour les liens dans une page, et une couleur différente pour les liens qui ont été visités.
La technique consiste donc à insérer des liens dans la page via un javascript, puis de regarder la couleur du lien. Si le code couleur correspond au code que l’on a attribué au liens visités, c’est que l’internaute a visité le site.

Ainsi, non seulement on peut vérifier si le visiteur est allé sur une page précise de son site, mais on peut également vérifier s’il est allé sur n’importe quel autre site, comme le site d’un de ses concurrents par exemple ! Je vous laisse imaginer toutes les applications que cela peut avoir.

Pour récupérer le script, disponible en Jquery et en Mootools, c’est par ici : Spyjax.

Et pour des exemples d’utilisation :

Une page qui vérifie si vous avez consulté des sites pour adultes : http://www.didyouwatchporn.com
Une page qui vérifie si vous avez consulté un des 5 000 sites les plus populaires : http://whattheinternetknowsaboutyou.com