Posts tagged ‘chrome’

Je vous ai déjà montré comment créer un certificat autosigné. Le problème de cette méthode, c’est que Chrome (par exemple) vous redemandera à chaque redémarrage d’accepter le certificat, ce qui plutôt pénible. Heureusement, voici la solution !

Autosigner un certificat avec une autorité

Pour que Chrome accepte votre certificat à chaque fois, il faut l’autosigner avec une autorité. Ensuite, il suffit de lui rajouter cette autorité dans la liste des autorités connues et le tour est joué !

Création de l’autorité

Nous allons créer la clé et le certificat permettant de signer d’autres certificats, et de se faire reconnaitre par les navigateurs. Ici, CA signifie Certification Authority.

  1. Je crée une clé privée pour mon autorité. On vous demandera un mot de passe, qu’il faudra fournir à chaque nouvelle signature de certificat.
    openssl genrsa -des3 1024 > ca.key
  2. Je crée le certificat d’autorité, celui que je vais importer plus tard dans Chrome. On va vous demander le mot de passe de la clé privée, ainsi que des informations sur l’autorité de certification que vous représentez. Ici, les données ont peu d’importance.
    openssl req -new -x509 -days 3650 -key ca.key > ca.crt

Création d’une demande de certificat

  1. Création de la clé privée. On vous demandera ici aussi un mot de passe, celui de votre certificat final.
    openssl genrsa -out mondomaine.key 1024
  2. Création d’une demande de signature CSR (Certificate Signature Request) : on crée un fichier contenant nos informations personelles, que nous transmettrons ensuite à notre autorité pour qu’il valide notre certificat. On vous demandera le mot de passe de votre certificat.
    openssl req -new -key mondomaine.key > mondomaine.csr

Signature du certificat

Il ne reste plus qu’à créer un certificat à partir du CSR en utilisant notre autorité.
openssl x509 -req -in mondomaine.csr -out mondomaine.crt -CA ca.crt -CAkey ca.key -CAcreateserial -CAserial ca.srl

La création du « serial » du certificat n’est nécessaire que la première fois.

Utilisation avec les navigateurs

Il ne vous suffit plus que d’ajouter le certificat de votre autorité CA.crt à la liste des certificats racines de votre navigateur, et tous les certificats émis par cette autorité seront automatiquement acceptés !

TL; DR

openssl genrsa -des3 1024 > ca.key
openssl req -new -x509 -days 3650 -key ca.key > ca.crt
openssl genrsa -out mondomaine.key 1024
openssl req -new -key mondomaine.key > mondomaine.csr
openssl x509 -req -in mondomaine.csr -out mondomaine.crt -CA ca.crt -CAkey ca.key -CAcreateserial -CAserial ca.sr

Netographie : linux-france.org : la création des certificats

Ajout/enlèvement d’évènements sur des objets

En javascript, on peut aisément rajouter des évènements sur des objects en utilisant la méthode addEventListener et en supprimer avec removeEventListener.

Exemple : cliquez-moi

  1. function p712_onclick()
  2. {
  3.   alert('Vous avez cliqué sur moi');
  4.   // Suppression de l'évènement
  5.   this.removeEventListener('click', p712_onclick, true);
  6. };
  7. // Ajout de l'évènement
  8. document.getElementById('p712_ex1').addEventListener('click', p712_onclick, true);

Pour enlever l’évènement, il suffit d’appeler removeEventListener sur le même objet avec le même deuxième argument.

Les fonctions anonymes

Les fonctions anonymes vous evitent de déclarer une fonction dans votre scope : vous ne la déclarez que quand vous en avez besoin.

Exemple : cliquez-moi

Mais impossible de supprimer l’évènement, car si vous appelez removeEventListener avec le même code, l’interprêteur Javascript va créer un deuxième objet fonction effectuant le même code, à la volée.

  1. document.getElementById('p712_ex2').addEventListener(
  2.     'click',
  3.     function()
  4.     {
  5.       alert('Vous avez cliqué sur moi');
  6.       // Que mettre comme deuxième argument pour removeEventListener() ?
  7.     },
  8.     true
  9. );

Les fonctions anonymes nommées

Pour résoudre ce problème, il suffit de nommer la fonction anonyme.

Exemple : cliquez-moi

  1. document.getElementById('p712_ex3').addEventListener(
  2.     'click',
  3.     function anon712()
  4.     {
  5.       alert('Vous avez cliqué sur moi');
  6.       // Suppression de l'évènement  OK !
  7.       this.removeEventListener('click', anon712, true);
  8.     },
  9.     true
  10. );

