The last update of Aptana block Django development server

The last update of Aptana Studio come with a new built-in Jetty-based HTTP server running on port 8000… the same as Django development server. There is no good way to disable the preview server feature of the popular editor, but our favorite web framework can be launched on another port. Just type python manage.py runserver 8080 instead of python manage.py and access to your work on http://localhost:8080.

novembre 5, 2008 | Filed Under Django, English, Python, XHTML / CSS | Comments

La faille de sécurité touchant MessengerFX semble corrigée

Il y’a quelques temps, j’avais découvert une vulnérabilité de type Cross Site Scripting dans MessengerFX, un client web populaire pour le réseau Windows Live Messenger, qui pouvait avoir de fâcheuses conséquences : en plus de pouvoir faire planter le navigateur de n’importe quel utilisateur du service, elle permet d’accéder à toutes les fonctionnalités implémentées par Messenger FX ce qui signifie entre autre : récupérer la liste de contact de l’utilisateur, envoyer des messages en son nom, supprimer, bloquer et débloquer des personnes de sa liste de contact et lui en ajouter, lire les messages, bref : de prendre le contrôle complet du compte MSN de la victime.

Vendredi, j’ai reçu un email de l’équipe MessengerFX m’indiquant que le problème est corrigé :

Hi Kevin,
First of all i want to thank you for your warn. We fixed that problem and
now its working correctly.
[...]

La correction actuelle ne permet plus d’envoyer de code Javascript via MessengerFX à un ami et éxecute toujours le dis code en local (sur l’ordinateur de celui qui l’envoi). L’équipe indique que la prochaine version, bientôt disponible, inclura une meilleure gestion de l’envoi de code via l’application internet.

octobre 6, 2008 | Filed Under Buzz, Musique du Jour, Sécurité, Web 2.0, XHTML / CSS | Comments

Smush it : le service web qui optimise vos images !

Smush it est un tout nouveau service en ligne qui fera la joie des intégrateurs et de tous ceux qui publient des images en ligne.

Il permet de sensiblement réduire le poids des images qui composent vos pages web afin d’accélérer leurs temps de chargement. L’algorithme utilisé est très performant, il permet même de gagner quelques bits sur des images déjà passées dans les moulinettes fournies par Photoshop et Fireworks.

L’interface est agréable, elle permet de traiter en une fois toute une série d’images qui vous seront restituées sous leur forme optimisée dans une archive Zip.

Encore plus fort, une extension pour Firefox est diponible. Elle permet d’optimiser toutes les images contenues dans une page internet par un simple click sur une icône qui apparaît dans la barre d’état de votre navigateur.

Très bon service, bien pensé et bien fini !

octobre 1, 2008 | Filed Under Buzz, Web 2.0, XHTML / CSS | Comments

Ajax Syntax Highlighter 1.0 beta 1 released

Yeah, it’s the first public release of the new syntax highlighter announced in my previous post !

Ajax Syntax Highlighter is a small Javascript utility designed to highlight code embed in a web page in a semantic and standard compliant way.
It automatically looks for source code in the page, send it to a server-side highlighter and display the highlighted code. It also has a « view as plain text » feature and internationalization (French translation available).

Ajax Syntax Highlighter is built with Yahoo! UI and uses JSON for serialization.
It currently includes GeSHi as server-side (PHP required) highlighter but it can be easily used with others such as Pygments.

As you can see, the current graphics come from SyntaxHighlighter and are not so good. If you have some webdesign skills and can help me to enhance it, please contact me !

septembre 10, 2008 | Filed Under Ajax Syntax Highlighter, PHP, Planet Libre, Projects, Web sémantique, XHTML / CSS | Comments

Du code dans vos pages web !

Sur ce blog comme c’est le cas sur beaucoup d’autres sites traitant de programmation, je suis souvent amené à publié des snippets de code source ou des dialogues homme – machine (des successions de commandes). HTML et XHTML disposent de balises dédiées à cette tache particulière qui sont malheureusement trop souvent ignorées alors qu’elles ont une forte valeur sémantique. Elles sont vieilles comme le web et supportées par tous les navigateurs les plus populaires.

