Cyril – Mes astuces

Nginx est un très bon logiciel alternatif à apache ou lighttpd. Voici comment utiliser le protocole SPDY avec Nginx.

SPDY : c’est quoi ?

SPDY est un protocole Web qui vient entre le SSL et le HTTP. Le but est d’accélérer le téléchargement des données.

1. Le premier moyen d’accélérer la connexion est de faire du multiplexage, c’est à dire de faire passer plusieurs flux HTTP en parrallèle au travers de la même connexion. Ainsi, une seule connexion est requise.
2. Le deuxième moyen est de compresser les données qui ne le sont pas, notamment les entêtes HTTP.

Attention toutefois : SPDY n’est compatible que pour des URLs sécurisées (HTTPS) : « we believe that the long-term future of the web depends on a secure network connection » ( « nous pensons que le futur du web va s’appuyer sur une connexion réseau sécurisée »).

Enfin, SPDY est déjà compatible avec Chrome et Safari, et c’est déjà pas mal ! Voici ce lien pour une liste des navigateurs compatibles à jour.

Conséquenses sur le développement

Le protocole SPDY permet de s’affranchir de certaines règles qui permettent d’afficher plus rapidement une page web :

1. « moins » besoin de multiplier les noms de domaine des serveurs de fichiers statiques ;
2. pas besoin de faire de Sprites CSS, car le principe du sprite est d’utiliser la même connexion pour télécharger plusieurs images, mais en combinant toutes les images dans une seule.

Installer nginx-1.3.9 avec SPDY sous gentoo

Voici l’overlay à installer 🙂 (ou bien récupérez juste l’ebuild et le patch !)

https://github.com/paxal/nginx-spdy

En savoir plus

• Description du protocole SPDY sur le site de chromium.org : http://www.chromium.org/spdy/spdy-whitepaper
• Une explication officielle (en anglais) : http://googledevelopers.blogspot.fr/2012/04/add-spdy-support-to-your-apache-server.html
• Une explication sur les performances réseau et SPDY : http://lincolnloop.com/blog/2012/jul/12/what-is-spdy/
• Les limites de SPDY : http://lincolnloop.com/blog/2012/jul/12/what-is-spdy/

Update 20.01.2013 : L’ebuild de la version nginx-1.3.11 avec spdy est disponible

Update 03.04.2013 : L’ebuild de la verstion nginx-1.3.15 avec spdy est désormais disponible sur le repository officiel de gentoo

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

Nous y voilà ! Comment sniffer l’HTTPS ? Et bien c’est possible… et voici comment !

0. Préambule

Sniffer le trafic HTTPS est plus compliqué : soit vous décryptez les trames SSL (ça peut prendre du temps…), soit vous vous faîtes passer pour le serveur. HTTPS chiffre toute la connexion, par conséquent il n’est pas possible de récupérer les URLs, ni même le nom de domaine vers lequel les requêtes sont envoyées, vous n’aurez que l’adresse IP, ce qui est bien mais insuffisant !

Alors comment récupérer les données qui passent à travers le SSL ? En redirigeant tout le trafic vers un serveur sur notre machine, déchiffrer, puis jouer le rôle d’un proxy pour finalement renvoyer les données au vrai serveur.

Dans cet article, on va essayer de lire ce qui se passe avec www.paypal.com

1. Sniffer le trafic du mobile

Vous pouvez vous référer à l’article précédent Sniffer le trafic d’un iPhone/Android avec Linux.

2. Quel domaine ?

Comme je l’ai dit, on ne peut pas retrouver quel domaine est interrogé par un webservice en lisant la trame SSL. Mais on peut regarder de quelle IP notre mobile a besoin !

Pour récupérer le nom de domaine, il suffit donc de regarder quelles sont les requêtes DNS qui passent, et de regrouper les adresses IPs données avec l’IP du trafic SSL.

En l’occurence, il s’agira de www.paypal.com.

3. Déchiffrer : stunnel

On va utiliser le fabuleux programme stunnel pour lire le trafic SSL.

stunnel est un programme qui permet en gros d’utiliser SSL pour les clients et les serveurs qui ne le supporte pas. On va donc déchiffrer / rechiffrer le trafic pour le lire en clair.

3.1 Stunnel 1 : accéder en clair à un serveur https

Iil faut configurer stunnel :

pid = /var/run/stunnel-client.pid
client = yes
[www.paypal.com]
accept = 127.0.0.1:50000
connect = www.paypal.com:443

Si vous allez sur http://127.0.0.1:50000/ et que vous acceptez le certificat, vous devriez avoir une page HTML en résultat, signe qu’on a bien été connecté avec paypal.

3.2 Rediriger le trafic SSL vers un serveur sans SSL