Compatibilités avec les navigateurs

Et qui n’est pas compatible ? IE8 et les versions précédentes ! Donc ceci est surtout un memo pour le développement d’extensions avec Firefox, Safari et Chrome, et est très utile si (par hasard) vous écrivez un bootstrapped add-on.

Les développeurs HTML le savent bien : impossible de faire des styles uniformes sous tous les navigateurs ! Chacun a ses particularités : chrome et ses webkit-, safari qui n’en met pas et firefox qui -moz ifie un peu tout… et IE qui ne fait rien !

La solution pour IE : PIE.htc

La solution proposée ici a été développée pour supporter le CSS 3 sur Internet Explorer. Pour ce faire, on utilise une particularité CSS de Internet Explorer pour exécuter du JavaScript, qui va recréer le style CSS 3.

Voir la démo sur css3pie.com

Mise en place

Il suffit de rajouter une ligne CSS au style des éléments qui ont du CSS3.

  1. <style type="text/css">
  2. .rounded-corner5
  3. {
  4.   -webkit-border-radius: 5px; /* Chrome */
  5.   border-radius: 5px; /* CSS3 */
  6.   -moz-border-radius: 5px; /* Mozilla */
  7.   behavior: url(PIE.htc); /* Internet Explorer */
  8. }
  9. </style>

Exemple d’utilisation

Ceci est un div en exemple, avec des bords arrondis

Dépannage : quelques règles à respecter tout de même…

Il y a principalement deux problèmes qui peuvent être rencontrés :

  1. Mime-type : par défaut sous linux, le fichier .htc est reconnu comme étant du type text/html, mais doit être du type text/x-component pour que ça fonctionne. Plusieurs solutions, en fonction de ce que vous pouvez faire : modifier la configuration du serveur /etc/mime.types pour rajouter ce champ, rajouter la ligne AddType text/x-component .htc à votre configuration apache ou .htaccess, ou enfin créer un fichier de script du type PHP en utilisant le code header('Content-type: text/x-component') pour spécifier le type contenu.
  2. Domaine, répertoire et droits : le CSS ne va fonctionner que si le fichier .htc est sur le même domaine que le site qui sert le HTML : impossible donc d’utiliser la traditionnelle et non moins nécessaire segmentation des contenus dynamiques/statiques. Du coup, les rendu CSS3 utilisant des url() risquent d’être mal considérées si le chemin est relatif.

English version : CSS3 for Internet Explorer with PIE.htc

HSTS est (et j’adore ce genre de formule auxquelles on ne comprend rien) une norme qui permet de sécuriser l’accès aux sites sécurisés. HSTS signifie HTTP Strict Transport Security (précédemment nommé STS).

Limites actuelles

Aujourd’hui, le protocole HTTPS (HTTP sécurisé) est très robuste. Les principales failles de sécurité proviennent non pas du protocole de sécurisation en lui-même, mais plutôt du phishing, c’est-à-dire de l’identité réelle du site que vous visitez. Vous pouvez très bien aller sur le site par exemple de lcl.fr, mais en réalité vous êtes sur le site de lc1.fr. Pas forcément évident de faire la différence entre les deux au premier coup d’oeil.

Autre problème : vous vous connectez à un réseau wifi gratuit, et alors que vous pensez vous connecter sur le site de lcl.fr, vous êtes en réalité sur une copie de ce site, et c’est le serveur DNS (qui associe une IP à lcl.fr) qui vous trompe. Le certificat de sécurité, en revanche n’est pas valide, mais vous avez l’habitude que ça arrive sur Internet…

La solution proposée

En fait, cette solution n’est pas miraculeuse. Elle permet deux choses :

  1. Si j’arrive sur le site de ma banque, alors je suis obligatoirement en HTTPS. Cela évite les attaques qui consisteraient à y changer les liens en des liens vers un autre site avec une adresse similaire et un certificat valide.
  2. Si quelqu’un cherche à se faire passer pour ma banque et que je suis un abruti qui accepterait un certificat non valide, alors je suis protégé, car le certificat sera automatiquement refusé par mon navigateur.

Mise en place

Un site se déclare HSTS par deux manières différentes :

  • soit il fournit un header HTTP nommé Strict-Transport-Security, qui contient pour combien de temps et sur quelles parties du site appliquer HSTS  (exemple : Strict-Transport-Security: max-age=16070400; includeSubDomains) ;
  • soit il se déclare comme tel auprès des navigateurs (ou bientôt d’une autorité ?). Cette solution permet d’éviter de se faire avoir lors de la première connexion au site internet avec un navigateur tout neuf.