Quels avantages ?

Structurer correctement l’information contenu dans les pages internet permet aux logiciels (robots des moteurs de recherches, …) de plus facilement lui donner un sens et déterminer sa nature. Une application concrète pourrait être la création d’un moteur de recherche de code source et de snippets à la Google Code utilisant les balises présentées ci-dessous pour déterminer le type d’articles et le langage utilisé. A l’échelle d’un blog comme le mien, on pourrait aisément mettre en place un système de coloration syntaxique (qui est en fait déjà développé) ou encore un agrégateur de snippets.

De manière plus pragmatique, utiliser le bon élément associé au type de donnée à représenter (code source, saisie clavier, sortie d’un programme, …) permet de simplement styler la page via les CSS pour en facilité la lecture (exemple : les entrées utilisateur en bleu, les sorties système en vert, …).

Intégrer le code source d’un programme

Comme son l’indique, la balise code permet d’afficher du code source. Combinée à la balise pre qui permet d’afficher du texte préformaté, elle est tout à fait adapté à des blocs de code :

<pre><code class="language-c">#include <stdio.h>

int main() {
  printf("Bienvenue sur Lapin Blanc !\n");
  return 0;
}</code></pre>

Ce qui donnera :

#include <stdio.h>

int main() {
  printf("Bienvenue sur Lapin Blanc !\n");
  return 0;
}

La spécification HTML actuelle ne précise aucun moyen d’indiquer le langage de programmation dans lequel est écrit le code. Nous utilisons ici la convention présente dans le brouillon de HTML 5 (qui reste tout à fait valide en HTML 4.01 et XHTML 1.1) qui consiste à ajouter à la balise code un attribut class dont la valeur commence par language- et se termine par le nom du langage de programmation utilisé en toutes lettres : par exemple pour du C# nous utiliserons language-c-sharp. Comme nous le verrons plus bas, cette convention pourra être utilisée pour activer la coloration syntaxique.

Une autre balise peut être utile, plus spécifiquement lors de la publication de formules mathématiques ou d’algorithmes : il s’agit de var qui permet de représenter une variable.

Tant que la variable <var>x</var> vaut vrai, on boucle.

Ce qui donne : Tant que la variable x vaut vrai, on boucle.

Représenter un dialogue homme – machine

Dans des tutoriels comme celui présentant l’installation d’une solution LAMP sur un serveur Gandi, il est nécessaire de retranscrire un grand nombre d’interactions avec le système. Généralement la saisie de commandes et la sélection d’items dans les menus.

Deux balises sont prévues à cet effet : samp et kbd. Le premier (issue de sample) représente la sortie d’un programme tandis que le second (pour keyboard) spécifie les entrées utilisateurs.

Un petit exemple de leur utilisation avec la saisie de la commande uname dans le terminal de Mac OS X :

<pre><samp>Welcome to Darwin!
<samp class="prompt">Crokette:~ keyes$</samp> <kbd>uname -a</kbd>
Darwin Crokette.local 8.11.1 Darwin Kernel Version 8.11.1: Wed Oct 10 18:23:28 PDT 2007; root:xnu-792.25.20~1/RELEASE_I386 i386 i386
<samp class="prompt">Crokette:~ keyes$</samp> <samp class="cursor">_</samp></pre>

Ce qui rendra :

Welcome to Darwin!
Crokette:~ keyes$ uname -a
Darwin Crokette.local 8.11.1 Darwin Kernel Version 8.11.1: Wed Oct 10 18:23:28 PDT 2007; root:xnu-792.25.20~1/RELEASE_I386 i386 i386
Crokette:~ keyes$ _

