La newsletter #emailweekly de cette semaine a encore une fois mis en oeuvre un bel effet technique. Dans Apple Mail sur iOS, l’e-mail est par défaut replié avec un subtil effet de papier replié. Et si on glisse son doigt vers le bas, l’e-mail se déplie complètement.
Il s’avère qu’en fait, c’est simplement le comportement d’Apple Mail lorsqu’un e‑mail contient en premier une balise <blockquote type="cite"> suivie d’un autre contenu. C’est plutôt malin, et je trouve l’effet très réussi.
Litmus a organisé un nouveau concours communautaire avec comme thème : « créer un e‑mail qui vaille le coup d’être transféré ». Pour participer, j’ai créé un e‑mail que j’ai appelé Super Mail Forward, un e‑mail transférable (entre les webmails de Gmail, Yahoo, Outlook.com et AOL) qui évolue à chaque transfert. C’est un fantastique exercice qui m’a permis d’apprendre et de mettre en pratique plein de choses spécifiques à ces webmails. Voici quelques détails.
FreshInbox a lancé un générateur de carousel pour des e‑mails. C’est simple à utiliser, et le résultat fonctionne même dans les webmails desktop de Yahoo, SFR ou La Poste. Cela ne fonctionne par contre pas dans le webmail d’Orange, qui remplace les <input type="checkbox" /> par des balises <noinput>.
Litmus lance une rubrique « Snippets », avec des bouts de code plus ou moins réutilisables à partager. C’est une bonne idée, et je suis agréablement surpris de la simplicité de certains exemples.
FreshInbox a sorti un tableau récapitulatif du support de CSS pour des e-mails interactifs. C’est vraiment une excellente ressource, avec plein de détails sur certaines bidouilles nécessaires pour faire fonctionner telle ou telle propriété. Et c’est surtout à jour (contrairement au guide de Campaign Monitor qui est en jachère depuis mai 2014), aussi bien en termes d’applications testées (avec notamment les applications mobiles de Yahoo ou Outlook) que de propriétés (avec notamment les transformations, animations et transitions CSS).
Je viens de tomber sur Twitter sur une étude de 2010 sur des attaques CSS Cross-Origin. C’est assez passionnant à lire. Et sans surprise, parmi les exemples d’attaques possibles, deux concernent des webmails : Yahoo et, à l’époque, Hotmail. Voici l’exemple de Yahoo :
Yahoo! Mail est un service populaire d’e‑mail basé sur le web. Ses cookies de session persistent jusqu’à deux semaines si les utilisateurs ne se déconnectent pas manuellement. Un attaquant peut voler des lignes de sujets et faire des requêtes de jetons falsifiés à partir des étapes suivantes :
- Envoyez un e‑mail avec comme objet :
');}- Attendez quelque temps que la victime reçoive d’autres messages.
- Envoyez un autre e‑mail à la victime avec comme objet :
{}body{background-image:url('- Invitez la victime à visiter attacker.com en étant connectée à Yahoo! Mail. La page d’attaque ressemble à la suivante :
<html> <head> <link rel="stylesheet" href="http://m.yahoo.com/mail"> <script> function steal() { if(document.body.currentStyle) { alert(document.body.currentStyle["backgroundImage"]); } else { alert(getComputedStyle(document.body, "").backgroundImage); } } </script> </head> <body onload="steal()"> </body> </html>Nous utilisons
background-imageplutôt quefont-familydans cette attaque pour illustrer la variété de propriétés CSS qui peuvent être utilisées. La page attaquante appelle la version mobile du site en chargeanthttp://m.yahoo.com/mailplutôt quehttp://www.yahoo.com/mail. Pour gagner de la bande passante, le site mobile a tout les espaces supprimés de son HTML, y compris les sauts de lignes. Cela permet à la portion de CSS de l’attaque de réussir dans plus de navigateurs, d’où le JavaScript détecte quelle méthode pour récupérer le style généré est supportée.Le fragment de HTML volé contient les lignes d’objets de chaque e‑mail envoyé à la victime entre les deux messages d’attaques. Il contient aussi un jeton caché, impossible à deviner, pour chaque message. Ces jetons permettent à l’attaquant de supprimer des messages via CSRF.
Ce type d’attaque était possible parce que les navigateurs interprétaient n’importe quel type de contenu (ici du HTML) lors de l’inclusion de styles. Ça a évidemment été corrigé depuis.
En tant que développeur ou intégrateur, c’est tentant de haïr Gmail, Yahoo ou Outlook.com parce qu’ils filtrent plein de propriétés CSS de base. Mais les conséquences de la moindre faille due à la moindre de ces propriétés seraient désastreuses pour les utilisateurs de ces services. D’un point de vue sécurité, je suis bien plus rassuré par un Gmail qui filtre tout que par des Orange ou SFR laxistes laissant place parfois à des choses aberrantes.
Justin Khoo chez FreshInbox explique comment masquer une checkbox et un bouton radio dans un e‑mail. En résumé : il faut un display:none en ligne dans un attribut style. Mais il faut ajouter un !important sinon Gmail le filtre. Mais Yahoo filtre la propriété dès qu’il y a un !important. Donc il faut rajouter une classe et une règle dans une balise <style>.
C’est pour moi une illustration parfaite du jeu de la taupe qu’est l’intégration d’e‑mails. Du coup j’ai fait ce GIF animé.
La newsletter #emailweekly numéro 64 rend hommage à Satoru Iwata, PDG de Nintendo, disparu cette semaine. La version sans images est encore une fois excellente. Et le lien « View in Bowser » est un joli clin d’oeil.
J’ai récemment eu l’angoisse de réaliser le routage d’un e‑mail via Mailchimp. À ma grande surprise, ce service d’envoi d’e‑mail ne propose aucune statistique sur les clients mails utilisés. Mais il indique par contre de surprenantes données sur les fournisseurs de services de messagerie. Ainsi dans l’exemple ci-dessous, je constate que 22 % des destinataires de mon e‑mail avaient une adresse @orange.fr.
J’ai un peu du mal à comprendre l’intérêt de telles statistiques. Mais surtout, j’ai remarqué que ça créait chez certains une incompréhension, interprétant ces données comme les statistiques des webmails utilisés. Avoir une adresse @orange.fr ne signifie pas que je consulte mes mails avec le webmail d’Orange.
Le contre exemple le plus simple concerne l’utilisation d’applications mail. Je peux très bien configurer mon adresse @orange.fr dans l’application Mail sur mon iPad, dans Outlook 2013 sur mon PC, et dans la dernière version de l’application Gmail sur mon téléphone Android.
Ce qui est souvent moins connu, c’est que la plupart des webmails permettent eux aussi de lire des e‑mails d’un autre fournisseur de services de messagerie. C’est le cas par exemple de Gmail, Outlook.com, Yahoo, La Poste, Orange ou SFR. Ainsi, je peux très bien lire les messages de mon adresse Gmail sur le webmail de Yahoo, les messages de mon adresse Orange sur le webmail de SFR, etc.
Il est donc primordial de ne pas confondre client mail et fournisseur de services de messagerie.
Wistia a mis en ligne une conférence de Justine Jordan, directrice marketing chez Litmus : « The Hidden Talents of Email ». Je ne connaissais Justine que de nom, mais je suis conquis. Elle est drôle, intelligente, et elle livre une tonne de contenus et d’exemples intéressants en à peine une demi-heure. Et je suis émerveillé par la qualité des introductions des orateurs des conférences de Wistia.
