Je rappelle que la propriété text-shadow sert à appliquer un effet sur du texte (ombre, effet glow…) à l’aide d’une ou plusieurs couleurs ainsi que le décalage de l’effet para rapport au texte . Il se trouve que cette propriété est compatible avec la plupart des navigateurs (Internet Explorer comme par hasard ne fait pas partie du lot…) et mais les autres c’est à dire Firefox, Safari, Opera et Chrome réagissent tous de la même manière (preuve tout de même qu’ils suivent le standard W3C).

L’erreur affichée par le validateur W3C est la suivante:

La propriété text-shadow n’existe pas en CSS niveau 2.1. mais existe en : gray 0 2px gray 0 2px

Ici j’avais réglé la propriété à text-shadow : gray 0 2px. L’erreur a l’air de m’indiquer que la syntaxe est fausse (sauf erreur de ma part), syntaxe je tiens à le signaler que j’ai trouvé sur le centre de développement Mozilla (appelé aussi MDC pour Mozilla Developer Center). Je change donc la valeur de ma propriété précédente par celle-ci gray 0 2px gray 0 2px à la place de gray 0 2px.

Après nouvelle vérification à l’aide du validateur, celui me renvoie encore la même erreur mais cette fois ci en m’aiguillant sur une nouvelle valeur: gray 0 2px gray 0 2px gray 0 2px gray 0 2px. Vous l’aurez probablement compris à chaque fois, il rajoute un élément gray 0 2px ça tourne en rond et l’erreur est toujours la.

Après moultes recherches au sujet de la propriété, je suis tombé sur un blog qui affirmait que la propriété ne faisait pas partie de la spécification CSS 2.1 de W3C (la version 2.1 est celle qui est utilisée par défaut pour la validation) et j’ai constaté par moi même qu’aucune référence vers text-shadow n’est présente dans  le document.

La particularité étant que la propriété text-shadow existe en en CSS 2.0 et 3.0 et disparue entre temps avec la version 2.1 oO.

Donc si vous tombez sur une erreur à cause de ça n’oubliez pas de changer le type de profil dans les options supplémentaires du validateur pour éviter de mauvaises surprises…

Bon codage à tous ^^

Aujourd’hui j’ai choisi de réaliser un tutorial dont le but est de créer une simple LightBox. LightBox est une fonctionnalité que beaucoup de personnes ont déjà rencontré lorsqu’elles naviguent sur des sites modernes sans vraiment en connaître le nom. Si on traduit le terme ‘LightBox ‘en français, cela  nous donnerait ‘boîte lumineuse’ (ce qui ne représente rien de spécial dans la sémantique du web). Il s’agit en fait d’un formulaire/fenêtre mis(e) en avant avec un filtre transparent d’une couleur particulière dont le but est d’obliger l’utilisateur à se concentrer sur  un élément en particulier.

En fait, on place un filtre devant notre page (elle est cependant  toujours assez visible) et on place un formulaire/ fenêtre devant le filtre. Les éléments de la page en fond n’étant plus accessible, l’utilisateur n’a alors d’autre choix que de manipuler ce qui est affiché au premier plan ou bien de fermer la LightBox pour avoir à nouveau le contrôle sur la page.

Si vous ne voyez pas toujours pas et si vous avez déjà utilisé Windows XP, vous vous souviendrais peut être de l’effet de fondu mis en place lorsque l’on souhaite éteindre sa machine par l’intermédiaire démarrer -> arrêter. on peut apercevoir une fenêtre offrant le choix pour mettre en veille, éteindre ou redémarrer la machine tandis que  le fond change de couleur progressivement pour virer au noir et blanc. L’utilisateur n’a plus alors le contrôle sur ce qui se passe derrière hormis cette fenêtre au premier plan. La LightBox reprend ce principe sauf que l’animation de fondu est optionnelle.