Il nous faudra un certificat autosigné, puis créez un fichier mondomaine.pem qui contient la clé et le certificat :

cat mondomaine.key mondomaine.crt > mondomaine.key

Ensuite, il faudra bien configurer stunnel :

pid = /var/run/stunnel-server.pid
client = no
cert = /path/to/www.paypal.com.pem
key = /path/to/www.paypal.com.pem
[www.paypal.com]
accept = 0.0.0.0:50001
connect = 127.0.0.1:50000

Lancez stunnel avec ce fichier de conf : vous devriez pouvoir vous connecter sur https://127.0.0.1:50001/ en acceptant le certificat.

4. Rediriger le trafic provenant du mobile

Pour rediriger le trafic provenant du mobile vers notre serveur, il faut utiliser iptables :

$ iptables -t nat -A PREROUTING -d www.paypal.com -p tcp --dport 443 -j REDIRECT --to-ports 50001

Si vous allez depuis votre mobile sur https://www.paypal.com/, vous devriez avoir une alerte de certificat. Acceptez cette alerte : vous devriez avoir paypal.com, mais en passant par votre serveur.

5. Mais je ne vois toujours rien en clair…

Le trafic en clair passe sur votre localhost : utilisez donc wireshark sur cette interface…

6. C’est pour débugger une app et ça marche pas…

… parce que votre certificat n’a pas été validé par une autorité, et ne le sera jamais ! Envoyez le certificat .crt sur votre mobile (par email ?) et installez-le sur votre mobile 🙂

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

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.

Les fonctions anonymes nommées

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

Exemple : cliquez-moi

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.

Là je dois dire que ça m’a bien surpris ! En regardant les entêtes HTTP de booking.com, je suis tombé là dessus :

X-Recruiting: Like HTTP headers? Come write ours: booking.com/jobs

Ce qui veut dire : "Vous aimez les entêtes HTTP ? Venez écrire les nôtres : booking.com/jobs".

Y’en a qui ne manquent pas d’inventivité !

Comment lire les entêtes HTTP

• avec wget : wget -S -O /dev/null http://www.booking.com/ ;
• avec Firefox : ouvrez la console développeur (Ctrl+Shift+K ?) et tapez l’url du site dans la barre d’adresse. Cliquez ensuite sur la première requête GET ;
• avec Chrome (et Safari ?) : ouvrez la console développeur webkit et tapez l’adresse du site dans l’onglet d’où vous venez.

Et en plus ça leur fait des liens externes (certes pas très pertinents en occurrence)…

Aujourd’hui, je voudrais parler de la propriété CSS :nth-child. C’est une pseudo-classe introduite dans CSS 3, et qui permet de sélectionner des noeuds en fonction du numéro de leur position en tant qu’enfant. C’est très pratique pour colorier les lignes d’un tableau par exemple.

Cette pseudo-classe permet de sélectionner des éléments à partir du k^ème fils tous les p fils : selector:nth-child(pn+k). Les enfants dont la position est égale à une valeur définie par cette suite géométrique est sélectionné.

1. Karmelitt Tripel
2. Kastel Brune
3. Delirium Nocturnum
4. Gulden Draak
5. Chimay 500
6. Malheur
7. St-Bernardus 8
8. Rochefort 10

Rien ne se met à jour ? Vérifiez que votre navigateur est compatible.

Explication

L’idée est de partir du noeud k, puis itérer de faire prendre à n les valeurs entre 0 et le nombre total d’enfants.

• n : tous les enfants du premier au n^ème
• 2n : tous les deux enfants à partir du 0^ème, c’est à dire à partir du 2^ème : 2, 4, 6… Ce sont les nombres pairs.
• 2n+1 : tous les deux enfants à partir du 1^er : 1, 3, 5… Ce sont les nombres impairs
• n+2 : tous les enfants à partir du 2^ème, ou encore tous sauf le premier
• 3n+2 : tous les trois enfants à partir du ^2ème : 2, 5, 8…
• -n+2 : en descendant, tous les enfants à partir du 2^ème : 2, 1 et c’est tout. Ce sont les deux premiers enfants.

Hélas, comme toutes les propriétés CSS3 existantes, cette propriété n’est compatible qu’à partir de IE9+ (et bien sûr Firefox 3+, Chrome, Safari 4+… mais ça va sans dire !).

• La référence de :nth-child sur w3.org
• Compatibilité de la pseudo classe

L’abus d’alcool est dangereux pour la santé. A consommer avec modération.

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.

Exemple d’utilisation

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

Les développeurs le savent bien : comment faire marcher son site sur les autres navigateurs relève à la fois du casse-tête et de la patience : le casse-tête de faire des feuilles de styles compatibles, et la patience pour avoir un environnement permettant de tester tout ça…

