#5310 Fixes for attachments which contain emojis in their names

extension/js/content_scripts/webmail/gmail-element-replacer.ts

@@ -504,7 +504,11 @@ export class GmailElementReplacer implements WebmailElementReplacer {
       .filter('span.aZo:visible, span.a5r:visible')
       .find('span.aV3')
       .filter(function () {
-        const name = $(this).text().trim();
+        // replace emoji images with text emojis
+        const emojiRegex = /<img data-emoji="([^\"]+)"[^>]*>/g;
+        const name = $(this)
+          .html()
+          .replace(emojiRegex, (_, emoji) => emoji as string);
         return regExp.test(name);
       })
       .closest('span.aZo, span.a5r');

extension/lib/emailjs/emailjs-mime-builder.js

@@ -539,28 +539,213 @@
 
     /**
      * Joins parsed header value together as 'value; param1=value1; param2=value2'
-     *
+     * PS: We are following RFC 822 for the list of special characters that we need to keep in quotes.
+     *      Refer: https://www.w3.org/Protocols/rfc1341/4_Content-Type.html
      * @param {Object} structured Parsed header value
      * @return {String} joined header value
      */
-    MimeNode.prototype._buildHeaderValue = function (structured) {
-        var paramsArray = [];
+    // copied from https://github.com/nodemailer/libmime/
+    MimeNode.prototype._buildHeaderValue = function(structured) {
+        let paramsArray = [];
 
-        Object.keys(structured.params || {}).forEach(function (param) {
+        Object.keys(structured.params || {}).forEach(param => {
             // filename might include unicode characters so it is a special case
-            if (param === 'filename') {
-                mimecodec.continuationEncode(param, structured.params[param], 50).forEach(function (encodedParam) {
-                    // continuation encoded strings are always escaped, so no need to use enclosing quotes
-                    // in fact using quotes might end up with invalid filenames in some clients
-                    paramsArray.push(encodedParam.key + '=' + encodedParam.value);
+            let value = structured.params[param];
+            if (!this._isPlainText(value) || value.length >= 75) {
+                this._buildHeaderParam(param, value, 50).forEach(encodedParam => {
+                    if (!/[\s"\\;:/=(),<>@[\]?]|^[-']|'$/.test(encodedParam.value) || encodedParam.key.substr(-1) === '*') {
+                        paramsArray.push(encodedParam.key + '=' + encodedParam.value);
+                    } else {
+                        paramsArray.push(encodedParam.key + '=' + JSON.stringify(encodedParam.value));
+                    }
                 });
+            } else if (/[\s'"\\;:/=(),<>@[\]?]|^-/.test(value)) {
+                paramsArray.push(param + '=' + JSON.stringify(value));
             } else {
-                paramsArray.push(param + '=' + this._escapeHeaderArgument(structured.params[param]));
+                paramsArray.push(param + '=' + value);
             }
-        }.bind(this));
+        });
 
         return structured.value + (paramsArray.length ? '; ' + paramsArray.join('; ') : '');
-    };
+    }
+
+    /**
+     * Encodes a string or an Buffer to an UTF-8 Parameter Value Continuation encoding (rfc2231)
+     * Useful for splitting long parameter values.
+     *
+     * For example
+     *      title="unicode string"
+     * becomes
+     *     title*0*=utf-8''unicode
+     *     title*1*=%20string
+     *
+     * @param {String|Buffer} data String to be encoded
+     * @param {Number} [maxLength=50] Max length for generated chunks
+     * @param {String} [fromCharset='UTF-8'] Source sharacter set
+     * @return {Array} A list of encoded keys and headers
+     */
+    // copied from https://github.com/nodemailer/libmime/
+    MimeNode.prototype._buildHeaderParam = function(key, data, maxLength, fromCharset) {
+        let list = [];
+        let encodedStr = typeof data === 'string' ? data : mimecodec.decode(data, fromCharset);
+        let encodedStrArr;
+        let chr, ord;
+        let line;
+        let startPos = 0;
+        let isEncoded = false;
+        let i, len;
+
+        maxLength = maxLength || 50;
+
+        // process ascii only text
+        if (this._isPlainText(data)) {
+            // check if conversion is even needed
+            if (encodedStr.length <= maxLength) {
+                return [
+                    {
+                        key,
+                        value: encodedStr
+                    }
+                ];
+            }
+
+            encodedStr = encodedStr.replace(new RegExp('.{' + maxLength + '}', 'g'), str => {
+                list.push({
+                    line: str
+                });
+                return '';
+            });
+
+            if (encodedStr) {
+                list.push({
+                    line: encodedStr
+                });
+            }
+        } else {
+            if (/[\uD800-\uDBFF]/.test(encodedStr)) {
+                // string containts surrogate pairs, so normalize it to an array of bytes
+                encodedStrArr = [];
+                for (i = 0, len = encodedStr.length; i < len; i++) {
+                    chr = encodedStr.charAt(i);
+                    ord = chr.charCodeAt(0);
+                    if (ord >= 0xd800 && ord <= 0xdbff && i < len - 1) {
+                        chr += encodedStr.charAt(i + 1);
+                        encodedStrArr.push(chr);
+                        i++;
+                    } else {
+                        encodedStrArr.push(chr);
+                    }
+                }
+                encodedStr = encodedStrArr;
+            }
+
+            // first line includes the charset and language info and needs to be encoded
+            // even if it does not contain any unicode characters
+            line = "utf-8''";
+            isEncoded = true;
+            startPos = 0;
+
+            // process text with unicode or special chars
+            for (i = 0, len = encodedStr.length; i < len; i++) {
+                chr = encodedStr[i];
+
+                if (isEncoded) {
+                    chr = this._safeEncodeURIComponent(chr);
+                } else {
+                    // try to urlencode current char
+                    chr = chr === ' ' ? chr : this._safeEncodeURIComponent(chr);
+                    // By default it is not required to encode a line, the need
+                    // only appears when the string contains unicode or special chars
+                    // in this case we start processing the line over and encode all chars
+                    if (chr !== encodedStr[i]) {
+                        // Check if it is even possible to add the encoded char to the line
+                        // If not, there is no reason to use this line, just push it to the list
+                        // and start a new line with the char that needs encoding
+                        if ((this._safeEncodeURIComponent(line) + chr).length >= maxLength) {
+                            list.push({
+                                line,
+                                encoded: isEncoded
+                            });
+                            line = '';
+                            startPos = i - 1;
+                        } else {
+                            isEncoded = true;
+                            i = startPos;
+                            line = '';
+                            continue;
+                        }
+                    }
+                }
+
+                // if the line is already too long, push it to the list and start a new one
+                if ((line + chr).length >= maxLength) {
+                    list.push({
+                        line,
+                        encoded: isEncoded
+                    });
+                    line = chr = encodedStr[i] === ' ' ? ' ' : this._safeEncodeURIComponent(encodedStr[i]);
+                    if (chr === encodedStr[i]) {
+                        isEncoded = false;
+                        startPos = i - 1;
+                    } else {
+                        isEncoded = true;
+                    }
+                } else {
+                    line += chr;
+                }
+            }
+
+            if (line) {
+                list.push({
+                    line,
+                    encoded: isEncoded
+                });
+            }
+        }
+
+        return list.map((item, i) => ({
+            // encoded lines: {name}*{part}*
+            // unencoded lines: {name}*{part}
+            // if any line needs to be encoded then the first line (part==0) is always encoded
+            key: key + '*' + i + (item.encoded ? '*' : ''),
+            value: item.line
+        }));
+    }
+
+    // copied from https://github.com/nodemailer/libmime/
+    MimeNode.prototype._safeEncodeURIComponent = function(str) {
+        str = (str || '').toString();
+
+        try {
+            // might throw if we try to encode invalid sequences, eg. partial emoji
+            str = encodeURIComponent(str);
+        } catch (E) {
+            // should never run
+            return str.replace(/[^\x00-\x1F *'()<>@,;:\\"[\]?=\u007F-\uFFFF]+/g, '');
+        }
+
+        // ensure chars that are not handled by encodeURICompent are converted as well
+        return str.replace(/[\x00-\x1F *'()<>@,;:\\"[\]?=\u007F-\uFFFF]/g, chr => this._encodeURICharComponent(chr));
+    }
+
+    MimeNode.prototype._encodeURICharComponent = function(chr) {
+        let res = '';
+        let ord = chr.charCodeAt(0).toString(16).toUpperCase();
+
+        if (ord.length % 2) {
+            ord = '0' + ord;
+        }
+
+        if (ord.length > 2) {
+            for (let i = 0, len = ord.length / 2; i < len; i++) {
+                res += '%' + ord.substr(i, 2);
+            }
+        } else {
+            res += '%' + ord;
+        }
+
+        return res;
+    }
 
     /**
      * Escapes a header argument value (eg. boundary value for content type),

extension/lib/emailjs/emailjs-mime-codec.js

@@ -507,15 +507,15 @@
          */
         parseHeaderValue: function(str) {
             var response = {
-                    value: false,
-                    params: {}
-                },
-                key = false,
-                value = '',
-                type = 'value',
-                quote = false,
-                escaped = false,
-                chr;
+                value: false,
+                params: {}
+            },
+            key = false,
+            value = '',
+            type = 'value',
+            quote = false,
+            escaped = false,
+            chr;
 
             for (var i = 0, len = str.length; i < len; i++) {
                 chr = str.charAt(i);
@@ -697,12 +697,22 @@
                 }
 
             } else {
-
                 // first line includes the charset and language info and needs to be encoded
                 // even if it does not contain any unicode characters
                 line = 'utf-8\'\'';
                 isEncoded = true;
                 startPos = 0;
+
+                // fix for attachments with emoji in filenames
+                if (typeof Intl !== 'undefined' && typeof Intl.Segmenter === 'function') {
+                    // Intl.Segmenter() currently not available on Firefox
+                    // https://caniuse.com/mdn-javascript_builtins_intl_segmenter
+                    encodedStr = [...new Intl.Segmenter().segment(encodedStr)].map(x => x.segment)
+                } else {
+                    // regex from https://stackoverflow.com/a/69661174/3091318
+                    encodedStr = encodedStr.replace(/(?![*#0-9]+)[\p{Emoji}\p{Emoji_Modifier}\p{Emoji_Component}\p{Emoji_Modifier_Base}\p{Emoji_Presentation}]/gu, '')
+                }
+
                 // process text with unicode or special chars
                 for (var i = 0, len = encodedStr.length; i < len; i++) {
 

test/samples/attac👍hment!🔸.txt

@@ -0,0 +1 @@
+some text

test/source/mock/google/strategies/send-message-strategy.ts

@@ -475,6 +475,8 @@ export class TestBySubjectStrategyContext {
       this.strategy = new SaveMessageInStorageStrategy();
     } else if (subject.includes('FlowCrypt OpenPGP Private Key backup')) {
       this.strategy = new SaveMessageInStorageStrategy();
+    } else if (subject.includes('Test Sending Message With Attachment Which Contains Emoji in Filename')) {
+      this.strategy = new SaveMessageInStorageStrategy();
     } else if (subject.includes('Re: FROM: flowcrypt.compatibility@gmail.com, TO: flowcrypt.compatibility@gmail.com + vladimir@flowcrypt.com')) {
       this.strategy = new NoopTestStrategy();
     } else {