Une fois qu’un site est considéré comme HSTS par le navigateur :

  • Aucune connexion en HTTP non sécurisé ne sera faite. Tout passera directement par HTTPS. Les URL en HTTP (quand vous les tapez vous-même, ou bien à partir de lien trouvés sur des sites) seront automatiquement converties en HTTPS.
  • Si la liaison HTTPS contient une erreur (certificat auto-signé, ou non valide sur le domaine, …) alors la connexion sera automatiquement interrompue et aucune donnée ne sera transmise au site distant.

Conclusion

C’est une bonne couche de sécurité supplémentaire qui va être ajoutée, et qui va permettre d’éviter pas mal d’usurpation d’identité de site Internet. Internet n’est pas un monde magique où tout est rose, et il reste très important de sensibiliser les internautes aux problèmes de sécurité sur Internet, car malheureusement, une telle solution ne permet pas de protéger contre toutes les attaques.

Actuellement, Chrome 6 et Firefox 4 ont adopté la norme.

Sources : Strict Transport Security chez Chrome, la dépêche linuxfr.org sur HSTS dans Firefox

Le CSS évolue. Une des principales innovations dans ce standard est l’ajout des animations. En voici un aperçu.

Démo : opacité et rotation

Un peu de code

Principe de fonctionnement

Le principe des animations est simple :

  1. Vous ajouter des styles à vos objets : style normal, et style modifié sur un évènement, par exemple avec :hover. Par exemple, on définit opacity: 0.5; dans le cas normal et opacity: 1; dans le :hover.
  2. On rajoute un style normal qui s’intitule -webkit-transition et dans lequel on va programmer la transition : type de propriété à animer, courbe de vitesse. Par exemple, si on veut animer l’opacité avec une vitesse rapide, en rendant l’arrêt plus fluide : -webkit-transition: -webkit-transform 1000ms ease-out 40ms ;

Source de l’exemple

  1. <style>
  2. .p416_animated {
  3.    opacity:.5;
  4.   -webkit-transition: -webkit-transform 1000ms ease-out 40ms, opacity 1000ms ease-out 40ms;
  5.   -moz-transition: -moz-transform 1000ms ease-out 40ms, opacity 1000ms ease-out 40ms;
  6. }
  7. .p416_animated:hover {
  8.   opacity:1;
  9.   -webkit-transform: rotate(360deg);
  10.   -moz-transform: rotate(360deg);
  11. }
  12. </style>
  13.  
  14. <img class="p416_animated" src="http://blog.cyril.me/wp-content/uploads/2010/09/firefox-150x150.png" alt="" />

Compatibilité

Le grand problème des évolutions de langage, c’est qu’il faut attendre l’évolution des navigateurs. Parmi les navigateurs compatibles disponibles à ce jour, nous avons Firefox 4, Chrome et Safari.

Cependant, le manque de compatibilité, dans certains cas (opacité par exemple), ne rendra pas votre site incompatible, mais seulement moins fini.

Pour aller plus loin : la référence du w3 sur les transitions CSS3.

Envie d’avoir les notifications sous Firefox comme sous Chrome ? C’est désormais possible avec l’extension qui va bien.

Elle n’est pas encore tout à fait finie, mais c’est assez pour pouvoir s’en servir.

La page de l’extension : https://addons.mozilla.org/fr/firefox/addon/221523/
Site officiel : http://code.google.com/p/ff-html5notifications/

De plus en plus de navigateurs ont un mode de navigation privée. C’est le cas pour Chrome, Firefox, Safari et Internet Explorer (inPrivate) en autres. Ces modes permettent de surfer anonymement sur Internet. Enfin anonymement…

Concrètement : la navigation privée, ça change quoi ?

Le principe de base, enoncé dans une publicité pour le système d’exploitation de Microsoft Window 7, et son navigateur internet associé IE8, est le suivant : vous pouvez acheter un cadeau sur l’ordinateur commun en mode privé, et quand vous avez fini il ne reste plus aucune trace de votre passage dans votre navigateur. Ceci est correct pour la majorité des navigateurs.

Lorsque vous entrez en mode de navigation privée, le navigateur n’enregistrera rien de ce que vous faîtes : tout est stocké dans un répertoire à part, qui vous permet de garder votre historique et vos cookies (nécessaires sur presque tous les sites où vous avez un compte). A la fin, lorsque vous fermez le navigateur ou que vous choisissez d’arrêter votre session de navigation privée, tout est supprimé et vous retrouvez un navigateur comme si vous n’aviez jamais rien fait.