IETester

IETester est un logiciel qui vous permet de tester votre site internet sous les différentes versions d’Internet Explorer : IE5.5, IE6, IE6, IE8, IE9, IE10…

Le principe est simple : vous avez des onglets qui vont appeler les différents moteurs de rendus des précédentes versions de IE.

Cerise sur le gâteau : des outils de développements

Non content de fournir déjà ce premier service, IETester englobe aussi des outils de développement : la possibilité de voir le code HTML interprété, mais aussi le style interprété (par le parser IE, pas par IE lui-même !), un DOM explorer…

Par ailleurs, le logiciel dispose aussi de boutons raccourcis bien pratique, comme le rechargement d’une page sans l’utilisation du cache.

Limites : les extensions

Malheureusement – et ce n’est pas du tout un reproche tellement la problématique est différente et complexe – ceci n’est pas une solution pour tester ses extensions sous les différentes version de IE, et ce pour plusieurs raisons :

• IETester n’utilise que le moteur de rendu, donc il n’est pas possible d’ajouter des interfaces (boutons, toolbar, …) ou des BHO a fortiori ;
• les extensions doivent aussi être testées sous les différentes version de windows et différents environnements : XP, Vista, 7 sous différents SP, mais aussi en mode de confidentialité ou non.

Pour ça, je crois que la seule solution est d’utiliser des Virtual Machines conjointement avec des Snapshots.

Voici un petit moyen de tester si un certificat ssl est valide, et s’il le restera encore pendant un certain temps…

Openssl s_client et openssl x509

Openssl donne deux outils qui vont nous servir.

1. Le premier permet de se connecter à un serveur pour envoyer des requêtes

openssl s_client -connect www.openssl.org:443

Cette commande va se connecter au server www.openssl.org sur le port 443 en utilisant le protocole SSL. Vous pourrez ensuite communiquer avec le serveur en HTTP :

GET / HTTP/1.0
Host : www.openssl.org

et le serveur va vous renvoyer la page. On peut aussi utiliser cette technique sur d’autres ports et d’autres protocoles, comme pour le SMTPs, le POPs, etc.

2. Le deuxième permet d’avoir des informations sur le certificat : est-il valide ? Quelle est sa date d’expiration ? Il suffit de piper la première commande avec la deuxième :

echo | openssl s_client -connect www.openssl.org:443 | openssl x509 -noout -enddate

Quelques astuces avec openssl

• Si openssl vous sort qu’un certificat dans la chaîne n’est pas valide, donnez-lui le chemin vers le dossier contenant les certificats racines, par exemple -CApath /etc/ssl/certs
• Si vous voulez éviter d’avoir les erreurs de la première commande en sortie, envoyez-les vers /dev/null : openssl s_client -connect www.openssl.org:443 2> /dev/null
• Si vous voulez connaitres les différentes options de openssl s_client ou de openssl x509, essayez man ssl-s_client ou man ssl-x509

Petit bonus : le script PHP qui teste si un certificat expire bientôt

Articles sources

Tester la date de fin d’un certificat : http://www.brandonhutchinson.com/When_does_my_certificate_expire%3F.html
Tester la validité du certificat avec les certificats racines : http://stackoverflow.com/questions/4103472/ssl-handshake-fails-with-a-verisign-chain-certificate-that-contains-two-ca-si

Voici un cas pratique d’une fonctionnalité bien utile de Firefox : exécuter un code Javascript prédéfini sur une page web donnée.

Lorsque l’on va sur les sites iPhone avec Firefox (pourquoi faire ???), la barre de scroll n’est pas affichée. Il existe pourtant un moyen tout simple de l’afficher :

• Créez un raccourci (bookmark) dans vos marques pages (sur la barre de marques-page personnelle, c’est encore mieux !) : « Marque-pages », « Organiser… » puis créez un raccourci (vous pouvez aussi faire un clic-droit sur la barre personnelle, puis « Nouveau marque-page ») ;
• Nom : mettez ce que vous voulez ;
• Adresse : mettez le code suivant : javascript:document.body.style.overflow="auto";(function(){})() ;
• Ensuite, rendez-vous sur une page sans scrollbar, par exemple le portail sport de Orange pour mobile : http://sports.iphone.m.orange.fr/, et cliquez sur votre favori !

Astuce supplémentaire : utiliser un mot-clé pour les favoris

Pour appeler un favori directement depuis la barre d’adresse (sans avoir à chercher dans vos favoris), attribuez un mot-clé à votre marque page. Il suffit alors de taper le mot clé dans la barre d’adresse pour accéder à la page.

Par exemple, dans notre cas, tapez « M » comme mot-clé pour ce marque page. Rendez-vous sur la page, puis tapez « M » dans la barre d’adresse.