电子邮件主题中的动画图标

Posted

技术标签:

【中文标题】电子邮件主题中的动画图标【英文标题】:Animated icon in email subject 【发布时间】:2015-03-21 15:14:42 【问题描述】:

我知道 数据 URI,其中base64 编码的数据可以内联使用,例如图像。今天我收到一封实际上是垃圾邮件的电子邮件,其中的主题中有一个动画 (gif) 图标:

这里是单独的图标:

所以我唯一想到的就是数据 URI 以及 Gmail 是否允许在主题中插入某种表情符号。我看到了电子邮件的完整详细版本,并指出了下图中的主题行:

所以 GIF 来自 =?UTF-8?B?876Urg==?= 编码字符串,它类似于 Data URI 方案,但是我无法从中取出图标。这是元素 html 源代码:

长话短说,https://mail.google.com/mail/e/XXX 有很多表情符号,其中XXX 是十六进制数字。它们无处记录,或者我找不到。如果那是关于数据 URI,那么如何将它们包含在 Gmail 的电子邮件主题中? (我将该电子邮件转发到雅虎电子邮件帐户,看到[?] 而不是图标)如果不是,那么如何解析该编码字符串?

【问题讨论】:

真正的问题是如何阻止他们?! @bambams 你什么意思? 它们非常烦人,正如您所说,它们仅被垃圾邮件发送者使用。我宁愿它们只是没有被 Gmail 显示(它似乎已经将 99% 检测为垃圾邮件)。 这里是how 阻止他们 jamesmstone 的链接显示了如何阻止消息;如果您想自己屏蔽表情符号并留言,请使用Gmail Subject Line Emoji Roach Motel 用户脚本。 【参考方案1】:

#简短说明:

它们在内部被称为goomoji,它们似乎是一个非标准的 UTF-8 扩展。当 Gmail 遇到这些字符之一时,它会被相应的图标替换。我无法找到关于它们的任何文档,但我能够对格式进行逆向工程。

#这些图标是什么?

这些图标实际上是出现在“插入表情”面板下的图标。

虽然我在列表中没有看到 52E 图标,但还有其他几个遵循相同约定的图标。

B0C 4F4

请注意,还有一些图标名称带有前缀,例如gtalk.03C。我无法确定这些图标是否或如何以这种方式使用。

#这个Data URI是什么东西?

它实际上不是Data URI,尽管它确实有一些相似之处。它实际上是一种在电子邮件主题中编码非 ASCII 字符的特殊语法,在RFC 2047 中定义。基本上,它是这样工作的。

=?charset?encoding?data?=

所以,在我们的示例字符串中,我们有以下数据。

=?UTF-8?B?876Urg==?=
charset = UTF-8 encoding = B(表示base64) data = 876Urg== #那么它是怎样工作的?

不知何故,我们知道876Urg== 表示图标52E,但如何?

如果我们对876Urg==进行base64解码,我们得到0xf3be94ae。这在二进制中如下所示:

11110011 10111110 10010100 10101110

这些位与 4 字节 UTF-8 编码字符一致。

11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

所以相关位如下:

     011   111110   010100   101110

或者当对齐时:

00001111 11100101 00101110

在十六进制中,这些字节如下:

FE52E

如您所见,除了FE 前缀可能是为了将goomoji 图标与其他UTF-8 字符区分开来,它与图标URL 中的52E 匹配。一些测试证明这适用于其他图标。

#听起来工作量很大,有转换器吗?:

这当然可以编写脚本。我为我的测试创建了以下 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 检查器。

【讨论】:

这是一个了不起的完整答案。我没有什么要说的,但我只是想知道你是如何对此进行逆向工程的!谢谢亚历山大。 B 在特殊语法中暗示 Base64 的断言可能是一个猜测(最后的字符串有点像 Base64 编码的字符串,如果你以前见过的话);之后不难发现这四个字节遵循 Unicode 字符的 UTF-8 模式之一,尤其是因为他正在寻找 Unicode。这是非常酷的侦探工作,都一样:) @sameers 无需猜测B——它是defined in #4 最好在上面的答案中提及 RFC,作为参考。 @JeremyMiller 感谢您跟踪相关的 RFC!我在写这个答案时找不到它。【参考方案2】:

如果您使用正确的十六进制代码点(例如fe4f4 for 'pile of poo')并且如果它在主题行标题中正确编码,则将其设为base64(请参阅@AlexanderOMara)或quoted-printable(=?utf-8?Q?=F3=BE=93=B4?=),然后是Gmail会自动解析并替换为对应的表情符号。

Here's a Gmail emoji list for copying and pasting into subject lines - 或电子邮件正文。将在收件箱中吸引更多注意力的动画表情符号放置在黄色背景上:

【讨论】:

【参考方案3】:

非常感谢 Alexander O'Mara 对带有 goomoji 标记的 HTML 图像的深入研究回答!

我只想补充三点:

垃圾邮件发送者和其他以前的营销人员开始在电子邮件主题行中使用许多表情符号(和其他生成图片的 Unicode 序列),并且 gmail 不会转换为 HTML 图像。在某些浏览器中,这些显示为粗体和彩色,这几乎与动画一样糟糕。浏览器可以也选择为这些设置动画,但我不知道是否有。这些 Unicode 序列被浏览器显示为 Unicode 文本,因此确切的外观(颜色与否、动画与否……)取决于浏览器使用的文本呈现系统。给定 Unicode 表情符号的外观还取决于 Unicode 代码点序列中出现在它附近的任何 Unicode variation selectors and emoji modifiers。与基于图像的 emoji 垃圾邮件不同,这些序列可以作为 Unicode 文本从浏览器复制并粘贴到其他应用程序中。

我希望阅读此 *** 问题的许多营销人员会说不。在您的电子邮件主题行中包含这些序列是一个可怕的想法,它会立即将您和您的品牌玷污为低俗的垃圾邮件发送者。不值得您的电子邮件受到“关注”。

当然,每个人都会想到的第一个问题是:“我该如何摆脱这些东西?”幸运的是,有这个开源的 Greasemonkey/Tampermonkey/Violentmonkey 用户脚本:

Gmail Subject Line Emoji Roach Motel

此用户脚本消除了 HTML 图像(感谢 Alexander O'Mara 的出色工作)和纯 Unicode 类型。

对于后一种类型,用户脚本包含一个正则表达式,旨在捕获可能被营销人员滥用的 Unicode 序列。正则表达式在 ES6 javascript 中看起来像这样(用户脚本使用惊人的 ES6 Regex Transpiler 将其转换为广泛支持的 pre-ES6 正则表达式):

var re = /(\pEmoji_Modifier_Base\pEmoji_Modifier?|\pEmoji_Presentation|\pEmoji\uFE0F|[\u2100-\u2BFF\uE000-\uF8FF\u1D000-\u1F5FF\u1F650-\u1FA6F\uF0000-\uFFFFF\u100000-\u10FFFF])\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

【讨论】:

以上是关于电子邮件主题中的动画图标的主要内容,如果未能解决你的问题,请参考以下文章

引导列表组中的右对齐动画字体真棒图标

实现程序窗口不断变化的动画图标

为啥 JTable 列中没有显示动画 .gif 图标?

如何为 Android 同步状态图标设置动画?

UITabBarItem 图标动画

如何在颤动中缩小和放大图标动画?