Généralement, on utilise LightBox pour gérer une connexion à un compte, afficher un diaporama (que l’on appelle en anglais plus communément un slideshow) ou encore de plus en plus pour créer des publicités (comme l’utilisateur ne peut manipuler le fond de la page il est presque obligé d’attendre que la publicité passe pour avoir le contrôle sur la page qu’il vient de charger, c’est une manière de capter son attention durant quelques secondes).

Il est possible de la programmer uniquement en s’appuyant sur le JavaScript (des connaissances en style CSS sont toutefois nécessaires). PHP et l’ASP ne conviennent pas étant donné que ce sont des langages exécutés coté serveur qui n’interviennent qu’au chargement de la page. La page serait donc réactualisée ce qui ne présente donc aucun intérêt d’en griser le fond… Le JavaScript lui intervient à n’importe quel moment rendant une page dynamique et interactive. Seulement il possède néanmoins des inconvénients qui doivent être pris en compte pour la réalisation de sites internet.

Voici une exemple d’image d’une LightBox (formulaire d’insertion d’image sous WordPress avec un filtre de couleur noire et niveau de transparence à 75% (la valeur 100 représentant un fond entièrement opaque)):

Mise en pratique

On va associer à notre LightBox des fonctionnalités comme le changement de couleur, l’ajout de transparence au fond de la page ou la possibilité d’afficher une image en fond avec possibilité d’y appliquer de la transparence bien sûr.  Voici la représentation graphique de notre classe LightBox:

D’après le schéma, on s’aperçoit que la classe comporte 5 champs privés:

• box: représente la boîte qui s’affichera au dessus du filtre.
• color: représente la couleur du filtre en arrière plan
• filter: représente le filtre. Il s’agit d’un élément qui prend toute la page et sensé ‘griser’ le fond de celle ci en appliquant une couleur ou une image avec un niveau de transparence défini
• filterImage: représente le lien de l’image affichée en arrière plan
• opacity: représente la valeur de la transparence du filtre

Elle comprend également un certain nombre de méthodes offrant la possibilité de paramétrer notre composant  en changeant la couleur du filtre ou son niveau de transparence et appliquer les changements pour qu’ils soient visibles graphiquement.

Avant de commencer voici le code complet de la classe: LightBox.js