Voici les principales applications de la navigation privée :

  • Pour faire un cadeau à quelqu’un, comme énoncé plus haut ;
  • Pour aller sur des sites adultes (soyons honnêtes : sans doute la principale utilisation faite de ce mode de navigation)
  • Pour prêter son ordinateur à quelqu’un (de confiance) temporairement : si cette personne se connecte à son compte Google par exemple, à la fin de la session vous serez toujours connecté à votre propre compte et non à celui de la personne à qui vous avez prêté votre ordinateur.

Question plus technique : les cookies

J’ai eu l’occasion d’effectuer différents tests sur Firefox 3.6, Chrome 5.0 et Internet Explorer 8 en utilisant cet outil. J’ai testé les cookies locaux et les cookies tièces. Pour les cookies tièrces, j’ai utilisé un script javascript distant pour lire et écrire les cookies. Les cookies distribués avaient une durée de vie de 1 journée (86400 secondes).

  • Sans navigation privée : les cookies locaux et tièrces sont correctement stockés et redistribués aux sites ;
  • Passage à la navigation privée : les cookies stockés sont perdus ;
  • Pendant la navigation privée : le navigateur se comporte normalement, avec lecture et écriture des cookies locaux et tièrces ;
  • A la fin de la navigation privée : les anciens cookies présents sont restaurés.

Le point qui me semble le plus important et le moins facile à deviner est donc la perte de toutes les cookies existant lors du passage en navigation privée.

L’anonymat sur Internet

Il existe bien des manières d’identifier une personne sur Internet. La méthode la plus sûre, et utilisée dans tous les cas (ou presque, j’imagine), c’est le cookie. Il permet vraiment d’identifier une personne derrière un écran. Mais il y a d’autres informations particulières qui, en dépit de ce que pourra faire votre navigateur, restent imprégnées sur la toile.

L’adresse IP : cette adresse est unique par foyer, et fixe dans la majorité des cas. Si vous n’avez qu’un seul ordinateur derrière une adresse IP, alors on peut aisément vous reconnaître, quel que soit l’ordinateur ou le navigateur que vous utilisez : vous êtes la même personne. De plus, il est facile de savoir si vous êtes seuls derrière : il suffit d’étudier le comportement de votre IP sur une petite attaque réseau bénigne lancée avec nmap par exemple.

Le User-Agent : si vous êtes plusieurs derrière une IP, on peut utiliser le User-Agent. Le User-Agent est une ligne de texte envoyée à tous les serveurs sur Internet qui permet de définir si vous êtes sous Mac ou PC, si vous utilisez Firefox ou Internet Explorer, si vous êtes sous Windows Vista ou Mac OS 10.4, ou encore sous iPhone ou Android… Comme deux ordinateurs dans une même maison sont rarement identiques (Système d’exploitation, Navigateur, et leur version associée), on peut reconnaître par exemple monsieur sous Windows XP et Madame sous Mac OS.

L’expérience de navigation : l’adresse IP pourrait tout de même être suffisante. Si vous êtes plusieurs derrière votre accès Internet à la maison, il n’en reste pas moins que chacun va sur les sites qui l’intéresse : Madame va lire Marmiton tandis que Monsieur va lire les Echos.

Conclusion

L’adresse IP est donc bien suffisante dans la majorité des cas pour identifier une personne,. En fait, l’anonymat sur Internet, vous pouvez l’oublier. Tout de même, il faudrait aller sur des sites peu scrupuleux pour avoir affaire à ce genre de pratiques (sites pornographiques, de Peer-to-Peer, …). Pour les autres, les systèmes de navigation privée proposés par les navigateurs sont bien suffisants.

Lien : outil de test utilisé pour afficher, écrire et supprimer des cookies

Consécutivement à l’article sur les notifications HTML 5, voici un article qui donne un exemple de fonctionnement des notifications.

La démo

Avant de pouvoir afficher une notification, vous devez autoriser le site à vous en présenter :
Il y a parfois des limitations qui empêchent le site de lancer une autorisation au chargement de la page : vous êtes parfois obligé de faire cliquer l’utilisateur sur un bouton pour voir apparaître l’avertissement d’autorisation.

Ensuite, vous pouvez afficher des notifications (avec ou sans bouton) :

Programmer une notification dans 3 secondes

Sources de l’exemple

Code HTML :

  1. <button onclick="showNotification()">Afficher la notification</button>
  2. <button onclick="p297_showNotification()">Afficher la notification</button>
  3. <a onclick="window.setTimeout(showNotification, 3000);" href="javascript:;">Programmer une notification dans 3 secondes</a>

