Présentation algorithmes de hashage

Ces deux algorithmes de hachage (il en existe d’autres) permettent de calculer l’empreinte d’une chaine de caractère de façon à en cacher son contenu.
MD5('loicmorvan.fr') = 53a021aa58fe4ace1d1dcaa3cd94ef59
SHA1('loicmorvan.fr') = d746fa906c2e6da62ab3690cc4115d5f4dca5a50

De manière générale, ses algorithmes ne sont pas réversibles. J’en entends déjà certains d’entre vous crier au scandale ou se demander comment ils vont vérifier un mot de passe. Simple ! Vous vérifiez que les hashs correspondent : par exemple, vous vérifiez que :

md5(mot_de_passe_recu) = mot_de_passe_en_base_deja_hashe_avec_md5

Il faut tout de même savoir que tous ses algorithmes de hashage sont vulnérables. Il existe en effet de nombreuses tables de hashage pré-calculées (ou tables de correspondances) grâce auxquelles on peut retrouver la valeur initiale d’un hash pour les chaines les plus courantes. De même, plus la chaine est chiffrée sur un grand nombre de caractères hexadécimaux, moins il existe de risque de collisions (c’est à dire plusieurs chaines différentes qui auront la même valeur de hashage).
SHA256('loicmorvan.fr') = 13b3f824aaabf403a7562b686070492b4e54ca4c42b291d558b78aae90d2d758
SHA512('loicmorvan.fr') = c94c4ed304f41c6667807beb90e5d629e9d5[...]e2d76f2d0d12b16bbbdc6e8f5660ee451f8
...

Bref, tout ça nous amène à la question :

Que choisir entre MD5, SHA-1 ou d’autres ?

Pour ma part, j’ai opté depuis longtemps pour l’algorithme MD5, sans vraiment y faire réfléchir jusqu’à la semaine dernière où avec un collègue, on s’est posé la question : est ce que ca joue sur les performances ? J’ai cherché des réponses sans en trouver réellement sur le net et du coup, j’ai fait mon propre bench… En voici les résultats :

Résultats

Temps total pour 1 000 000 d’appels (moyenne sur plusieurs exécutions) :

• MD5 : 1.07 secondes
• SHA-1 : 1.28 secondes

Pour information, il existe également en PHP la fonction hash faisant office de surcouche pour les fonctions md5 et sha1, mais permettant d’exécuter d’autres algorithmes de hashage tels que SHA-256, HAVAL160,4… Le passage par cette fonction pour le calcul des empreintes MD5 et SHA1 engendre une perte de temps de l’ordre de 30%.

Code du test

Voici le code qui m’a servi de test. Il a été exécuté sur un serveur dédié fonctionnant sous Linux / Gentoo, Apache2 et PHP 5.2.

$nb = 1000000;

echo ‘Nombre de tests à chaque fois : ‘.$nb;

$refString = ‘http://www.loicmorvan.fr’;

$string = $refString;
$time=microtime(1);
for ($i=0;$i<$nb;$i++) $string = hash(‘md5′, $string.$i);
echo microtime(1)-$time,’: hash/md5′;

$string = $refString;
$time=microtime(1);
for ($i=0;$i<$nb;$i++) $string = md5($string.$i);
echo microtime(1)-$time,’: md5′;

$string = $refString;
$time=microtime(1);
for ($i=0;$i<$nb;$i++) $string = hash(’sha1′, $string.$i);
echo microtime(1)-$time,’: hash/sha1′;

$string = $refString;
$time=microtime(1);
for ($i=0;$i<$nb;$i++) $string = sha1($string.$i);
echo microtime(1)-$time,’: sha1′;

Conclusion

La différence de temps entre ces deux fonctions est tout d’environ 20% ce qui est tout de même important, même si on fait rarement un million d’appels consécutifs et le risque de collisions étant déjà extrêmement faible en MD5 (1 chance sur 3*10^38), je ne peux que vous conseiller l’emploi de la fonction md5 par rapport à la fonction sha1.

En savoir plus :

1. Libération mémoire cache Linux Libérer de la mémoire cache, ca peut être utile pour...
2. Microsoft TechDays 2009, j’y étais ! Pour la première fois, j’ai eu l’occasion cette année d’assister...
3. .Net adapté pour les sites Internet personnels ? C’est la question que je me suis récemment posée et...