Maintenant commençons par créer la fonction init étant donné que c’est la première méthode à appeler lorsque l’on souhaite créer la LightBox. La fonction init permet elle d’initialiser le composant, elle va créer les composants HTML nécessaires pour réaliser le filtre:

  1 this.init = function(Opacity, Color) {
  2     if(filter == null) {
  3         // On créé le filtre avec la fonction DOM createElement
  4         filter = document.createElement("div");
  5         // On lui donne un identifiant pour le reconnaître plus facilement
  6         filter.id = "lightBox";
  7         // On met le filtre au dessus de la page 
  8         filter.style.zIndex = "9001";
  9         // On change sa mise en page
 10         // Sa position sera déterminée en fonction des valeurs de CSS
 11         filter.style.position = "absolute";
 12         // La position verticale du filtre est définie au bord supérieur gauche de la page
 13         filter.style.top = "0px";
 14         // La position horizontale du filtre est définie au bord supérieur gauche de la page
 15         filter.style.left = "0px";
 16         // On défini la taille du filtre en l'occurence celle de la page entière
 17         // On teste si le navigateur que l'on utilise est Internet Explorer
 18         if(navigator.appName === "Microsoft Internet Explorer") {
 19             if(document.body.scrollHeight < document.body.clientHeight)
 20                 filter.style.height = document.body.clientHeight;
 21             else
 22                 filter.style.height = document.body.scrollHeight;
 23
 24             if(document.body.scrollWidth < document.body.clientWidth)
 25                 filter.style.width = document.body.clientWidth;
 26             else
 27                 filter.style.width = document.body.scrollWidth;
 28         }
 29         // Lorsque l'on utilise Firefox, Safari, Chrome, Opera
 30         else {
 31             filter.style.width = document.body.scrollWidth;
 32             filter.style.height = document.body.scrollHeight;
 33         }
 34         // On change le curseur de la souris
 35         filter.style.cursor = "pointer";
 36         // La couleur de fond du filtre sera celle fournie en argument 
 37         changeColor(Color);
 38         // On change la valeur de la transparence du filtre 
 39         changeOpacity(Opacity);
 40         // Ici on s'abonne à l'événement Click sur notre filtre
 41         if(filter.addEventListener)
 42             filter.addEventListener("click", this.destroy, false);
 43         else if(filter.attachEvent)
 44             filter.attachEvent("onclick",this.destroy);
 45 }

La fonction init possède deux paramètres: Opacity et Color offrant la possibilité de définir ces 2 paramètres au moment de la création de notre LightBox. Le changement de couleur du filtre et sa transparence sont délégués aux méthodes changeColor et changeOpacity qui sont privées donc accessibles uniquement dans la classe LightBox.

Dans le code on peut voir que l’on teste la nature du navigateur employé. La raison tient du fait que le code qui est exécuté dans le branchement conditionnel else marche sous Firefox, Opera, Chrome, Safari mais… pas Internet Explorer !
En effet Internet Explorer n’interprète pas de la même manière la valeur des propriétés scrollWidth et scrollHeight, il faut donc s’appuyer sur d’autres propriétés et réaliser des calculs pour obtenir un résultat sensiblement identique aux autres navigateurs du marché.

On peut aussi apercevoir que l’on s’abonne à l’événement Click sur le filtre. Ici encore une fois les conditions sont là de manière à faire en sorte que  le code fonctionne aussi bien sur Internet Explorer qu’avec les autres navigateurs étant donné que la fonction addEventListener n’existe pas sous Internet Explorer et utilise lui attachEvent à la place…
La fonction destroy est attachée à l’événement Click qui interviendra lorsque l’utilisateur presse le bouton de sa souris dans la zone du filtre. Cela permet d’éviter de bloquer toute la page lorsque l’on souhaite reprendre le contrôle des éléments de la page précédemment ‘désactivés’ par l’apparition du filtre et de la boîte.

Maintenant faisons un petit tour d’horizon des méthodes changeColor et changeOpacity. Voici le code:

  1 // Change la couleur du filtre
  2 function changeColor(newColor) {
  3     // On teste le type de l'argument
  4     if(!(typeof newColor == 'string'))
  5         throw "newColor argument must be a String object";
  6
  7     if(filter) {
  8         filter.style.backgroundColor = newColor;
  9     }
 10 }
 11
 12 // Change la transparence du filtre
 13 function changeOpacity(newOpacity) {
 14     // On teste le type de l'argument
 15     if(!(typeof newOpacity == 'number')) {
 16         throw "newOpacity argument must be Number object";
 17     }
 18
 19     // On convertit en entier si c'est un réel qui est passé en argument
 20     var opacityInteger = parseInt(newOpacity);
 21
 22    // On vérifie si la valeur est comprise entre 0 et 100
 23    // La valeur du filtre à 0 le rendant entièrement transparent
 24    // La valeur du filtre à 100 le rendant entièrement opaque
 25    if(opacityInteger < 0 && opacityInteger > 100)
 26        throw "opacity invalid value";
 27
 28    if(filter) {
 29    // On convertit la valeur en réel pour qu'elle soit exploitable
 30    // par la propriété CSS opacity                 
 31    opacity = newOpacity / 100;
 32
 33    var appName = navigator.appName;
 34    // On teste le type du navigateur
 35    if(appName === "Netscape" || appName === "Opera") {
 36        filter.style.opacity = opacity;
 37    }
 38    else
 39        filter.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + newOpacity  + ")";
 40    }
 41 }

Ici également on s’aperçoit que l’on teste le navigateur avant de réaliser le traitement. Cette fois ci il ne s’agit d’une propriété interprétée différemment selon le navigateur mais une syntaxe totalement différente.

Une nouvelle fois, le problème vient d’Internet Explorer qui n’implémente pas la propriété opacity faisant partie des spécifications de HTML mais propose une propriété qui lui est propre et qui exploite DirectX pour faire des transformations. L’avantage tout de même c’est que la propriété filter permet de réaliser plusieurs effets autre que la transparence.

Par exemple un effet de flou ou des transformations comme des rotations ou translations (sous Mozilla Firefox, ces transformations ne sont disponibles qu’à partir de Gecko 1.9.1 utilisé par la version 3.5 du navigateur minimum). La propriété filter est quand à elle supportée depuis la version 5.5 du navigateur de Microsoft.

Voyons maintenant le code des accesseurs de la classe LightBox:

  1 // On obtient la couleur courante du filtre
  2 this.getColor = function() {
  3     return color;
  4 }
  5
  6 // On obtient l'url de l'image en fond du filtre
  7 this.getImageUrl = function() {
  8     return filterImage;
  9 }
 10
 11 // On obtient le niveau de transparence du filtre
 12 // Retourne une valeur comprise entre 0 et 100
 13 this.getOpacity = function() {
 14     return opacity * 100;
 15 }
 16
 17 // On change la couleur du filtre
 18 this.setColor = function(newColor) {
 19     changeColor(newColor);
 20 }
 21
 22 // On change l'image de fond du filtre
 23 this.setImageUrl = function(imageUrl) {
 24    // On teste le type
 25    if(!(typeof imageUrl == 'string')) {
 26        throw "image argument is not a string objet";
 27    }
 28    if(filter) {
 29        filterImage = imageUrl;
 30        filter.style.backgroundImage = "url(" + imageUrl + ")";
 31        filter.style.backgroundColor = null;
 32    }
 33 }
 34
 35 // On change la transparence du filtre 
 36 this.setOpacity = function(newOpacity) {
 37        changeOpacity(newOpacity);
 38 }

Ce que j’appelle accesseur est en fait un terme appartenant au concept objet qui permet entre autre d’avoir accès en lecture ou en écriture aux éléments privés d’une classe. Les fonctions avec le préfixe get permettent d’accéder à des informations relatives à l’objet. En revanche les fonctions avec set comme préfixe permettent de modifier les paramètres de notre LightBox mettant ainsi à jour graphiquement le composant.

Voyons maintenant la manière dont est affiché notre composant à l’écran:

  1 // Affiche le filtre et la boîte
  2 this.show = function(id, x, y) {
  3     if(id == null)
  4         throw "id argument can't be null value";
  5     if(box == null)
  6         box = document.getElementById(id);
  7
  8     if(filter != null && box != null) {
  9         document.body.appendChild(filter);
 10         box.style.position = "absolute";
 11         // Change la position x de la fenêtre flottante
 12         // On assigne une valeur par défaut à x si son type n'est pas bon
 13         // ou si la valeur de l'argument est nulle
 14         if(x == null || !(typeof x == 'number'))
 15             box.style.left = "0px";
 16         else
 17             box.style.left = x + "px";
 18
 19         // Change la position y de la fenêtre flottante
 20         // On assigne une valeur par défaut à y si son type n'est pas bon
 21         // ou si la valeur de l'argument est nulle
 22         if(y == null || !(typeof y == 'number'))
 23             box.style.top = "0px";
 24         else
 25             box.style.top = y + "px";
 26
 27         box.style.zIndex = "9999";
 28         box.style.visibility = "visible";
 29     }
 30 }

La fonction show prend en paramètre un identifiant (qui correspond au formulaire/élément qui sera placé devant le filtre) et des positions x et y qui représenteront les coordonnées du formulaire/élément. On change également certaines de ses propriétés CSS pour qu’il s’affiche en temps de fenêtre flottante en changeant sa position et en changeant également son niveau de visibilité.
Comme on a déjà créé notre filtre avec la fonction init, il ne reste plus qu’à l’ajouter à notre document courant. Le filtre et la boîte seront alors tous deux affichés.

Pour finir, il faut détruire notre filtre lorsque l’on a plus besoin. Ce travail est réalisé par la fonction destroy (publique). Le rôle cette fonction étant de supprimer le filtre et de masquer la boîte  dont on a donné l’identifiant lors de l’appel de la fonction show:

  1 // Détruit le filtre et masque la boîte
  2 this.destroy = function() {
  3     if(filter) {
  4         if(filter.removeEventListener)
  5             filter.removeEventListener("click", this.destroy, false);
  6         else if
  7             filter.detachEvent("onclick", this.destroy);
  8
  9         document.body.removeChild(filter);
 10     }
 11     if(box)
 12         box.style.visibility = "hidden";
 13
 14     box = null;
 15     color = null;
 16     filter = null;
 17     filterImage = null;
 18 }

Il sera nécessaire ensuite de rappeler la fonction init pour rendre la classe LightBox à nouveau opérationnelle.

Exemple

Voici un exemple pour montrer que le fonctionnement de la classe. Cette classe et opérationnelle sous Internet Explorer, Firefox, Safari, Chrome et Opera (Les autres navigateurs n’ayant pas été testé, je ne peux garantir le bon fonctionnement de celle ci en totalité).

Exemple

La page contient le code de la classe LightBox, un formulaire de connexion (il s’agit d’un test donc non fonctionnel)  qui s’affichera au dessus du filtre et un bouton pour manipuler la classe:

Améliorations

Il s’agit d’un exemple destiné  montrer le fonctionnement d’une LightBox telle qu’on peut la trouver sur des grands sites.

Le code que j’ai présenté n’est pas optimisé pour fonctionner de manière optimale sur les différents navigateurs.
Pour améliorer les performances (surtout sous Internet Explorer 6, navigateur dépassé mais cependant toujours utilisé), il faut prendre en compte que la simple modification du éléments de style (par exemple pour la couleur de fond)  par l’intermédiaire de la syntaxe element.style peut amener le navigateur à repeindre ou à recalculer la mise en page d’un élément HTML.

On peut exploiter la fonction createDocumentFragment pour éviter au maximum que le navigateur en vienne à recalculer les éléments modifiés après leur création.

La classe manque également de sécurisation quand à la validité des informations pour le paramétrage de la classe. Je pense notamment à la fonction show où on peut vérifier que les positions fournies rendent la boîte visible dans son intégralité à l’écran.

On peut la faire évoluer en ajoutant d’autres fonctionnalités comme la mise en place d’animation pour l’affichage de filtre (un effet fondu par exemple), ou implémenter des fonctions de mise à jour du composants et événements…

En terme de performance, Je n’ai cependant pas testé la vitesse d’exécution de mon code mais une fois que l’utilisateur ne ressent pas une gêne pour ce qui est de l’attente ce n’est toutefois pas nécessaire :=)

