Et là vous me dites WTF ?

Le FBML est le langage de balises mis à disposition des développeurs par Facebook. C’est une version enrichie du HTML avec des fonctions propres à Facebook en quelques sortes. Je m’en suis relativement peu servi dans mes développements d’applis (en même temps j’en ai relativement peu développé aussi) mais la doc est très complète et assez explicite…

Je me suis intéressé à cette partie des développement sur Facebook pour une raison qui ne vous est pas étrangère si vous êtes un(e) habitué(e) de mon blog : les fanpage dont il faut devenir fan pour voir le contenu.

C’est en effet un seul tag FBML qui s’occupe de faire cela : <fb:if-is-app-user>Contenu à cacher</fb:if-is-app-user>.

Tout le texte contenu entre les deux balises est invisible aux « non-fans » de la page ou de l’application.

Bon on a déjà vu que c’était fait à l’arrache et qu’une simple ligne de javascript permet de réafficher le contenu caché (qui est en fait présent dans la page mais caché par un simple « visibility:hidden » en CSS inline).

Jusque là rien de bien grave, cette fonction étant utilisée principalement pour cacher des contenus ultra-confidentiels tel qu’une revue de photos choc (apparues sur 4chan en 2001)… Mais là où ça se gâte c’est que la doc FBML nous présente plusieurs autres balises du même style :

• <fb:visible-to-user uid=’12345′></fb:visible-to-user>
• <fb:visible-to-owner></fb:visible-to-owner>
• <fb:visible-to-friends></fb:visible-to-friends>

Je vous fait pas la description détaillée des balises je pense que c’est assez explicite comme cela (visible pour un seul user, pour le propriétaire de la page / l’appli, pour les amis du propriétaire de la page / l’appli).

Et sur la doc toujours Facebook de s’empresser d’ajouter la mention suivante :

Do not use this tag to display private or sensitive information. Content inside this tag is rendered to all users’ browsers, including those who have not granted full permissions to the application. For those who have not done so, the content is shown as white space on the page but it is still visible by viewing the page source.

Donc facebook est au courant du fait que des informations potentiellement sensibles peuvent être encapsulées dans ces balises censées justement protéger le contenu et, au lieu de sécuriser lesdites balises au niveau serveur, préfère mettre en garde les développeurs que ce n’est pas une bonne idée d’utiliser leurs technologies…

Comme vous vous en doutez, j’ai assez vite retrouvé une méthode pour identifier le créateur d’une fanpage… Cette méthode est, en plus, beaucoup plus simple…

Il suffit de se rendre à l’url qui suit en remplaçant [node_id] par l’id de la fanpage (une longue chaine de chiffres présente dans l’url) et [start] par le multiple de 10 directement inférieur au nombre de fans de la page.

http://www.facebook.com/social_graph.php?node_id=[node_id]&class=FanManager&start=[start]

Par exemple, pour la fanpage de BDG (node_id = 427819145176 et nombre de fans (actuels) = 2601) cela donne :

http://www.facebook.com/social_graph.php?node_id=427819145176&class=FanManager&start=2600

(Profitez-en pour devenir fan d’ailleurs, ça coute pas plus cher )

Notez au passage que la navigation disponible en bas de la liste des membres ne fonctionne pas au delà de 2000 personnes, mais que la saisie au clavier, directement dans l’url, de la page désirée se passe sans aucun soucis.

Mais pour écrire cet article en particulier je vais devoir rebondir sur l’actualité de ces derniers jours : la mise à mal successive des deux plus gros réseaux sociaux actuellement en place par des failles à la limite du 0day et surtout la façon dont les deux start-ups devenues multinationales ont su (ou pas d’ailleurs) gérer la crise.

Les failles

Petit retour sur les deux failles dont je vais vous parler ici afin que vous puissiez suivre la gravité de la situation si vous étiez dans un igloo cette semaine.

Facebook