La plupart de ces remarques sont applicables par extension au langage Javascript et même à tout langage de programmation afin d’en optimiser les performances ou d’en faciliter la lecture.
jQuery : Les bonnes pratiques.

En complément de cet article, je rajouterai un lien vers le site de Sébastien Derrey sur lequel vous pourrez trouver de nombreux exemples commentés et en Français relatifs à l’utilisation de jQuery.
jQuery : Framework Javascript.

En savoir plus :

1. Calendrier jQuery Dans la famille ressources utiles, je demande le calendrier Javascript....
2. Le webdesign léger illustré Avec beaucoup de retard, je vous relaye ce guide que j’ai...
3. Popups modales Javascript : le fer de lance du web2.0 Que celui qui n’a jamais vu de popups modales lui...

L’article retrace les 5 étapes à effectuer pour être sûr de réussir votre migration de WordPress :

• Etape 1 : Sauvegarder les Tables de la Base de Données et les Fichiers y compris .htaccess
• Etape 2 : Désactiver les Plugins
• Etape 3 : Ecraser les Fichiers
• Etape 4 : Exécuter le Script de Mise à Jour
• Etape 5 : Réactiver les Plugins un par un

En suivant ce tutoriel, vous comprendrez comment se passe le processus de mise à jour automatique, mais surtout vous pourrez en cas d’incompatibilité de la nouvelle version de WordPress revenir simplement à votre ancienne installation.

Lien vers le tutoriel de mise à jour de WordPress.

En savoir plus :

1. Mise à jour de Wordpress en version 2.8.4 Il était temps de faire cette mise à jour… J’étais...
2. Mise à jour du blog WordPress en version 2.8 et erreur 500 Ca fait quelques temps que la mise à jour est...
3. Wordpress 2.8 arrive Encore nouveau dans le monde Wordpress, je ne pensais pas...

Calendrier jquery

Il dispose de nombreuses options telles que la possibilité d’interdire la saisie de certaines dates, celle de préselectionner une date ou de choisir celle du jour… Il supporte aussi un grand nombre de format de dates, dont le format français jj/mm/aaaa qui nous intéresse plus particulièrement. Un grand nombre classes CSS permettent également de l’adapter aisément au look de votre site.

Plutôt que de longs discours, voici le lien vers un calendrier développé en Javascript, utilisant le framework jQuery, très simple à mettre en place.

Lien : http://jqueryui.com/demos/datepicker/

PS : Pour informations, ce calendrier a également été utilisé sur aviresto.com dans la partie organisation de sortie au restaurant.

En savoir plus :

1. Bonnes pratiques jQuery Voici un article très intéressant retraçant les bonnes pratiques du...
2. Extensions Firefox pour vos développements web 2.0 Je ne sais pas pour vous, mais personnellement, je...
3. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...

Mais voilà, pourquoi concevoir un nouveau guide de restaurants, alors qu’il en existe déjà un bon nombre ? Il y a déjà beaucoup de sites Internet où il est possible de rechercher un restaurant proche de chez soi ou sur lequel on peut déposer un avis sur un restaurant !

aviresto.com n’apporte surement pas la solution idéale, mais une nouvelle approche communautaire qui apporte des nouveautés sur les points suivants, accessibles à tous, inscrits ou non :

• dépôt d’avis sur un restaurant ouvert à tous,
• ajout de restaurant pour tous,
• possibilité de suivre les avis concernant un restaurant en particulier via des flux RSS.

Mais là où aviresto.com va un peu plus loin et se démarque de la concurrence, c’est sur les aspects communautaires. En effet, aviresto.com intègre un micro réseau social permettant à tous les inscrits de :

• gérer un réseau d’amis,
• suivre les commentaires déposés par ses amis en recevant une notification par email,
• mettre à jour les fiches des différents restaurants afin de garantir des données à jour,
• publier automatiquement ses avis sur le réseau Twitter…

De plus, chaque membre dispose d’une page propre qui recense les restaurants qu’il a suggérés, les commentaires déposés, ses amis… (voici ma page personnelle à titre d’exemple).