En espérant que ce tutorial vous aidera en quoi que ce soit, sur ce bon codage à tous

Commençons tout d’abord avec le Mac mini, la plus petite machine d’Apple équipée de Mac Os X, redessiné il y a peu, a maintenant le droit à une toute nouvelle déclinaison. En effet, le Dual 500 Go, qui en a peut-être surpris ou alors ravit plus d’un en devenant ni plus ni moins un serveur. Il disposera de Snow leopard Server comme système d’exploitation, doté d’un Intel Core 2 Duo 2.53 Ghz, 4Go de ram, d’un processeur graphique NVIDIA Geforce 9400M et le SuperDrive (toujours disponible mais en externe cette fois pour 89.00€) a tout simplement laissé sa place à 2 disques de 500Go.

Ce tout nouveau ‘mini’ server a été conçu pour vous aider à communiquer, collaborer ainsi qu’à partager toutes vos informations. Vous pourrez dorénavant l’utiliser comme votre propre serveur pour gérer votre courrier électronique, partager vos calendriers et contacts tout simplement en synchronisant et partageant vos différentes machines (Mac, PC et iPhone). Vous pourrez également partager tous vos fichiers en  toute sécurité et ce à grande vitesse.

Pour finir le prix de ce tout nouveau Mac mini Server : 949.00€