Mercredi dernier (le 5 mai donc), Techcrunch publie un article expliquant qu’une simple manipulation permet de voir le chat Facebook d’autres comptes que le sien. L’exploit est ultra-simple et permet aussi d’avoir accès aux dernières demandes d’ajout, derniers messages et dernières notifications. Il suffit pour cela de se rendre dans la partie « Privacy settings » (Paramètres de confidentialité) et d’utiliser la fonctionnalité permettant de voir son profil comme le voit un de ses amis.

En allant un peu plus loin on se rend compte qu’il suffit d’ajouter le paramètre ?viewas=[id du profil cible] à l’url de son profil personnel pour avoir accès à toutes ces informations sensibles – que l’on soit ami avec la personne ou non.

Twitter

Hier (le 10 mai donc), Gizmodo publie un article (supprimé depuis mais dont vous pouvez retrouver l’essence du contenu chez l’ami Korben – en français en plus !) expliquant que l’on peut, depuis l’interface web de twitter, et sans aucune connaissance en informatique là encore, forcer n’importe qui à devenir l’un de vos followers.

Il suffit pour cela, en lieu et place de votre statut, de taper « accept username » où username serait le nom d’utilisateur twitter de la personne que vous voulez voir apparaître dans votre liste de followers – « accept Paul_Da_Silva » par exemple…

La gestion de la crise

Ces deux failles sont énormes et simplicimes d’exploitation, vous en conviendrez. Il y a d’ailleurs du y avoir quelques personnes qui se sont fait taper sur les doigts dans les HQ des deux sociétés concernées… Du coup très vite les articles pleuvent un peu partout sur la toile et, compte tenu de la simplicité des failles, les deux sociétés doivent agir dans l’urgence pour éviter que l’anarchie s’empare de leurs sites respectifs.

La réaction Facebook

« Euh… Sérieusement les gars ?! » C’est à peu près la réaction que j’ai eu en voyant les mesures prises par Facebook pour protéger notre vie privée face à cette faille énorme. En effet, les petits gars de Zuckerberg se sont contenté de désactiver le chat – sans explication et en laissant le reste de la faille ouverte le temps de patcher tout cela. La bonne solution aurait été de carrément désactiver la fonctionnalité « viewas » qui posait problème non ? Et franchement niveau code une bête ligne aurait suffit à cela :

if(isset($_GET['viewas'])) $_GET['viewas'] = 0000;

La réaction twitter

Là c’est un peu plus compliqué : la faille permet de réellement altérer le fonctionnement de Twitter et les abonnements de diverses personnes devaient déjà avoir été modifiés. La solution du petit oiseau bleu : on remet tous les compteurs à zéro (followers et following) le temps de patcher la faille et de tracker les vilains profiteurs qui se sont ajouté des following.

Niveau communication ça donne quoi ?

Si twitter a assez vite réagi en publiant un message sur leur blog suivi de plusieurs updates au fur et a mesure de la résolution du problème, Facebook est resté complètement muet sur le problème qu’ils ont subi, prétextant une maintenance pour justifier de la désactivation du chat pendant plusieurs heures.

Si l’on peut apprécier la transparence de twitter, on est en droit de se demander si la politique de Facebook n’a pas aussi ses avantages : même s’ils ont volontairement caché une faille de sécurité mettant (encore un peu plus) à mal la confidentialité des données présentes sur son réseau, beaucoup moins de monde a pu en profiter que s’ils avaient publié un message sur la homepage de tous les utilisateurs précisant les raisons de la désactivation du chat…

Bref en un mot il n’y a pas de solution miracle de gestion de la crise, mais une fois ladite crise passée il aurait été appréciable que Facebook informe les utilisateurs du fait que leurs données avaient été rendues « publiques » l’espace de quelques heures. Solution surement écartée pour éviter une vague de désinscription qui est déjà bien amorcée.

En passant, j’en profite pour vous inviter à me suivre sur twitter, vu que je ne peux plus vous ajouter moi même : @Paul_Da_Silva

Je me suis un peu penché sur le problème et y ai trouvé une solution très simple et diablement efficace : une seule ligne de javascript (pondue par mes soins un jour de repos !) qui permet d’afficher le contenu caché sans avoir à rejoindre quoi que ce soit.