aviresto.com recense pour l’instant plus de 7 200 restaurants en France et ce nombre croît de jour en jour. L’objectif étant d’atteindre les 20 000 établissements à la fin du mois d’août. Parallèlement à cet enrichissement de la base de restaurants, de nombreuses évolutions sont également prévues afin de développer au mieux le côté communautaire.

Pour information et pour les plus techniques d’entre vous, tout le site a été conçu sur  base de WordPress 2.8. La promotion et le référencement du site, bien que pensés avant et pendant la phase de développement, vont maintenant pouvoir vraiment commencer.

Je vous laisse maintenant découvrir le site aviresto.com. Tous vos commentaires sur le site, son design et ses fonctionnalités sont les bienvenus.

En savoir plus :

1. Intérêt de Facebook Connect… Cet article n’éngage que le guide de restaurants http://www.aviresto.com mais...
2. Calendrier jQuery Dans la famille ressources utiles, je demande le calendrier Javascript....
3. Twitter ? #FollowFriday ? #kezako ? C’est une pratique courante sur le réseau Twitter qui a...

Je vous dévoilerai le projet ultérieurement, mais il s’agit d’un site Internet dont le développement sera fini d’ici là fin de semaine. La phase de test pourra donc commencer à ce moment.

L’expérience vous fait peur ? Ne craigniez rien, je n’attends de vous qu’une petite revue du site et de son ergonomie, qu’un petit test des fonctionnalités et si possible un petit rapport sur les points à ajouter et à améliorer.

Si vous voulez participer à ce test, merci de laisser un commentaire à ce sujet avec un email valide et je vous recontacterai rapidement. Le nombre de places est limité, alors dépêchez-vous…

En savoir plus :

1. Bing, moteur de recherche de Microsoft, en version beta Initialement annoncé pour le 2 juin, Bing, le nouveau et...
2. Le nouveau moteur de recherche de Microsoft La nouvellese fait de plus en pressante sur Internet ces...
3. Testez vos connaissances en référencement Et voici un petit quiz qui va vous intéresser !...

Dom Inspector (version 2.0.3)

Dom Inspector est une extension qui vous permettra de voir le contenu de votre page sous forme d’arbre HTML comme le montre l’exemple suivant.

Cette fonctionnalité s’avère pratique mais pas autant que celle nommée « Display Element Information » présente au sein de l’extension Web Developper détaillée juste après.

Web Developer (version 1.1.6)

Je pense qu’il s’agit de l’extension la plus intéressante de ce panel. Elle permet de retrouver des références à des images cassées, de désactiver une ou plusieurs feuilles de style CSS, la gestion des cookies, l’exécution de Javascript.

Il est également possible d’éditer une feuille de style directement depuis le navigateur pour tester rapidement des changement ou bien de retrouver facilement les styles d’un élément particulier avec l’option « Display Element Information » depuis le menu « Information ». Une autre fonctionnalité intéressante est la retaille de la fenêtre aux dimensions standards (800×600, 1024×768….) pour vérifier la compatibilité de votre site.

Firebug (version 1.33)

Firebug possède certaines fonctionnalités similaires au plugin Web Developper, mais la fonctionnalité la plus intéressante est sans aucun doute la console permettant d’analyser tous les appels HTTP effectués depuis une page. Cela permet de débugger très facilement toute intégration d’AJAX au sein de votre site web.

Cette extension permet aussi d’analyser les temps de chargement de vos ressources externes (scripts javascript, feuilles de style, images…).

IE Tab (version1.5.2)

Comme je vous l’avais dit dans un précédent post, ce plugin est utile et vous permettra la navigation de votre site internet sous Internet Explorer tout en restant dans un onglet Firefox. Quel avantage par rapport à un Internet Explorer standard ? Juste un clic sur le plugin et le rendu de la page courante s’opère avec Firefox… imaginez un peu le temps gagné !

Téléchargement des extensions

• Dom Inspector
• Web Developer
• Firebug
• IE Tab

Vous avez des plugins à conseiller ? Laissez un commentaire sur cet article et dites-nous tous vos secrets…

En savoir plus :

1. Outils de tests multi-navigateurs Suite à un article paru récemment sur ce blog concernant...
2. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
3. Calendrier jQuery Dans la famille ressources utiles, je demande le calendrier Javascript....