Mac mini Server 09

Pour ce qui est des 2 autres Mac mini mais cette fois-ci version non serveur, une petite mise à jour des composants a été faite.

- Intel Core 2 Duo de 2,26 GHz (modèle haut de gamme précédent), 2 Go de RAM, HDD de 160 Go. Son prix 549.00 €. (contre 2,0 GHz, 1 Go de RAM, et 120 Go à 599.00 €).

- Intel Core 2 Duo de 2,53 GHz, 4 Go de RAM, HDD de 320 Go. Son prix 749.00€ (contre 2,0 GHz, 2 Go de RAM, et HDD de 320 Go à 799.00 €).

Ces 3 modèles de Mac mini, seront équipés d’une connectivité WiFi Airport Extreme 802.11n et Bluetooth 2.1 + EDR (Enhanced Data Rate).

Maintenant, allons voir le nouveau MacBook 2009 (entrée de gamme) , qui a finalement adopté une nouvelle robe en polycarbonate Unibody enclosure. Ce tout nouveau modèle est équipé d’un Intel Core 2 Duo de 2.26Ghz (contre 2.13 Ghz précédemment), il garde ses 2 Go de ram et passe maintenant à la DDR3 de 1066 Mhz (anciennement de la DDR2) et dispose d’un disque dur de 250 Go (contre 160 Go précédemment), doté également d’un écran LED de 13.3″ et d’un trackpad multitouch en verre. Il garde néanmoins son processeur graphique NVIDIA Geforce 9400M, sa batterie est maintenant fixe est passe à 7 Heures d’autonomie et son port Firewire a été retiré ainsi que son port infra-rouge (fini donc d’utiliser l’Apple Remote). Il intègre également comme les mac mini, une connectivité WiFi Airport Extreme 802.11n et Bluetooth 2.1 + EDR (Enhanced Data Rate).