Comme vous pouvez le voir, nous utilisons des balises samp et kbd au sein d'une balise samp ce qui nous permettra de le styler simplement à l'aide de CSS et rendre la lecture de cette interaction beaucoup plus claire pour l'utilisateur (par exemple à l'aide d'un code couleur pour les entrées/sorties).

Le brouillon de la spécification de HTML 5 définie plusieurs sortes d’agencement possibles pour les balises samp et kbd :

The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).

When the kbd element is nested inside a samp element, it represents the input as it was echoed by the system.

When the kbd element contains a samp element, it represents input based on system output, for example invoking a menu item.

When the kbd element is nested inside another kbd element, it represents an actual key or other single unit of input as appropriate for the input mechanism.

En voici une libre traduction :

L’élément kbd représente une entrée utilisateur (généralement une saisie clavier, bien qu’il puisse représenter d’autres entrées, tels que des commandes vocales).

Quand l’élément kbd est imbriqué dans un élément samp, il représente la saisie telle qu’elle a été affichée par le système.

Quand l’élément kbd contient un élément samp, il représente une entrée basé sur une sortie du système, par exemple pour appeler un item de menu.

Quand l’élément kbd est imbriqué dans un autre élément kbd, il représente la touche ou unité d’entrée équivalente utilisable avec le mécanisme d’entré.

La coloration syntaxique

Nous l’avons vu, styler via CSS les éléments présentés précédemment permet de simplifier la lecture de nos articles. Concernant les codes sources publiés, n’importe quel développeur ayant utilisé autre chose que notepad.exe comme éditeur de texte vous le confessera : la coloration syntaxique est un plus indéniable pour la lecture et la compréhension.

Plusieurs logiciels permettent d’activer la coloration syntaxique sur vos pages webs :

GeSHi est l’un des plus populaires et performant. Écrit en PHP, il supporte de nombreux langages mais à la désavantage de coloré le code coté serveur et de détruire à la conversion tous le soin que vous aurez apporté au balisage de votre page web…
SyntaxHiglighter est lui un script JavaScript qui colorera le code à sa manière pour les lecteurs humains mais le préservera dans sa forme originelle pour tous les robots et autres terminaux ne supportant pas JavaScript. J’ai créé un tout petit patch afin de le rendre plus ou moins compatible avec les standards présentés dans cette article. (C’est celui qui est utilisé sur ce blog actuellement).
Ajax Syntax Highlighter est la solution hybride que je développe. Un script JavaScript côté client détecte les snippets inclus dans la page et les envoi côté serveur pour être colorés (pour l’instant à l’aide de GeSHi). Comme SyntaxHighlighter (dont il reprend une partie de la CSS), il dispose d’une fonction « voir comme texte ». (Ce projet n’est pas encore publié, il le sera d’ici très peu de temps).

Ce billet s’inspire en parti de l’article Lesser-know semantic elements disponible sur l’excellent centre de ressource Opera Web Standard Curriculum.

septembre 3, 2008 | Filed Under PHP, Programmation, Standards du web, Web sémantique, XHTML / CSS | Comments

Réaliser un site Flash/Flex optimisé pour le référencement

… est accessible.

La technologie Flash / Flex d’Adobe est en passe de s’imposer sur le marché des applications internet riches. Elle permet une expérience utilisateur impressionnante impossible à atteindre avec du HTML standard, les sites en Flash sont fluides, jolis et très interactifs. Côté licence, la plateforme Flex est libre (sous licence MPL) alors que les spécifications de Flash et certains de ses composants sont en train d’être libérés.

Boîte de Flex Builder

Pourtant, un lourd défaut noirci le tableau : les animations Flash sont contenues dans un format binaire (les fichiers d’extension SWF), difficilement lisibles par les robots et peu ou pas accessibles aux personnes souffrants de handicaps et utilisant, par exemple, des lecteurs d’écrans. Ce format de fichier est très pénalisant pour un site à contenu car il sera mal indexer par les moteurs de recherches, source principale de trafic pour un site internet classique, et très difficile à référencer.