La ligne en question la voici :

javascript:spans=document.getElementById("tab_canvas").getElementsByTagName("span"); for(var sp in spans){spans[sp].style.visibility="visible"}

Pour que cela fonctionne il faut que vous soyez sur l’onglet de la page qui contient le contenu caché. Souvent il s’agit du premier onglet à être ouvert quand vous cliquez sur un lien. Ensuite vous avez deux solutions : la copier/coller dans la barre d’adresse à la place de l’url et valider avec la touche entrée comme si vous veniez d’entrer une réelle url. Ou, plus simple, ajouter un favoris dans votre navigateur dont l’adresse serait cette fameuse ligne. En plaçant le favoris dans la barre personnelle de Firefox par exemple vous n’aurez plus qu’à cliquer sur le bouton pour que le contenu de la page se mette à jour en direct.

Comment et pourquoi cela fonctionne

Le principe de ces pages est très simple : le créateur ajoute un onglet à sa page pour y faire figurer son contenu et décide de n’afficher le contenu qu’aux membres en le cachant aux autres dans un bête <span> caché par la propriété CSS visibility:hidden. Partant de là il suffit de parcourir tous les spans de la page affichée et de transformer la propriété visibility:hidden en visibility:visible.

Bien sûr cette méthode ne fonctionne que pour les balises <span> et uniquement si celles-ci ont été cachées en utilisant la propriété visibility. Mais jusqu’à présent je n’ai pas trouvé une seule page sur laquelle cela ne soit pas fait comme cela.

Petit conseil aux super développeurs qui ont pondu un concept du genre : utilisez des <div> ou d’autres balises et les propriétés display ou opacity pour continuer à ferrer du pigeon ! Et quand ça ne suffira plus il faudra songer à cacher le contenu côté serveur et à le faire apparaître en Ajax ^^

Je sais j’écris beaucoup à propos de Facebook ces derniers temps. Mais là j’ai trouvé un truc assez intéressant pour retrouver le créateur d’une page fan sur le réseau social le plus utilisé du moment.

Je vous préviens tout de suite, la technique est assez compliquée et implique de trifouiller un peu plus que d’habitude.

L’idée est assez simple à la base :  lorsque l’on affiche la liste des fans d’une page, ceux-ci sont affichés par ordre d’inscription – les derniers inscrits étant affichés en premier. Aussi, en toute logique, le créateur de la page doit-être le dernier de la liste aka le premier inscrit.

Lorsque la page n’a qu’un faible nombre de fans il est assez simple de tous les parcourir à la main – Mais si l’on s’attaque à un sujet hautement intellectuel tel que « Obliger un agent de la SNCF à travailler et le regarder pleurer » (exemple pris au hasard parmi les derniers statuts de mes amis facebook), on ne va pas s’amuser à parcourir xx pages à la main.

De quoi a-t-on besoin ?

Pour trouver cette astuce je me suis basé sur Firefox ainsi que deux de mes extensions préférées : Tamper Data et Firebug.

Avec Tamper Data on va modifier la requête envoyée par Facebook pour choisir d’afficher la dernière page – ceci va générer un bug et les données, bien que transmises, ne seront pas affichées – il faudra donc les lire à l’aide de Firebug.

Tamper Data

Tamper Data permet de modifier tous les paramètres d’une requête envoyée au serveur – qu’elle soit synchrone ou asynchrone. Cette extension est très pratique pour faire des essais en Ajax et avait déjà été utilisée dans un précédent hack qui permettait de visionner tous les profils Facebook, qu’ils soient publics ou non. Télécharger

Firebug

Je n’ai même pas envie de présenter cette extension tant vous auriez tort de ne pas déjà la connaître ! En l’occurrence elle va nous servir à analyser le retour d’une requête Ajax que le script côté client a du mal à rendre… C’est pas grave, on est plus fort que Chuck Norris, on lit directement le code source ! Télécharger

La méthode

