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.

Quelques moteurs de recherches

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.

Web 2.0

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 ?

SWF Address

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.

XSLT: Rough Cuts Version, Second Edition

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 !

Mon premier billet sur le blog d’Ankama Web

Le voici le voila, mon premier billet sur Bande Passante, le blog d’Ankama Web. Il s’agit d’une petite revue de Firefox 3.

[MdJ] The restarts – Big Rock Candy Mountain

Du Punk qui envoi !

http://www.myspace.com/therestarts – Piste n°2

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.

[Musique du Jour] The Prodigy – Voodoo People (Pendulum Remix)

Musique du Jour ? Eh oui, c’est nouveau ! Tous les jours je vous ferez (re)découvrir une musique que j’apprécie, pas de commentaire, juste du plaisir pour les oreilles !

free music

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.

Faille de Cross Site Scripting dans MessengerFX

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.

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.

Back online !

Après quelques semaines d’interruption suite à un crash disque, Lapin Blanc ! est à nouveau en-ligne.

Amis lecteurs de Place Libre, vous tombez sur cette page car Place Libre (hébergé sur ce même serveur) n’est pas encore réparé. On y travaile !