Autre problème dont souffre de nombreuses applications Flash / Flex : l’impossibilité de mettre en favoris une page précise du site ni d’utiliser les boutons suivants et précédents du navigateur. A l’heure des systèmes de favoris sociaux, des blogs et des agrégateurs à la DIGG, il est nécessaire de fournir des « permaliens » (liens permanents), permettant d’accéder directement à une ressource précise afin, la encore, de ne pas perdre un trafic non négligeable.

Nous nous trouvons donc en-face d’un dilemme, souhaitons nous un site attractif très positif pour l’image de marque ou un site populaire bien classé dans les moteurs de recherches ? Les deux, bien entendu.

Une première réponse se trouve dans l’utilisation de SWF Address. Cette bibliothèque libre utilisant les ancres HTML et Javascript permet de simuler différentes pages au sein d’une animation Flash, d’y accéder directement depuis la barre d’adresse (donc de l’ajouter aux marques pages) et de réactiver les boutons précédent et suivant du navigateur. SWF Address constitue un petit plus pour l’usabilité et notre site pourra maintenant profiter pleinement des systèmes de bookmarks sociaux comme des digg-like, pourtant le problème principal n’a pas disparu : comment feront un lecteur d’écran ou le robot d’un moteur de recherche pour accèder au site ?

L’idée est de générer une version alternative du site, en pur HTML, dispensant le même contenu. Ce site sera accessible à tous les robots et autres logiciels incapables de lire du Flash. Malheureusement, un visiteur effectuant une recherche arriverait lui aussi sur la page HTML et ne profiterait pas de l’interface amélioré. Détectons donc la présence du plugin Flash et le redirigeons vers la même page dans sa version Flash, ce qui est désormais possible grâce à l’utilisation de SWF Address !

Pourtant, créer et maintenir deux versions d’un même site est long et fastidieux. Il nous faut donc trouver un moyen de générer automatiquement la version HTML du site. Pour cela, on pourrait transformer les animations Flash en HTML avec l’outil d’Adobe nommé swf2html. Malheureusement, celui-ci ne sait extraire que les textes statiques et ne supporte pas les dernières versions de Flash (adieu la 3D temps réel, l’Action Script 3 et autres joyeusetés). De plus, il est déjà utilisé par les moteurs de recherche pour tenter d’indexer les sites Flash et les résultats sont loin d’être encourageants.

Une approche plus saine serait de séparer le contenu de la présentation, c’est à dire de stocker les données du site en dehors des animations, dans des fichiers XML. Flash gère très bien ce format et pourra récupérer les données qui lui sont nécessaires à la volée en lisant. Cette méthode est transparent pour l’utilisateur et permet une maintenance beaucoup plus aisé du site (en cas de modifications dans le contenu plutôt que dans le contenant, il suffit d’éditer un fichier texte, pas besoin de disposer du logiciel Flash ni de recompiler l’animation complète). Nous pourrons ensuite très facilement transformer nos données XML en site internet HTML, par exemple en utilisant XSLT. Nous aurons ainsi deux versions de notre site internet et celui-ci sera accessible, parfaitement référencé, et disposant d’une interface riche de dernière génération.

Cerise sur le gâteau, cette technique rend notre site accessible aux périphériques mobiles ne supportant pas les dernières versions de Flash (téléphones mobiles, PDA, …).

Encore une fois, XML nous permet de marier le meilleur de deux technologies, en ne négligeant ni l’expérience utilisateur ni l’accessiblité et le référencement !

mai 27, 2008 | Filed Under Référencement, Standards du web, Web 2.0, XHTML / CSS | Comments

Mes projets à nouveau en téléchargement

Après avoir été séquestrés pas mal de temp dans ma cave numérique, mes projet peuvent à nouveau regagner l’air libre !

Retrouvez certains de mes projets sous licence libre en téléchargement ! On y trouve essentiellement des logiciels pour le web et pour Ubuntu Linux, jettez-y un oeil.

