#5308 Fix the error when sending password-protected emails that contain emojis

extension/css/cryptup.css

@@ -2833,7 +2833,10 @@ body#new_message.full_window {
 }
 
 body#new_message.full_window table#compose {
- box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+ box-shadow:
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+ 0 3px 14px 2px rgba(0, 0, 0, 0.12),
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
 }
 
 div#reply_message_table_container {

extension/js/common/api/account-servers/external-service.ts

@@ -14,6 +14,7 @@ import { ClientConfigurationError, ClientConfigurationJson } from '../../client-
 import { InMemoryStore } from '../../platform/store/in-memory-store.js';
 import { GoogleOAuth } from '../authentication/google/google-oauth.js';
 import { AuthenticationConfiguration } from '../../authentication-configuration.js';
+import { Xss } from '../../platform/xss.js';
 
 // todo - decide which tags to use
 type EventTag = 'compose' | 'decrypt' | 'setup' | 'settings' | 'import-pub' | 'import-prv';
@@ -143,9 +144,9 @@ export class ExternalService extends Api {
  JSON.stringify({
  associateReplyToken,
  from,
- to: (recipients.to || []).map(Str.formatEmailWithOptionalName),
- cc: (recipients.cc || []).map(Str.formatEmailWithOptionalName),
- bcc: (recipients.bcc || []).map(Str.formatEmailWithOptionalName),
+ to: (recipients.to || []).map(Str.formatEmailWithOptionalName).map(Xss.stripEmojis),
+ cc: (recipients.cc || []).map(Str.formatEmailWithOptionalName).map(Xss.stripEmojis),
+ bcc: (recipients.bcc || []).map(Str.formatEmailWithOptionalName).map(Xss.stripEmojis),
  })
  ),
  });

extension/js/common/platform/xss.ts

@@ -7,7 +7,6 @@ import * as DOMPurify from 'dompurify';
 import { checkValidURL, CID_PATTERN, Str } from '../core/common.js';
 
 export type SanitizeImgHandling = 'IMG-DEL' | 'IMG-KEEP' | 'IMG-TO-PLAIN-TEXT';
-
 /**
  * This class is in platform/ folder because most of it depends on platform specific code
  * - in browser the implementation uses DOMPurify
@@ -51,6 +50,7 @@ export class Xss {
  private static FORBID_ATTR = ['background'];
  private static HREF_REGEX_CACHE: RegExp | undefined;
  private static FORBID_CSS_STYLE = /z-index:[^;]+;|position:[^;]+;|background[^;]+;/g;
+ private static EMOJI_REGEX = /(?![*#0-9]+)[\p{Emoji}\p{Emoji_Modifier}\p{Emoji_Component}\p{Emoji_Modifier_Base}\p{Emoji_Presentation}]/gu;
 
  public static sanitizeRender = (selector: string | HTMLElement | JQuery<HTMLElement>, dirtyHtml: string) => {
  // browser-only (not on node)
@@ -230,6 +230,10 @@ export class Xss {
  return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\//g, '&#x2F;');
  };
 
+ public static stripEmojis = (str: string) => {
+ return str.replace(Xss.EMOJI_REGEX, '');
+ };
+
  public static htmlUnescape = (str: string) => {
  // the &nbsp; at the end is replaced with an actual NBSP character, not a space character. IDE won't show you the difference. Do not change.
  return str

test/source/mock/fes/shared-tenant-fes-endpoints.ts

@@ -142,6 +142,9 @@ export const getMockSharedTenantFesEndpoints = (config: FesConfig | undefined):
  if (req.method === 'POST' && typeof body === 'string') {
  expect(body).to.contain('-----BEGIN PGP MESSAGE-----');
  expect(body).to.contain('"associateReplyToken":"mock-fes-reply-token"');
+ if (body.includes('NameWithEmoji')) {
+ expect(body).to.not.include('⭐');
+ }
  const response = {
  // this url is required for pubkey encrypted message
  url: `https://flowcrypt.com/shared-tenant-fes/message/6da5ea3c-d2d6-4714-b15e-f29c805e5c6a`,

test/source/tests/compose.ts

@@ -66,6 +66,24 @@ export const defineComposeTests = (testVariant: TestVariant, testWithBrowser: Te
  })
  );
 
+ test(
+ 'compose - strip emojis in a recipient email address',
+ testWithBrowser(async (t, browser) => {
+ const acct = 'flowcrypt.compatibility@gmail.com';
+ await BrowserRecipe.setupCommonAcctWithAttester(t, browser, 'compatibility', {
+ google: { acctAliases: flowcryptCompatibilityAliasList },
+ });
+ const recipientEmail = 'NameWithEmoji ⭐ Test <test@email.com>';
+ const msgPwd = 'super hard password for the message';
+ const subject = 'Test Sending Message With Recipient Name Contains Emoji';
+ const composePage = await ComposePageRecipe.openStandalone(t, browser, 'compatibility');
+ await ComposePageRecipe.selectFromOption(composePage, acct);
+ await ComposePageRecipe.fillMsg(composePage, { to: recipientEmail }, subject);
+ await ComposePageRecipe.sendAndClose(composePage, { password: msgPwd });
+ // The actualt test for this is present in '/shared-tenant-fes/api/v1/message' of shared-tenant-fes mock endpoint.
+ })
+ );
+
  test(
  'compose - check for sender [flowcrypt.compatibility@gmail.com] from a password-protected email',
  testWithBrowser(async (t, browser) => {