Avant toutes choses il faut afficher la popup listant les fans de la page. Pour ce faire, un simple clic sur le nombre de fans devrait suffire (si ça bloque là, le mieux c’est que vous arrêtiez tout de suite sinon on va pas s’en sortir hein !)

Une fois la popup chargée – et surtout pas avant – lancez les deux extensions nécessaires à savoir Tamper Data et Firebug.

Dans la fenêtre de Tamper Data cliquez sur « Démarrer altération » et laissez Firebug ouvert sur la console.

Il ne reste plus qu’à descendre tout en bas de la popup listant les fans pour cliquer sur « Suiv. » Ceci aura pour effet de déclencher Tamper Data qui vous proposera de modifier la requête. Acceptez et décochez la case « Continuer altération » : nous n’avons qu’une requête à forger.

Dans la fenêtre qui s’ouvre vous pouvez modifier tous les paramètres transmis en Ajax à Facebook. Le paramètre qui nous intéresse est le paramètre « Page » que vous devez passer à l’indice de la dernière page. Les pages contenant 100 personnes à chaque fois il suffit de diviser le nombre de fans par 100 pour trouver l’indice de la dernière page. Pour mon exemple : il y a 7944 fans donc il faut remplacer le paramètre « 1″ par « 79″.

Une fois ce paramètre modifié, vous pouvez envoyer la requête en cliquant sur « Ok ». Veillez bien à ce que Firebug soit lancé avant de cliquer sur le bouton « Ok », sinon ça ne sert à rien A la question « voulez vous modifier … » répondez « Oui ».

Enfin, il vous suffit d’analyser le retour Json de la dernière requête passée à Facebook – et plus précisément son dernier enregistrement – pour trouver le créateur de la page.

La requête à analyser est celle dont l’url est http://www.facebook.com/ajax/social_graph/fetch.php?__a=1. En cliquant sur le petit signe + à gauche de l’url vous pourrez visionner le retour Json de la requête. Celui-ci est un tableau associatif de la forme suivante :

« id_profil »:{« id »:0000, »title »: »Prénom Nom », »alternate_title »: »", »href »: »http:\/\/www.facebook.com\/url », »subtitle »: »", »index »:89, »pic »: »http:\/\/profile.ak.fbcdn.net\/image.jpg », »actionText »: »Ajouter comme ami(e) », »action »: »add_friend »}

L’enregistrement qui nous intéresse est donc le dernier du tableau, celui qui arrive juste avant les informations relatives au nombre de membres du groupe et de la page – celui qui précède : ,"count":7944,"page":79}

Et plus particulièrement, ce qui nous intéresse ici c’est le paramètre title qui contient le couple nom / prénom du créateur et éventuellement le alternate_title qui contient l’url encodée du profil du créateur.

Je songe à faire une extension Firefox qui automatise tout le process parce que là c’est peut-être un peu compliqué pour un novice… Ça vous brancherai ?

Accessoirement je me permet de rebondir sur un fait d’actualité : Facebook a été condamné à donner le nom du créateur d’une page jugée insultante… Si vous le voulez le nom, je l’ai Mais elle ne risque pas grand chose : elle vit en Allemagne.

Cette manœuvre peut-être assez fastidieuse si l’on doit tous les sélectionner un par un… Aussi je vous propose aujourd’hui une astuce qui vous permettra de sélectionner tous vos amis d’un coup. Libre à vous, ensuite, de désélectionner ceux qui ne seraient pas intéressés par la fanpage de Benjamin Biolay (ouais pourquoi pas).

Une fois la popup DHTML servant à inviter les amis ouverte (donc après avoir cliqué sur « Recommander à des amis » pour une fanpage ou « Inviter des amis à rejoindre le groupe » pour un groupe), vous devrez copier/coller le code suivant dans la barre d’adresse de votre navigateur :

javascript:els=document.getElementById(‘friends’).getElementsByTagName(‘li’);for(var id in els){if(typeof els[id] === ‘object’){fs.click(els[id]);}}

Il suffit ensuite d’appuyer sur la touche entrée et d’attendre quelques secondes (en fonction de votre nombre d’amis) pour voir toutes les petites vignettes s’illuminer.