Son prix : 899€

MacBook 09

Et pour finir le tout nouveau iMac 09, avec sa nouvelle souris, la Magic Mouse et sa nouvelle télécommande Apple Remote 09. Commençons par l’iMac, décliné avec un écran LED Full HD de 21.5″ (1920×1080) ou alors avec un écran LED de 27″ (2560 x 1440). Les 2 premièrs modèles ont un écran de 21.5″ et les 2 suivants un 27″ mais seul le dernier disposera d’un Intel Core i5  de 2.66 Ghz (ou Intel Core i7 de 2.8Ghz selon l’option)  comparé aux 3 autres, encore sous Intel Core 2 Duo de 3.06 Ghz. A noter également, que les écrans ont un format 16/9ème cela plaira à certains et à d’autres non ainsi que l’ajout d’un port SD et d’un port Mini Dislpay Port pour le relier à son Mac mini, MacBook, … Tout comme les Mac mini et MacBook ils seront équipés d’une connectivité WiFi Airport Extreme 802.11n et Bluetooth 2.1 + EDR (Enhanced Data Rate).

iMac 09 21.5" et iMac 09 27"

Ecran 21.5″

- Intel Core 2 Duo 3.06 Ghz 4 Go de ram, HDD de 500 Go et une NVIDIA 9400M. Son prix : 1099.00€

- Intel Core 2 Duo 3.06 Ghz 4 Go de ram, HDD de 1 To et une ATI Radeon HD 4670 de 256 Mo. Son prix : 1349.00€

Ecran 27″

- Intel Core 2 Duo 3.06 Ghz 4 Go de ram, HDD de 1 To et une ATI Radeon HD 4670 de 256 Mo. Son prix : 1499.00 €

- Intel Core i5 2.66 Ghz 4 Go de ram, HDD de 1 To et et une ATI Radeon HD 4850 de 512 Mo. Son prix : 1799.00€

Ensuite la Magic Mouse, la nouvelle souris d’Apple, elle est sans fil, Bluethooth et équipée du Multi-Touch. Fini le temps de la molette ou la petite bille maintenant tout ce fait avec les doigts. Elle sera compatible uniquement Mac OS X 10.5.8 et version ultérieure. Son prix : 69.00€

Magic Mouse 09

Les différents mouvement de la Magic Mouse 09

