Les articles

Super Mail Forward, cinq mois après

J’ai publié une traduction en anglais de mon retour sur la création de Super Mail Forward, un e-mail transférable évolutif. Cinq mois après, il y a deux changements principaux.

AOL a corrigé le bug de remplacement des images en background dans une balise <style>. J’ai donc trouvé une autre bidouille pour activer des styles sur AOL. Ou plus précisément, pour ne pas que des styles s’activent sur AOL. En fait, une balise <style> contenant une image de fond à l’URL non supportée (par exemple background:url('#');) sera totalement supprimée. Dans l’exemple suivant, ces styles s’appliqueront donc partout (ou presque), sauf sur AOL.

<style type="text/css">
   .step1 { background:url('#'); }
   .step1 .W { background:#fff!important; }
   .step1 .X { background:#f8d81f!important; }
   .step1 .Y { background:#d89f37!important; }
   .step1 .Z { background:#000!important; }
</style>

Microsoft a commencé à remplacer Outlook.com par le même webmail qu’Office 365 (aussi appelé Outlook Web App). Ce webmail ne supporte pas les sélecteurs d’attributs. Pour cibler des styles uniquement sur ce webmail, on peut donc écrire le sélecteur suivant…

<style type="text/css">
   [owa] .toto { … }
</style>

…qui sera interprété comme :

<style type="text/css">
   .rps_123a .x_toto { … }
</style>

Photoshop, copier-coller et les caractères invisibles ETX

Code and Send a publié un court article très intéressant sur les caractères invisibles ETX qui peuvent apparaître quand on copie-colle du texte depuis Photoshop. Ce caractère est ajouté par Photoshop lorsqu’on fait un saut de ligne avec MAJ+Entrée. Pour éviter ça, Code and Send a créé Detergent.io, un petit outil en ligne pour nettoyer du texte copié depuis Photoshop ou Word et destiné à être intégré dans un e‑mail.

Un e-mail interactif de PRET A MANGER

Un e-mail interactif par PRET A MANGERVu sur Twitter : un e-mail interactif avec des smoothies par PRET A MANGER. J’adore le rendu avec les animations (faites en sprites). Mais quel dommage que le tout soit déclenché par une media query utilisant -webkit-min-device-pixel-ratio, ne fonctionnant alors que sur Chrome, Safari ou Opera.

Outlook pour iOS et Android

La semaine dernière, Microsoft a mis à jour son application Outlook pour iOS et Android, incluant des fonctions de calendrier et tuant au passage l’application Sunrise. Mais la vraie nouveauté, de mon point de vue, est que l’application iOS est actuellement neuvième des applications gratuites les plus téléchargées sur l’App Store (contre trente-cinquième pour Gmail).

Ne sous-estimons pas les applications mail tierces sur mobile.

Supprimer les marges de l’application mail d’Android 4.4

James White a fait des recherches poussées pour comprendre d’où venaient des marges ajoutées autour du corps d’un e-mail sur l’application mail par défaut d’Android 4.4.

Résultat : l’application englobe chaque e-mail d’un <div style="margin: 16px 0;"> et ajoute un margin variable sur le <body> calculé selon la densité de pixels de l’appareil utilisé.

Pour annuler tout ça, James suggère d’ajouter les styles suivants :

body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; }

Un effet de papier déplié dans Apple Mail sur iOS

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.

ios-mail-blockquote

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.

Image Carousel Creator

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 Snippets

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.

Le support de CSS pour des e‑mails interactifs

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).

Protéger les navigateurs d’attaques CSS Cross-Origin

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 :

  1. Envoyez un e‑mail avec comme objet : ');}
  2. Attendez quelque temps que la victime reçoive d’autres messages.
  3. Envoyez un autre e‑mail à la victime avec comme objet : {}body{background-image:url('
  4. 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-image plutôt que font-family dans 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 chargeant http://m.yahoo.com/mail plutôt que http://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.