Vous n’avez plus qu’à valider votre choix pour effectivement inviter tous vos amis; comme si vous veniez de tous les sélectionner à la main.

Petite analyse du code en question :

On commence par préciser que l’on ne va pas passer une url mais un code javascript avec la bête instruction javascript:

Ensuite, on va sélectionner tous les <li> enfants de la liste <ul id= »friends »>.

Ces <li> sont stockés dans la variable els que l’on va parcourir dans une boucle for in que les habitués du javascript ou même du bash devraient connaître.

Finalement, pour chacun de ces éléments, on va appeler la fonction fs.click(els[id]); qui est normalement appelée si l’on clique effectivement sur l’élément en question.

L’avantage de ce type de campagne est qu’elle est relativement peu couteuse dans la mesure où c’est l’éditeur (moi en l’occurrence donc) qui fixe le cout au clic (ou à l’affichage, mais sur Facebook aucun intérêt de choisir cette option) ainsi que le coût maximum par jour de la campagne.

Comprenez par là que si je veux payer 0.02€ par visiteur sans excéder les 2€ par jour je peux tout à fait le faire. C’est d’ailleurs plus ou moins les réglages que j’avais utilisé à l’époque.

Il y a de cela un certain temps, j’avais lancé une campagne pour unfoyer.com sur Facebook et j’avais du arrêter à cause de frais bancaires trop élevés dus à une facturation en dollar. J’étais donc très content de voir que la facturation avait évolué et qu’elle proposait désormais de choisir la devise dans laquelle on souhaitait être facturé.

Je passe donc ma campagne de publicité tranquille, sachant que je maitrise mon budget et qu’il s’agit d’un faible investissement…

Arrive mon relevé de banque avec les prélèvements automatiques de Facebook… Et là c’est une certaine surprise qui m’attendait.

Non content de me faire payer en plusieurs fois pour un montant qui est pourtant dérisoire – un peu plus de 10€ découpés en 3 paiements – je m’aperçois que les prélèvements sont effectués directement depuis la maison mère aux Etats-unis.

Ma banque, comme la plupart à ma connaissance, facture ce type de transaction au même titre que les transactions effectuées dans une autre devise avec pour motif que le paiement se fait « hors zone euro ».

Ainsi pour une campagne de publicité de 10€ j’ai du payer près de 30% de frais bancaires supplémentaires (ceux-ci étant calculés sous la forme d’un forfait par transaction + un pourcentage du montant de la transaction).

Conclusion : tant que Facebook ne pensera pas un peu mieux son système de facturation, ils ne pourront pas compter sur mes quelques euros de budget publicitaire et vous n’aurez pas la joie de voir des annonces pour mes sites lorsque vous visionnez l’album photo de votre dernière soirée binge drinking…

Etant de nature un peu parano (non sans déconner ?!) j’ai mis en place une solution pour éviter ce genre de désagrément que je vais partager avec vous aujourd’hui : une espèce de sas de protection entre les nouveaux arrivants et vous.

Encore une bête histoire de liste

Je travaille beaucoup avec les listes sur Facebook pour décider de qui a le droit de voir quelles informations ou quel contenu. Actuellement je disposais de trois listes : Perso, Pro et bloqués (dont je vous ai déjà explique l’intérêt ici).

Pour l’occasion, et parce qu’une personne que je ne connais pas vraiment m’a ajouté sur Facebook (bonjour @Fealings en passant) j’ai donc créé une nouvelle liste : Safebox. Le nom n’a pas de réel importance, j’ai choisi celui-ci parce qu’il me fait penser à la Sandbox de Google.

Ensuite il faut paramétrer cette liste. Et pour ce faire, rien de plus simple : dans l’onglet Compte>Paramètres de confidentialité>Informations du profil vous allez devoir changer chaque élément un par un pour sélectionner le mode « Personnaliser » .

Il suffit ensuite de sélectionner « Ne pas montrer ce contenu à » et de commencer à rentrer le nom de votre liste toute fraichement créée.