En tout cas, moi j’aime ! Je trouve que ça a tendance à alléger le design tout en s’intégrant bien et surtout cela améliore l’ergonomie.
En voici un bel exemple d’utilisation, capturé sur le site maville.com, où en plus de la bonne intégration, la popup est bien travaillée et complète.

En plus, du point de vue du développement, ces popups modales s’intègrent en général très facilement et il existe de nombreuses ressources adaptées à différents cas d’utilisation :

• LightBox : il s’agit sûrement du plus connu de ces systèmes. Il ne permet cependant d’afficher que des images. L’avantage de ce script est qu’il bénéficie d’un nombre important d’effets de chargement et de transition entre images…
• ThickBox : ThickBox est une « version étendue de LightBox » qui permet pour sa part d’afficher de façon modale des formulaires, des iframes….
• il en existe encore de nombreux autres tels que : HighSlide JS, SlimBox, Sexy Lightbox, ClearBox, VideoBox, ModalBox, Lightview…

Pour finir, je vous laisse cet article intéressant qui recense 8 de ces systèmes, tous basés sur du Javascript : 8 popups modales en Javascript

Liens :
8 popups modales en Javascript
MaVille.com

En savoir plus :

1. Le webmaster : le mouton à 5 pattes du web2.0 Voici un article intéressant que je voulais partager avec vous...
2. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
3. Exécution Javascript sur le chargement d’une page Comment exécuter plusieurs scripts Javascript au chargement d’une page ?...

La présentation qui suit recense quelques-unes des bonnes pratiques à mettre en oeuvre. Il n’y a pas grand choses d’autres à ajouter et je vous laisse découvrir ces bonnes pratiques résumées dans la présentation ci-dessous (un peu déjantée parfois).

Si, j’allais oublié, je rajouterai dans les bonnes pratiques du web design léger de ne pas utiliser le langage .Net, très verbeux et qui ne respecte que peu de standards dans le code généré.

Article original : beewareblog.com

En savoir plus :

1. Bonnes pratiques jQuery Voici un article très intéressant retraçant les bonnes pratiques du...
2. Comment réaliser un design web 2.0 ? Je me permets de relayer ici un article publié hier...
3. 5 étapes pour une vente facile Je ne me suis pas foulé et je reprends tel...

C’est une revue plutôt intéressante qui traite bien entendu de design web, mais qui ne se restreint pas aux côtés artistiques et aborde le sujet sensible de l’ergonomie. On retrouve dans ce numéro de la revue Web Design une interview de Keren Lerner, spécialiste en communcation visuelle qui y va de son petit conseil.

Pour elle, en effet, il n’est pas judicieux de proposer plus de 7 liens par groupe de liens de navigations, au risque que l’internaute ne trouve pas son contenu rapidement.

Web Design : Combien de liens de navigations devrait-il y avoir ?

Keren Lerner : C’est toujours un point de débat. Je recommande un maximum de sept liens dans n’importe quelle zone de liens. Vous pouvez avoir les liens de navigation en haut ou à gauche mais si  vous en avez huit ou plus, cela a tendance à avoir l’air encombré. [...] Cela  rend le site fouillis et lui fait donc perdre en crédibilité. [...]

WD : Si nous ne pouvons avoir que sept liens de navigations, comment faisons-nous pour inclure toute la navigation dont nous avons besoin ?

KL : Vous n’avez pas besoinn de mettre la totalité de la navigation dans le menu principal, elle peut-être mis en valeur ailleurs. Votre page d’accueil et les autres pages de renvoi vous permettront d’inclure vos liens de navigation principaux[...]

C’est un point sur lequel je suis maintenant plutôt d’accord par rapport à l’ergonomie et référencement, car cette méthode permettre d’alléger le design de la page et accordera du point de vue des moteurs de recherche, une importance hiérarchique et une structuration de l’information.

Et vous que pensez-vous de cette règle des 7 liens de navigation ?

PS : J’en connais un qui va être content en lisant cet article. Il va enfin pouvoir récupérer sa revue…

En savoir plus :

1. Le webmaster : le mouton à 5 pattes du web2.0 Voici un article intéressant que je voulais partager avec vous...
2. Le coup de la panne par Google ! Tout le monde en parle depuis le début de la...
3. Le webdesign léger illustré Avec beaucoup de retard, je vous relaye ce guide que j’ai...