Code javascript :

  1. <script type="text/javascript">
  2. /** Demande la permission d’afficher des notifications */
  3. function allowNotification()
  4. {
  5.   if("webkitNotifications" in window)
  6.   {
  7.     // Demande la permission. En cas de succès, afficher la notification
  8.     webkitNotifications.requestPermission(p297_showNotification);
  9.   }
  10. }
  11.  
  12. /** Affiche la notification */
  13. function showNotification()
  14. {
  15.   if("webkitNotifications" in window)
  16.   {
  17.     // Crée une notification à partir d’une image, d’un titre
  18.     // et d’une description (pas d’HTML possible).
  19.     // Pour créer une notification avec de l’HTML
  20.     // (pour le formatage), utiliser createHTMLNotification()
  21.     var notification = webkitNotifications.createNotification(
  22.       "http://www.google.fr/favicon.ico",
  23.       "Titre : cyril.me",
  24.       "Ceci est une notification"
  25.     );
  26.     // Afficher la notification
  27.     notification.show();
  28.     // N’afficher la notification que 5 secondes
  29.     window.setTimeout(function() {notification.cancel();}, 5000);
  30.   }
  31. }
  32. </script>

Parce qu’on n’a pas toujours le document au format qui nous convient, ou parce qu’on a parfois besoin de repasser par des chaînes de caractères pour passer des arguments ou stocker des variables, différents outils de conversion sont mis à disposition du développeur.

Conversion en passant par JSON

Certains types peuvent être convertis en passant par JSON : le texte, les objets, les tableaux, les nombres…

Du type javascript au texte : il faut utiliser JSON.stringify
Exemple : JSON.stringify([1,2,3]) => « [1,2,3] »

Du texte vers un type javascript : il faut utiliser JSON.parse
Exemple : JSON.parse(« [1,2,3] ») => [1,2,3] (où 1, 2 et 3 sont des entiers)

Conversion d’un document DOMDocument ou XMLDocument

Deux outils sont à disposition : XMLSerializer (du document vers string) et DOMParser (de string vers un document).

XMLSerializer : DOMDocument vers une chaîne de caractères
Exemple : s = new XMLSerializer(); var documentString = s.serializeToString(document);

DOMParser : Conversion d’une chaîne de caractères vers un objet DOMDocument
Exemple : p = new DOMParser(); var doc = p.parseFromString(‘<html><body>coucou</body></html>’, ‘text/xml’);

Compatibilité

Ces APIs sont compatibles avec, entre autres, Safari 4.0+, Chrome, Firefox 3.5+, et peut-être IE… 😉

Il peut être parfois nécessaire d’utiliser une iframe, pour accéder par exemple à des cookies sur un autre site, se logguer, etc. Le problème est que si vous utilisez une iframe sur un domaine différent, le navigateur va vous renvoyer une erreur.

iframe et sécurité

Lorsque les domaine ou port diffèrent entre les deux frames, le navigateur va refuser la communication. En effet, imaginez que vous puissiez afficher une iframe cachée dans votre page, pour ensuite y récupérer des informations sensibles.

Exemple : dans mon site example.org, je mets une iframe vers mabanque.com et je récupère les informations bancaires de l’utilisateur de mon site (si celui-ci est déjà loggué sur le site de la banque).

La solution

Pour autoriser la communication entre les frames, il faut utiliser le protocole de communication entre les fenêtres.

Cette communication se fait par évènement : une fenêtre envoie à l’autre un objet1, qui le reçoit en ajoutant un handler sur l’évènement « message ».

Exemple

Dans notre exemple, l’iframe enverra un message à la fenêtre principale.

Fenêtre principale :

  1. // On rajoute un handler d'évènement
  2. function onMessage(e)
  3. {
  4.   // Vous pouvez vérifier l'origine de la fenêtre avec e.origin
  5.   document.getElementById('div-test').innerHTML = "Réception du message " + JSON.stringify(e.data);
  6. }
  7. window.addEventListener("message", onMessage, true);

Fenêtre iframe

  1. var dstWindow = window.parent;
  2. // Vous pouvez choisir le domaine vers lequel vous acceptez d'envoyer un message (ici, tous les domaines)
  3. dstWindow.postMessage([1,2,3], '*');

div-test pour la réception du message


1 : en fonction du navigateur, vous ne pourrez passer que des chaînes de caractères (Firefox 3.6 par exemple – Chrome supportant les objets). Pour pallier ce défaut, vous pouvez utiliser JSON.stringify et JSON.parse pour passer des objets comme des chaines ou des variables. Pour tout ce qui est DOM, ce n’est pas possible de faire passer les handler d’évènement définis dans la fenêtre source.