Répétez l’action pour tous les contenus que vous ne souhaitez pas partager avec un « inconnu » et vous pourrez ensuite prévisualiser votre profil tel que ledit inconnu le verra en choisissant l’option « Afficher un aperçu de mon profil » et en saisissant le nom d’une personne accueillie dans ladite liste.

Une fois que vous êtes sûr de l’identité du nouveau venu vous pouvez au choix le supprimer ou le rajouter dans une liste plus permissive (Perso ou Pro pour moi par exemple).

En effet, comme assez régulièrement maintenant, Facebook a mis à jour sa plateforme en la rendant encore un peu plus brouillon et toujours moins intuitive (il semblerait qu’il s’agisse d’une contrainte de montée en version chez eux)…

La marche à suivre reste plus ou moins la même que sur la précédente version, seule la dernière étape diffère. Et quand je dis qu’elle diffère je ne pourrais pas être plus réaliste puisqu’entre IE (6 sous Win XP en VM) et Firefox (3.5.6 sous ubuntu) j’ai deux écrans différents pour arriver à la même chose…

Et comme souvent, un dessin valant mille mots : cette explication va se faire en images !

Comme avant, l’idée va être de commencer par bloquer un de ses contacts – peu importe qui, on annulera cela de toutes façons juste après.

Commencer par masquer un contact

Quand vous aurez cliqué sur le bouton, la publication en question sera remplacé par l’écran suivant :

Ensuite, validez le masquage

Éventuellement, si la publication concerne une application, un troisième bouton proposant de bloquer l’application apparaîtra entre les deux qui sont visibles sur la capture d’écran précédente.

Vous pouvez choisir de masquer l’application ou la personne. Ce choix n’aura aucune incidence sur le reste de l’opération.

Maintenant que l’application est masquée, l’encart qui contenait la publication ressemble à la capture suivante :

Cliquez sur "modifier les options"

Et le lien qui nous intéresse est bien sûr : « modifier les options ».

En fonction de votre navigateur / OS l’une des deux fenêtres suivantes va s’afficher. Il suffit ensuite de paramêtrer les options comme bon vous semble :

Plusieurs autres options sont possibles : utiliser les options disponibles en bas de page sous l’intitulé « modifier les options », aller sur la page de l’application bloquée la bloquer puis la débloquer, … Mais je préfère la méthode bourrin que je vous présente ici.

Note de service : ce blog devrait reprendre peu à peu de l’activité grâce à un nouveau rythme de travail que vous présenterai avec notamment un article sur comme Windows a diminué ma productivité, comment gagner 3h par jour, la présentation de nouveaux projets ambicieux, et de nombreuses astuces de geek au fur et à mesure que je les découvre / « invente ».

Comme le billet précédent, je vous fait une rapide traduction pour les moins anglophones d’entre vous :

OMG JE DETESTE MON BOULOT!! Mon patron est un gros branleur pervers qui me fait toujours faire des truc de merde pour me faire chier!! BRANLEUR!

Bonjour …, on dirait que vous avez oublié que vous m’aviez ajouté ici?
Premièrement, ne vous surestimez pas. Deuxièmement, vous avez travaillé ici 5 mois et n’avez pas remarqué que je suis gay? Je sais que je ne me pavane pas au bureau comme une tante, mais ce n’est pas non plus un secret. Troisièmement, cette merde est votre boulot, vous savez, ce pour quoi je vous paie. Mais le fait est que vous arrivez à foirer la plus simple des tâches a du vous aidé à arriver à cette conclusion. Et finalement, vous semblez avoir aussi oublié qu’il reste 2 semaines sur votre période d’essai de 6 mois. Ne vous embêtez pas à venir demain. Je vous envoie votre P45 par la poste, vous pouvez venir récupérer vos affaire quand vous le souhaitez. Et oui, je suis sérieux.

En clair : la demoiselle vient de perdre son boulot bêtement grâce au Web 2.0. Le P45 est en effet un document qui est remis par l’employeur à l’employé à la fin d’un contrat de travail au royaume uni.