Et enfin l’Apple Remote 09, changement de look pour être plus en harmonie avec le reste des ordinateurs d’Apple (sauf le MacBook), en adoptant l’aluminium. Son prix : 19.00€

Apple Remote 09

Source: Apple

Pour ceux qui ne connaissent pas le phishing, il s’agit d’un site factice (qui ressemble aux véritables sites) prétendant appartenir à une entreprise sérieuse comme une banque (dans le cas présent) et qui a pour but de récupérer des informations personnelles comme des mots de passe, des numéros de cartes de crédits… pour évidemment les utiliser à des fins personnelles.

Pourquoi je m’arrête justement sur cet élément d’actualité ? Tout simplement parce que le phishing peut toucher n’importe qui vu que cette méthode est exploitée uniquement grâce au réseau internet. Je considère d’ailleurs qu’il ne s’agit pas d’un problème anodin puisque le phishing se répand de plus et qu’un rappel à la vigilance n’est pas de trop.

Alors comment savoir si un site est factice ou non ?

Mozilla et Microsoft qui développent les navigateurs les plus utilisés dans le monde (Firefox, Internet Explorer) ont déjà intégré des solutions pour lutter contre la pratique du phishing. Sous Internet Explorer, il est possible d’activer un filtre d’anti-hameçonnage (‘hameçonnage’ étant la traduction littérale de ‘phishing’). Cette fonctionnalité consiste en somme à informer l’utilisateur que le site sur lequel il essaye de naviguer est soupçonné de pratiquer l’anti-hameçonnage. En revanche si ce site est classifié en tant que site factice connu il vous sera impossible de le consulter.

Le filtre anti-hameçonnage comment ça fonctionne ?

Le navigateur va comparer l’URL du site que l’on tente de visiter avec ceux contenues dans une base de données spécialement conçue pour recenser les sites soupçonnés de pratiquer le phishing.

Si cette URL est bien présente dans la base de données, le navigateur réagira en informant l’utilisateur de la nature du site et/ou en bloquant l’accès.

Le recensement de tels sites sont le plus souvent réalisé par les utilisateurs qui se sont aperçus de la fraude et qui ont transmis les informations relatives à ces sites par l’intermédiaire du navigateur. Évidemment, les informations fournies sont vérifiées sinon n’importe qui pourrait prétendre que votre site exploite le phishing.

Le filtre d’anti-hameçonnage est disponible à partir d’Internet Explorer 7 et celui de Firefox est lui disponible depuis la version 2.0

On pourrait alors se demander : comment on peut reconnaître un site factice ?

Le site authentique d’une banque par exemple exploite une connexion sécurisée qui exploite le protocole HTTPS mais un site factice non.

L’exploitation d’une connexion sécurisée est matérialisée sous Internet Explorer par un cadenas en bas à droite (dans la barre d’état) de la fenêtre du navigateur. En cliquant sur le cadenas, il est possible de vérifier si le certificat utilisé par le site est authentique.

Les véritables sites possèdent un certificat vérifié par une entreprise spécialisée comme Verisign ou Thawte. Ces organismes aussi appelés CA (pour Certificate Authority) garantissent la validité du certificat fourni par le site authentique et tend donc à prouver sa nature de site non factice.

Le phishing est de plus en plus répandu sur le web alors restez vigilant !

Pour plus d’informations concernant le filtre hameçonnage d’Internet Explorer.

C’est le premier billet de notre blog donc ont nous vous souhaitons la bienvenue pour ceux qui le lise ^^. Ce blog est tenu par deux passionnés d’informatique du monde Apple et Microsoft, Web. Une grande partie des billets à venir sera tourné vers le développement d’applications web et bureautiques,  matériel (processeurs, mémoire…) ou présentation de logiciels comme des navigateurs.

L’objectif de ce blog est de faire partager mes réflexions, mes découvertes,  mes connaissances et conseils en matière de développement logiciel ou sécurité à tout le monde.

Sur ce, nous vous souhaitons une agréable visite sur notre blog ^^