web-dev-qa-db-fra.com

Icône animée dans le sujet de l'e-mail

Je connais des données URI s dans lesquelles base64 Les données codées peuvent être utilisées en ligne, telles que les images. Aujourd’hui, j’ai reçu un e-mail contenant un spam contenant une icône animée (gif):

enter image description here

Voici l'icône seule:

enter image description here

Donc, la seule chose qui me traversait l’esprit était tout au sujet des URI de données et si Gmail permettait l’insertion d’une sorte d’émoticônes dans le sujet. J'ai vu la version détaillée complète de l'e-mail et pointé sur la ligne d'objet à l'image ci-dessous:

enter image description here

Donc, le GIF vient de =?UTF-8?B?876Urg==?= chaîne encodée similaire au schéma d'URI de données, mais je ne pouvais pas en extraire l'icône. Voici l'élément HTML source:

enter image description here

Longue histoire courte, il y a beaucoup d'émoticônes de https://mail.google.com/mail/e/XXXXXX sont des nombres hexadécimaux. Ils sont documentés nulle part ou je ne pouvais pas le trouver. S'il s'agit de l'URI des données, comment est-il possible de les inclure dans le sujet de l'email de Gmail? (J'ai transféré cet email vers un compte de messagerie yahoo, en voyant [?] au lieu de icon) et si ce n'est pas le cas, comment cette chaîne encodée est-elle analysée?

102
revo

Brève description:

Ils sont référencés de manière interne en tant que goomoji et semblent être une extension non standard UTF-8. Lorsque Gmail rencontre l'un de ces caractères, il est remplacé par l'icône correspondante. Je n'ai pas trouvé de documentation à leur sujet, mais j'ai pu faire de l'ingénierie inverse du format.


Quelles sont ces icônes?

Ces icônes sont en réalité les icônes qui apparaissent dans le panneau "Insérer des émoticônes".

Gmail Insert Emoticons

Bien que je ne voie pas le 52E dans la liste, plusieurs autres suivent la même convention.

Notez qu'il existe également des icônes dont les noms sont préfixés, telles que gtalk.03C gtalk.03C. Je n'ai pas pu déterminer si ou comment ces icônes pouvaient être utilisées de cette manière.


Quelle est cette chose URI de données?

Ce n'est pas réellement un Data URI , même s'il partage certaines similitudes. Il s'agit en fait d'une syntaxe spéciale pour coder des caractères non-ASCII dans les objets de courrier électronique, définie dans RFC 2047 . En gros, ça marche comme ça.

=?charset?encoding?data?=

Donc, dans notre exemple de chaîne, nous avons les données suivantes.

=?UTF-8?B?876Urg==?=
  • charset = UTF-8
  • encoding = B (signifie base64)
  • data = 876Urg==


Alors, comment ça marche?

Nous savons que d'une certaine manière, 876Urg== signifie l'icône 52E, mais comment?

Si nous décodons en base64 876Urg==, on a 0xf3be94ae. Cela ressemble à ce qui suit en binaire:

11110011 10111110 10010100 10101110

Ces bits sont compatibles avec un caractère codé UTF-8 sur 4 octets.

11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

Donc, les bits pertinents sont les suivants:

     011   111110   010100   101110

Ou lorsque aligné:

00001111 11100101 00101110

En hexadécimal, ces octets sont les suivants:

FE52E

Comme vous pouvez le constater, à l'exception du préfixe FE qui est censé distinguer les icônes goomoji des autres caractères UTF-8, il correspond au préfixe 52E dans l'URL de l'icône. Certains tests prouvent que cela est vrai pour d'autres icônes.


Cela ressemble à beaucoup de travail, y at-il un convertisseur ?:

Cela peut bien sûr être scripté. J'ai créé le code Python suivant) pour mes tests. Ces fonctions peuvent convertir la chaîne encodée en base64 vers et à partir de la chaîne hexagonale courte trouvée dans l'URL. Notez que ce code est écrit pour Python 3, et n'est pas Python 2 compatible.

Fonctions de conversion:

import base64

def goomoji_decode(code):
    #Base64 decode.
    binary = base64.b64decode(code)
    #UTF-8 decode.
    decoded = binary.decode('utf8')
    #Get the UTF-8 value.
    value = ord(decoded)
    #Hex encode, trim the 'FE' prefix, and uppercase.
    return format(value, 'x')[2:].upper()

def goomoji_encode(code):
    #Add the 'FE' prefix and decode.
    value = int('FE' + code, 16)
    #Convert to UTF-8 character.
    encoded = chr(value)
    #Encode UTF-8 to binary.
    binary = bytearray(encoded, 'utf8')
    #Base64 encode return end return a UTF-8 string. 
    return base64.b64encode(binary).decode('utf-8')

