Анимированный значок в теме письма

103

Я знаю о Data URI, в которых base64закодированные данные могут использоваться встроенными, например изображения. Сегодня я получил письмо, на самом деле спам, в теме которого был анимированный (gif) значок:

введите описание изображения здесь

Вот только иконка:

введите описание изображения здесь

Так что единственное, что мне пришло в голову, это все об URI данных и о том, позволяет ли Gmail вставлять какие-то смайлы в тему. Я увидел полную подробную версию электронного письма и указал на тему на картинке ниже:

введите описание изображения здесь

Итак, GIF происходит из =?UTF-8?B?876Urg==?=закодированной строки, которая похожа на схему URI данных, но я не мог извлечь из нее значок. Вот источник HTML элемента:

введите описание изображения здесь

Короче говоря, существует множество смайлов, в https://mail.google.com/mail/e/XXXкоторых XXXиспользуются шестнадцатеричные числа. Они нигде не задокументированы, или я не смог их найти. Если это касается URI данных, то как можно включить их в тему письма Gmail? (Я переслал это письмо на адрес электронной почты yahoo, [?]вместо значка видел ), и если нет, то как анализируется эта закодированная строка?

revo
источник
25
Вопрос в том, как их заблокировать ?!
bambams 09
@bambams Что ты имеешь в виду?
revo
13
Они невероятно раздражают и, как вы сказали, используются только спамерами. Я бы предпочел, чтобы Gmail просто не показывал их (он уже обнаруживает 99% спама).
bambams
1
вот как их заблокировать
jamesmstone 02
Ссылка jamesmstone показывает, как заблокировать сообщения; если вы хотите заблокировать сами смайлы и оставить сообщения, используйте пользовательский сценарий Gmail Subject Line Emoji Roach Motel .
Луи Семприни

Ответы:

175

Краткое описание:

Они называются внутри как goomoji, и они выглядят нестандартным расширением UTF-8. Когда Gmail встречает один из этих символов, он заменяется соответствующим значком. Мне не удалось найти по ним какую-либо документацию, но я смог реконструировать формат.


Что это за значки?

Эти значки на самом деле являются значками, которые появляются на панели «Вставить смайлы».

Gmail Вставить смайлики

Хотя я не вижу 52Eзначка в списке, есть несколько других, которые следуют тому же соглашению.

Обратите внимание, что есть также некоторые значки, имена которых имеют префиксы, например . Мне не удалось определить, можно ли использовать эти значки таким образом и как.gtalk.03C gtalk.03C


Что это за URI данных?

На самом деле это не Data URI , хотя у него есть некоторые общие черты. На самом деле это специальный синтаксис для кодирования не-ASCII символов в темах электронной почты, определенный в RFC 2047 . В основном это работает так.

=?charset?encoding?data?=

Итак, в нашем примере строки у нас есть следующие данные.

=?UTF-8?B?876Urg==?=
  • charset знак равно UTF-8
  • encoding= B(означает base64)
  • data знак равно 876Urg==


Итак, как это работает?

Мы как-то знаем, что 876Urg==означает значок 52E, но как?

Если мы декодируем base64 876Urg==, мы получим 0xf3be94ae. В двоичном формате это выглядит так:

11110011 10111110 10010100 10101110

Эти биты соответствуют 4-байтовому символу в кодировке UTF-8.

11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

Итак, соответствующие биты следующие:

     011   111110   010100   101110

Или при выравнивании:

00001111 11100101 00101110

В шестнадцатеричном формате это следующие байты:

FE52E

Как вы можете видеть, за исключением FEпрефикса, который предположительно предназначен для отличия goomojiзначков от других символов UTF-8, он совпадает с префиксом 52Eв URL-адресе значка. Некоторые тесты доказывают, что это верно и для других иконок.


Похоже, много работы, есть ли конвертер ?:

Конечно, это можно сделать в сценарии. Для тестирования я создал следующий код Python. Эти функции могут преобразовывать строку в кодировке base64 в короткую шестнадцатеричную строку, найденную в URL-адресе, и обратно. Обратите внимание, этот код написан для Python 3 и несовместим с Python 2.