mai 20, 2008 | Filed Under Android, OS, Planet Libre, Programmation, Python, Référencement, Scoopeo, Ubuntu, XHTML / CSS | Comments

Vulnérabilité critique dans MessengerFX

MessengerFX est un client populaire pour Windows Live Messenger (anciennement MSN Messenger) écrit en AJAX. Sa spécificité et de permettre de se connecter au réseau via un simple navigateur web.

En voulant coller du code HTML à Edouard, je me suis rendu compte qu’il était interprété par le navigateur. Faille de type XSS ? Effectivement ! Sauf que celle-ci n’est pas bénigne : en plus de pouvoir faire planter le navigateur de n’importe quel utilisateur du service, elle permet d’accéder à toutes les fonctionnalités implémentées par Messenger FX ce qui signifie entre autre : récupérer la liste de contact de l’utilisateur, envoyer des messages en son nom, supprimer, bloquer et débloquer des personnes de sa liste de contact et lui en ajouter, lire les messages, bref : de prendre le contrôle complet du compte MSN de la victime.

Pire, il est tout à fait possible d’écrire un vers en utilisant les fonctions d’envoi de message. Ce vers pourrait par exemple supprimer tous les contacts de toutes les personnes connectées à Messenger FX… voir faire tomber le réseau MSN dans son ensemble par une attaque de type DDOS.

J’ai envoyé un email au propriétaire du service qui reste à ce jour sans réponse. En attendant une correction, simple comme un htmlspecialchars(), abstenez-vous d’utiliser Messenger FX et préférez-y Meebo ou le client officiel de Microsoft version web !

Edit du 6 octobre 2008 : la faille semble maintenant corrigée.

mai 16, 2008 | Filed Under Programmation, Sécurité, Web 2.0, XHTML / CSS | Comments

MessengerFX allows your contacts to take control over your WLM

I have paste some HTML code to a Edouard using MessengerFX, a popular web Windows Live Messenger client based on AJAX, and - surprise, the code has been interpreted. Oh?! A XSS vulnerability ? Yes, and such a big one!

Every software’s feature is available through Javascript. Any contact of a MessengerFX user can crash his browser, and furthermore get its contact list, add, remove, ban and unban contacts, read and send messages to any other contact of the victim ! Basically, an attacker just need to be listed in the contacts list of an MessengerFX user and this attacker can take control over the account.

And the worst is coming… Using Javascript, it seems easy to write a worm that will, i.e. recursively delete every contacts of the MessengerFX users - say using the vulnerability to get the contact list and delete them one by one. The worm can also try to shutdown the WLM network with a DDOS attack by a heavy load of messages at the same timeusing infected MessengerFX users WLM accounts.

MessengerFX is popular and growing, such a flaw can be very dangerous for a lot of people. I have send a mail to the development team and I hope they will correct their application soon… Because the fix is as simple as a htmlspecialchars() call. MessengerFX users, don’t use it anymore and try Meebo or the official Microsoft WLM web based client. Web developers, never trust the user-submitted data and always escape thos inputs!!

Edit october 6 2008 : the problem is now corrected.

mai 16, 2008 | Filed Under English, Sécurité, Web 2.0, XHTML / CSS | Comments

Les archives de Bienvenue chez moi enfin en ligne

Chose promise chose due !

Les archives de Bienvenue chez moi, mon ancien blog, sont désormais disponibles. Tous les commentaires et articles ont étaient restaurés. Vous y trouverez un grand nombre de tutoriels pour Ubuntu et Linux en général ainsi que les anciennes version de Easy Ubuntu, des modules pour PunBB, et des billets traitant de programmation (PHP, Python, DokuWiki, …).

Bienvenue chez moi c’est plus de 100 billets et de 15 000 commentaires, c’est quelques premières pages de Digg, et ce fut une partie de moi pendant un certain temps !