Exemples:

print(goomoji_decode('876Urg=='))
print(goomoji_encode('52E'))

Sortie:

52E
876Urg==

Et bien sûr, trouver l'URL d'une icône nécessite simplement de créer un nouveau brouillon dans Gmail, d'insérer l'icône de votre choix et d'utiliser l'inspecteur DOM de votre navigateur.

DOM Inspector

172
Alexander O'Mara

Si vous utilisez le bon point de code hexadécimal (par exemple fe4f4 pour 'pile de caca' ) et s'il est correctement codé dans l'en-tête de la ligne de sujet, laissez-le être en base64 (voir @AlexanderOMara) ou entre guillemets et imprimable. (=?utf-8?Q?=F3=BE=93=B4?=), Gmail l’analysera automatiquement et le remplacera par l’emoji correspondant.

Voici une liste emoji de Gmail pour copier et coller dans les lignes d'objet - ou des corps d'email. Les émojis animés, qui attireront encore plus l’attention dans la boîte de réception, sont placés sur un fond jaune:

Gmail emojis on emailmarketingtipps.de

18
lukeA

Un grand merci à Alexander O'Mara pour cette réponse bien documentée sur les images HTML marquées par goomoji!

Je voulais juste ajouter trois choses:

  • Il existe encore de nombreux emoji (et autres séquences Unicode générant des images) que les spammeurs et autres spécialistes du marketing commencent à utiliser dans les lignes d'objet d'e-mail et que Gmail ne convertit pas en images HTML. Dans certains navigateurs, ceux-ci apparaissent en gras et en couleur, ce qui est presque aussi mauvais que l'animation. Les navigateurs pourraient également choisir de les animer, mais je ne sais pas s’il en existe. Ces séquences Unicode sont affichées par le navigateur sous forme de texte Unicode. L'apparence exacte (couleur ou non, animation ou non, ...) dépend du système de rendu du texte utilisé par le navigateur. L'apparence d'un emoji Unicode donné dépend également de tout sélecteurs de variation Unicode et modificateurs emoji apparaissant à proximité de celui-ci dans la séquence de points de code Unicode. Contrairement au spam emoji basé sur une image, ces séquences peuvent être copiées et collées à partir du navigateur vers d'autres applications au format Unicode.

  • J'espère que les nombreux spécialistes du marketing qui liront cette question de StackOverflow diront simplement non. C’est une idée horrible d’inclure ces séquences dans l’objet de votre courrier électronique et cela ternira immédiatement vous et votre marque en tant que spammeurs à vie. Cela ne vaut pas "l'attention" de votre courrier électronique.

  • Bien sûr, la première question qui préoccupe tout le monde est la suivante: "comment puis-je me débarrasser de ces choses?" Heureusement, il existe ce script utilisateur open source Greasemonkey/Tampermonkey/Violentmonkey:

Ligne Objet Gmail Emoji Roach Motel

Ce script utilisateur élimine à la fois les images HTML-image (grâce au travail impressionnant de Alexander O'Mara ) et les types Unicode purs.

Pour ce dernier type, le script utilisateur inclut une expression régulière conçue pour capturer les séquences Unicode susceptibles d’être utilisées de manière abusive par les spécialistes du marketing. La regex ressemble à ceci dans Javascript ES6 (le script utilisateur traduit ceci en une regex pré-ES6 largement supportée en utilisant l'incroyable ES6 Regex Transpiler ):

var re = /(\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F|[\u{2100}-\u{2BFF}\u{E000}-\u{F8FF}\u{1D000}-\u{1F5FF}\u{1F650}-\u{1FA6F}\u{F0000}-\u{FFFFF}\u{100000}-\u{10FFFF}])\s*/gu

// which includes the Unicode Emoji pattern from
//   https://github.com/tc39/proposal-regexp-unicode-property-escapes
// plus also these blocks frequently used for spammy emojis
// (see https://en.wikipedia.org/wiki/Unicode_block ):
//   U+2100..U+2BFF     Arrows, Dingbats, Box Drawing, ...
//   U+E000..U+F8FF     Private Use Area (gmail generates them for some emoji)
//   U+1D000..U+1F5FF   Musical Symbols, Playing Cards (sigh), Pictographs, ...
//   U+1F650..U+1FA6F   Ornamental Dingbats, Transport and Map symbols, ...
//   U+F0000..U+FFFFF   Supplementary Private Use Area-A
//   U+100000..U+10FFFF Supplementary Private Use Area-B
// plus any space AFTER the discovered emoji spam
0
Louis Semprini