Функции преобразования:

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

Примеры:

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

Вывод:

52E
876Urg==

И, конечно же, для поиска URL-адреса значка просто требуется создать новый черновик в Gmail, вставить нужный значок и использовать инспектор DOM вашего браузера.

Инспектор DOM

Александр О'Мара
источник
14
Это потрясающий полный ответ. Мне нечего сказать, но мне просто интересно, как вы сделали реверс-инжиниринг этого !! Спасибо, Александр.
revo
2
Утверждение, что Bв специальном синтаксисе подразумевается, что Base64, могло быть предположением (строка в конце вида выглядит как строка в кодировке Base64, если вы видели это раньше); после чего нетрудно заметить, что четыре байта следуют одному из шаблонов UTF-8 для символов Unicode, особенно потому, что он ищет Unicode. Довольно крутая детективная работа, все равно :)
Самиерс
3
@sameers Не нужно гадать B- это определено в # 4
Было бы хорошо упомянуть RFC в ответе выше в качестве справки.
Sameers
@JeremyMiller Спасибо за отслеживание соответствующего RFC! Я не мог найти его, когда писал этот ответ.
Александр О'Мара
19

Если вы используете правильный шестнадцатеричный код (например, fe4f4 для «кучи какашки» ) и если он правильно закодирован в заголовке строки темы, пусть это будет base64 (см. @AlexanderOMara) или quoted-printable ( =?utf-8?Q?=F3=BE=93=B4?=), тогда Gmail автоматически проанализируйте и замените его соответствующим смайликом.

Вот список смайлов Gmail, который можно скопировать и вставить в строки темы или текст сообщения электронной почты. На желтом фоне размещены анимированные смайлы, которые привлекут еще больше внимания во входящих:

Смайлы Gmail на emailmarketingtipps.de

lukeA
источник
0

Большое спасибо Александру О'Мара за такой хорошо проработанный ответ о HTML-изображениях с тегами goomoji!

Я просто хотел добавить три вещи:

  • По-прежнему существует множество эмодзи (и других последовательностей Unicode, генерирующих изображения), которые спамеры и другие бывшие маркетологи начинают использовать в строках тем электронной почты и которые Gmail не конвертирует в изображения HTML. В некоторых браузерах они отображаются жирным и цветным шрифтом, что почти так же плохо, как анимация. Браузеры могут также выбрать , чтобы оживить их, но я не знаю , если кто- либо делает. Эти последовательности Unicode отображаются браузером как текст Unicode, поэтому точный внешний вид (цвет или нет, анимированный или нет, ...) зависит от того, какую систему визуализации текста использует браузер. Внешний вид данного смайлика Unicode также зависит от любых селекторов вариантов Unicode и модификаторов смайликов.которые появляются рядом с ним в последовательности кодовых точек Unicode. В отличие от спама с эмодзи на основе изображений, эти последовательности можно скопировать и вставить из браузера в другие приложения в виде текста Unicode.

  • Я надеюсь, что многие маркетологи, читающие этот вопрос о StackOverflow, просто скажут «нет». Ужасная идея включать эти последовательности в строки темы электронного письма, и это сразу же запятнает вас и ваш бренд как спамеров. Это не стоит того "внимания", которое получит ваша электронная почта.

  • Конечно, первый вопрос, который приходит в голову каждому: «как мне избавиться от этих вещей?» К счастью, есть пользовательский скрипт Greasemonkey / Tampermonkey / Violentmonkey с открытым исходным кодом:

Gmail Subject Line Emoji Roach Motel

Этот пользовательский скрипт исключает как HTML-изображения (благодаря отличной работе Александра О'Мара ), так и типы чистого Unicode.

Для последнего типа пользовательский сценарий включает регулярное выражение, предназначенное для захвата последовательностей Unicode, которые могут быть использованы маркетологами. Регулярное выражение выглядит так в ES6 Javascript (пользовательский скрипт переводит это в широко поддерживаемое регулярное выражение до ES6 с использованием замечательного 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
Луи Семприни
источник