New attachment storage system

app/attachment_channel.ts

@@ -1,10 +1,16 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { ipcMain } from 'electron';
+import { ipcMain, protocol } from 'electron';
+import { createReadStream } from 'node:fs';
+import { join, normalize } from 'node:path';
+import { Readable, Transform, PassThrough } from 'node:stream';
+import { pipeline } from 'node:stream/promises';
+import z from 'zod';
 import * as rimraf from 'rimraf';
 import {
   getAllAttachments,
+  getAvatarsPath,
   getPath,
   getStickersPath,
   getTempPath,
@@ -20,6 +26,11 @@ import type { MainSQL } from '../ts/sql/main';
 import type { MessageAttachmentsCursorType } from '../ts/sql/Interface';
 import * as Errors from '../ts/types/errors';
 import { sleep } from '../ts/util/sleep';
+import { isPathInside } from '../ts/util/isPathInside';
+import { missingCaseError } from '../ts/util/missingCaseError';
+import { safeParseInteger } from '../ts/util/numbers';
+import { drop } from '../ts/util/drop';
+import { decryptAttachmentV2ToSink } from '../ts/AttachmentCrypto';
 
 let initialized = false;
 
@@ -31,6 +42,14 @@ const CLEANUP_ORPHANED_ATTACHMENTS_KEY = 'cleanup-orphaned-attachments';
 
 const INTERACTIVITY_DELAY = 50;
 
+const dispositionSchema = z.enum([
+  'attachment',
+  'temporary',
+  'draft',
+  'sticker',
+  'avatarData',
+]);
+
 type DeleteOrphanedAttachmentsOptionsType = Readonly<{
   orphanedAttachments: Set<string>;
   sql: MainSQL;
@@ -197,6 +216,7 @@ export function initialize({
   const stickersDir = getStickersPath(configDir);
   const tempDir = getTempPath(configDir);
   const draftDir = getDraftPath(configDir);
+  const avatarDataDir = getAvatarsPath(configDir);
 
   ipcMain.handle(ERASE_TEMP_KEY, () => rimraf.sync(tempDir));
   ipcMain.handle(ERASE_ATTACHMENTS_KEY, () => rimraf.sync(attachmentsDir));
@@ -209,4 +229,216 @@ export function initialize({
     const duration = Date.now() - start;
     console.log(`cleanupOrphanedAttachments: took ${duration}ms`);
   });
+
+  protocol.handle('attachment', async req => {
+    const url = new URL(req.url);
+    if (url.host !== 'v1' && url.host !== 'v2') {
+      return new Response('Unknown host', { status: 404 });
+    }
+
+    // Disposition
+    let disposition: z.infer<typeof dispositionSchema> = 'attachment';
+    const dispositionParam = url.searchParams.get('disposition');
+    if (dispositionParam != null) {
+      disposition = dispositionSchema.parse(dispositionParam);
+    }
+
+    let parentDir: string;
+    switch (disposition) {
+      case 'attachment':
+        parentDir = attachmentsDir;
+        break;
+      case 'temporary':
+        parentDir = tempDir;
+        break;
+      case 'draft':
+        parentDir = draftDir;
+        break;
+      case 'sticker':
+        parentDir = stickersDir;
+        break;
+      case 'avatarData':
+        parentDir = avatarDataDir;
+        break;
+      default:
+        throw missingCaseError(disposition);
+    }
+
+    // Remove first slash
+    const path = normalize(
+      join(parentDir, ...url.pathname.slice(1).split(/\//g))
+    );
+    if (!isPathInside(path, parentDir)) {
+      return new Response('Access denied', { status: 401 });
+    }
+
+    // Get attachment size to trim the padding
+    const sizeParam = url.searchParams.get('size');
+    let maybeSize: number | undefined;
+    if (sizeParam != null) {
+      const intValue = safeParseInteger(sizeParam);
+      if (intValue != null) {
+        maybeSize = intValue;
+      }
+    }
+
+    // Legacy plaintext attachments
+    if (url.host === 'v1') {
+      return handleRangeRequest({
+        request: req,
+        size: maybeSize,
+        plaintext: createReadStream(path),
+      });
+    }
+
+    // Encrypted attachments
+
+    // Get AES+MAC key
+    const maybeKeysBase64 = url.searchParams.get('key');
+    if (maybeKeysBase64 == null) {
+      return new Response('Missing key', { status: 400 });
+    }
+
+    // Size is required for trimming padding.
+    if (maybeSize == null) {
+      return new Response('Missing size', { status: 400 });
+    }
+
+    // Pacify typescript
+    const size = maybeSize;
+    const keysBase64 = maybeKeysBase64;
+
+    const plaintext = new PassThrough();
+
+    async function runSafe(): Promise<void> {
+      try {
+        await decryptAttachmentV2ToSink(
+          {
+            ciphertextPath: path,
+            idForLogging: 'attachment_channel',
+            keysBase64,
+            size,
+
+            isLocal: true,
+          },
+          plaintext
+        );
+      } catch (error) {
+        plaintext.emit('error', error);
+      }
+    }
+
+    drop(runSafe());
+
+    return handleRangeRequest({
+      request: req,
+      size: maybeSize,
+      plaintext,
+    });
+  });
+}
+
+type HandleRangeRequestOptionsType = Readonly<{
+  request: Request;
+  size: number | undefined;
+  plaintext: Readable;
+}>;
+
+function handleRangeRequest({
+  request,
+  size,
+  plaintext,
+}: HandleRangeRequestOptionsType): Response {
+  const url = new URL(request.url);
+
+  // Get content-type
+  const contentType = url.searchParams.get('contentType');
+
+  const headers: HeadersInit = {
+    'cache-control': 'no-cache, no-store',
+    'content-type': contentType || 'application/octet-stream',
+  };
+
+  if (size != null) {
+    headers['content-length'] = size.toString();
+  }
+
+  const create200Response = (): Response => {
+    return new Response(Readable.toWeb(plaintext) as ReadableStream<Buffer>, {
+      status: 200,
+      headers,
+    });
+  };
+
+  const range = request.headers.get('range');
+  if (range == null) {
+    return create200Response();
+  }
+
+  const match = range.match(/^bytes=(\d+)-(\d+)?$/);
+  if (match == null) {
+    console.error(`attachment_channel: invalid range header: ${range}`);
+    return create200Response();
+  }
+
+  const startParam = safeParseInteger(match[1]);
+  if (startParam == null) {
+    console.error(`attachment_channel: invalid range header: ${range}`);
+    return create200Response();
+  }
+
+  let endParam: number | undefined;
+  if (match[2] != null) {
+    const intValue = safeParseInteger(match[2]);
+    if (intValue == null) {
+      console.error(`attachment_channel: invalid range header: ${range}`);
+      return create200Response();
+    }
+    endParam = intValue;
+  }
+
+  const start = Math.min(startParam, size || Infinity);
+  let end: number;
+  if (endParam === undefined) {
+    end = size || Infinity;
+  } else {
+    // Supplied range is inclusive
+    end = Math.min(endParam + 1, size || Infinity);
+  }
+
+  let offset = 0;
+  const transform = new Transform({
+    transform(data, _enc, callback) {
+      if (offset + data.byteLength >= start && offset <= end) {
+        this.push(data.subarray(Math.max(0, start - offset), end - offset));
+      }
+
+      offset += data.byteLength;
+      callback();
+    },
+  });
+
+  headers['content-range'] =
+    size === undefined
+      ? `bytes ${start}-${endParam === undefined ? '' : end - 1}/*`
+      : `bytes ${start}-${end - 1}/${size}`;
+
+  if (endParam !== undefined || size !== undefined) {
+    headers['content-length'] = (end - start).toString();
+  }
+
+  drop(
+    (async () => {
+      try {
+        await pipeline(plaintext, transform);
+      } catch (error) {
+        transform.emit('error', error);
+      }
+    })()
+  );
+
+  return new Response(Readable.toWeb(transform) as ReadableStream<Buffer>, {
+    status: 206,
+    headers,
+  });
 }

app/attachments.ts

@@ -1,12 +1,19 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import { PassThrough } from 'node:stream';
 import { join, relative, normalize } from 'path';
 import fastGlob from 'fast-glob';
 import fse from 'fs-extra';
 import { map, isString } from 'lodash';
 import normalizePath from 'normalize-path';
 import { isPathInside } from '../ts/util/isPathInside';
+import {
+  generateKeys,
+  decryptAttachmentV2ToSink,
+  encryptAttachmentV2ToDisk,
+} from '../ts/AttachmentCrypto';
+import type { LocalAttachmentV2Type } from '../ts/types/Attachment';
 
 const PATH = 'attachments.noindex';
 const AVATAR_PATH = 'avatars.noindex';
@@ -190,3 +197,57 @@ export const deleteAllDraftAttachments = async ({
 
   console.log(`deleteAllDraftAttachments: deleted ${attachments.length} files`);
 };
+
+export const readAndDecryptDataFromDisk = async ({
+  absolutePath,
+  keysBase64,
+  size,
+}: {
+  absolutePath: string;
+  keysBase64: string;
+  size: number;
+}): Promise<Uint8Array> => {
+  const sink = new PassThrough();
+
+  const chunks = new Array<Buffer>();
+
+  sink.on('data', chunk => chunks.push(chunk));
+  sink.resume();
+
+  await decryptAttachmentV2ToSink(
+    {
+      ciphertextPath: absolutePath,
+      idForLogging: 'attachments/readAndDecryptDataFromDisk',
+      keysBase64,
+      size,
+      isLocal: true,
+    },
+    sink
+  );
+
+  return Buffer.concat(chunks);
+};
+
+export const writeNewAttachmentData = async ({
+  data,
+  getAbsoluteAttachmentPath,
+}: {
+  data: Uint8Array;
+  getAbsoluteAttachmentPath: (relativePath: string) => string;
+}): Promise<LocalAttachmentV2Type> => {
+  const keys = generateKeys();
+
+  const { plaintextHash, path } = await encryptAttachmentV2ToDisk({
+    plaintext: { data },
+    getAbsoluteAttachmentPath,
+    keys,
+  });
+
+  return {
+    version: 2,
+    plaintextHash,
+    size: data.byteLength,
+    path,
+    localKey: Buffer.from(keys).toString('base64'),
+  };
+};

app/main.ts

@@ -29,6 +29,7 @@ import {
   systemPreferences,
   Notification,
   safeStorage,
+  protocol as electronProtocol,
 } from 'electron';
 import type { MenuItemConstructorOptions, Settings } from 'electron';
 import { z } from 'zod';
@@ -1823,6 +1824,17 @@ if (DISABLE_GPU) {
   app.disableHardwareAcceleration();
 }
 
+// This has to run before the 'ready' event.
+electronProtocol.registerSchemesAsPrivileged([
+  {
+    scheme: 'attachment',
+    privileges: {
+      supportFetchAPI: true,
+      stream: true,
+    },
+  },
+]);
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.

background.html

@@ -16,12 +16,12 @@
       http-equiv="Content-Security-Policy"
       content="default-src 'none';
             child-src 'self';
-            connect-src 'self' https: wss:;
+            connect-src 'self' https: wss: attachment:;
             font-src 'self';
             form-action 'self';
             frame-src 'none';
-            img-src 'self' blob: data: emoji:;
+            img-src 'self' blob: data: emoji: attachment:;
-            media-src 'self' blob:;
+            media-src 'self' blob: attachment:;
             object-src 'none';
             script-src 'self' 'sha256-Qu05oqDmBO5fZacm7tr/oerJcqsW0G/XqP4PRCziovc=' 'sha256-eLeGwSfPmXJ+EUiLfIeXABvLiUqDbiKgNLpHITaabgQ=';
             style-src 'self' 'unsafe-inline';"

ts/AttachmentCrypto.ts

@@ -3,45 +3,44 @@
 
 import { unlinkSync, createReadStream, createWriteStream } from 'fs';
 import { open } from 'fs/promises';
-import {
+import { createCipheriv, createHash, createHmac, randomBytes } from 'crypto';
-  createDecipheriv,
+import type { Hash } from 'crypto';
-  createCipheriv,
-  createHash,
-  createHmac,
-  randomBytes,
-} from 'crypto';
-import type { Decipher, Hash, Hmac } from 'crypto';
 import { PassThrough, Transform, type Writable, Readable } from 'stream';
 import { pipeline } from 'stream/promises';
 import { ensureFile } from 'fs-extra';
 import * as log from './logging/log';
-import { HashType, CipherType } from './types/Crypto';
+import {
-import { createName, getRelativePath } from './windows/attachments';
+  HashType,
+  CipherType,
+  IV_LENGTH,
+  KEY_LENGTH,
+  MAC_LENGTH,
+} from './types/Crypto';
 import { constantTimeEqual } from './Crypto';
+import { createName, getRelativePath } from './util/attachmentPath';
 import { appendPaddingStream, logPadSize } from './util/logPadding';
 import { prependStream } from './util/prependStream';
 import { appendMacStream } from './util/appendMacStream';
-import { Environment } from './environment';
+import { getIvAndDecipher } from './util/getIvAndDecipher';
-import type { AttachmentType } from './types/Attachment';
+import { getMacAndUpdateHmac } from './util/getMacAndUpdateHmac';
-import type { ContextType } from './types/Message2';
+import { trimPadding } from './util/trimPadding';
 import { strictAssert } from './util/assert';
 import * as Errors from './types/errors';
 import { isNotNil } from './util/isNotNil';
 import { missingCaseError } from './util/missingCaseError';
+import { getEnvironment, Environment } from './environment';
 
 // This file was split from ts/Crypto.ts because it pulls things in from node, and
 //   too many things pull in Crypto.ts, so it broke storybook.
 
-const IV_LENGTH = 16;
+const DIGEST_LENGTH = MAC_LENGTH;
-const KEY_LENGTH = 32;
-const DIGEST_LENGTH = 32;
 const HEX_DIGEST_LENGTH = DIGEST_LENGTH * 2;
-const ATTACHMENT_MAC_LENGTH = 32;
+const ATTACHMENT_MAC_LENGTH = MAC_LENGTH;
 
 export class ReencyptedDigestMismatchError extends Error {}
 
 /** @private */
-export const KEY_SET_LENGTH = KEY_LENGTH + ATTACHMENT_MAC_LENGTH;
+export const KEY_SET_LENGTH = KEY_LENGTH + MAC_LENGTH;
 
 export function _generateAttachmentIv(): Uint8Array {
   return randomBytes(IV_LENGTH);
@@ -58,14 +57,31 @@ export type EncryptedAttachmentV2 = {
   ciphertextSize: number;
 };
 
+export type ReencryptedAttachmentV2 = {
+  path: string;
+  iv: Uint8Array;
+  plaintextHash: string;
+
+  key: Uint8Array;
+};
+
 export type DecryptedAttachmentV2 = {
   path: string;
   iv: Uint8Array;
   plaintextHash: string;
 };
 
+export type ReecryptedAttachmentV2 = {
+  key: Uint8Array;
+  mac: Uint8Array;
+  path: string;
+  iv: Uint8Array;
+  plaintextHash: string;
+};
+
 export type PlaintextSourceType =
   | { data: Uint8Array }
+  | { stream: Readable }
   | { absolutePath: string };
 
 export type HardcodedIVForEncryptionType =
@@ -84,6 +100,7 @@ type EncryptAttachmentV2PropsType = {
   keys: Readonly<Uint8Array>;
   dangerousIv?: HardcodedIVForEncryptionType;
   dangerousTestOnlySkipPadding?: boolean;
+  getAbsoluteAttachmentPath: (relativePath: string) => string;
 };
 
 export async function encryptAttachmentV2ToDisk(
@@ -91,8 +108,7 @@ export async function encryptAttachmentV2ToDisk(
 ): Promise<EncryptedAttachmentV2 & { path: string }> {
   // Create random output file
   const relativeTargetPath = getRelativePath(createName());
-  const absoluteTargetPath =
+  const absoluteTargetPath = args.getAbsoluteAttachmentPath(relativeTargetPath);
-    window.Signal.Migrations.getAbsoluteAttachmentPath(relativeTargetPath);
 
   await ensureFile(absoluteTargetPath);
 
@@ -128,7 +144,7 @@ export async function encryptAttachmentV2({
 
   if (dangerousIv) {
     if (dangerousIv.reason === 'test') {
-      if (window.getEnvironment() !== Environment.Test) {
+      if (getEnvironment() !== Environment.Test) {
         throw new Error(
           `${logId}: Used dangerousIv with reason test outside tests!`
         );
@@ -146,10 +162,7 @@ export async function encryptAttachmentV2({
     }
   }
 
-  if (
+  if (dangerousTestOnlySkipPadding && getEnvironment() !== Environment.Test) {
-    dangerousTestOnlySkipPadding &&
-    window.getEnvironment() !== Environment.Test
-  ) {
     throw new Error(
       `${logId}: Used dangerousTestOnlySkipPadding outside tests!`
     );
@@ -160,12 +173,17 @@ export async function encryptAttachmentV2({
   const digest = createHash(HashType.size256);
 
   let ciphertextSize: number | undefined;
+  let mac: Uint8Array | undefined;
 
   try {
-    const source =
+    let source: Readable;
-      'data' in plaintext
+    if ('data' in plaintext) {
-        ? Readable.from([Buffer.from(plaintext.data)])
+      source = Readable.from([Buffer.from(plaintext.data)]);
-        : createReadStream(plaintext.absolutePath);
+    } else if ('stream' in plaintext) {
+      source = plaintext.stream;
+    } else {
+      source = createReadStream(plaintext.absolutePath);
+    }
 
     await pipeline(
       [
@@ -174,7 +192,9 @@ export async function encryptAttachmentV2({
         dangerousTestOnlySkipPadding ? undefined : appendPaddingStream(),
         createCipheriv(CipherType.AES256CBC, aesKey, iv),
         prependIv(iv),
-        appendMacStream(macKey),
+        appendMacStream(macKey, macValue => {
+          mac = macValue;
+        }),
         peekAndUpdateHash(digest),
         measureSize(size => {
           ciphertextSize = size;
@@ -204,6 +224,7 @@ export async function encryptAttachmentV2({
   );
 
   strictAssert(ciphertextSize != null, 'Failed to measure ciphertext size!');
+  strictAssert(mac != null, 'Failed to compute mac!');
 
   if (dangerousIv?.reason === 'reencrypting-for-backup') {
     if (!constantTimeEqual(ourDigest, dangerousIv.digestToMatch)) {
@@ -221,37 +242,102 @@ export async function encryptAttachmentV2({
   };
 }
 
-type DecryptAttachmentOptionsType = Readonly<{
+type DecryptAttachmentToSinkOptionsType = Readonly<
+  {
     ciphertextPath: string;
     idForLogging: string;
-  aesKey: Readonly<Uint8Array>;
-  macKey: Readonly<Uint8Array>;
     size: number;
-  theirDigest: Readonly<Uint8Array>;
     outerEncryption?: {
       aesKey: Readonly<Uint8Array>;
       macKey: Readonly<Uint8Array>;
     };
+  } & (
+    | {
+        isLocal?: false;
+        theirDigest: Readonly<Uint8Array>;
+      }
+    | {
+        // No need to check integrity for already downloaded attachments
+        isLocal: true;
+        theirDigest?: undefined;
+      }
+  ) &
+    (
+      | {
+          aesKey: Readonly<Uint8Array>;
+          macKey: Readonly<Uint8Array>;
+        }
+      | {
+          // The format used by most stored attachments
+          keysBase64: string;
+        }
+    )
+>;
+
+export type DecryptAttachmentOptionsType = DecryptAttachmentToSinkOptionsType &
+  Readonly<{
+    getAbsoluteAttachmentPath: (relativePath: string) => string;
   }>;
 
 export async function decryptAttachmentV2(
   options: DecryptAttachmentOptionsType
 ): Promise<DecryptedAttachmentV2> {
-  const {
+  const logId = `decryptAttachmentV2(${options.idForLogging})`;
-    idForLogging,
-    macKey,
-    aesKey,
-    ciphertextPath,
-    theirDigest,
-    outerEncryption,
-  } = options;
-
-  const logId = `decryptAttachmentV2(${idForLogging})`;
 
   // Create random output file
   const relativeTargetPath = getRelativePath(createName());
   const absoluteTargetPath =
-    window.Signal.Migrations.getAbsoluteAttachmentPath(relativeTargetPath);
+    options.getAbsoluteAttachmentPath(relativeTargetPath);
+
+  let writeFd;
+  try {
+    try {
+      await ensureFile(absoluteTargetPath);
+      writeFd = await open(absoluteTargetPath, 'w');
+    } catch (cause) {
+      throw new Error(`${logId}: Failed to create write path`, { cause });
+    }
+
+    const result = await decryptAttachmentV2ToSink(
+      options,
+      writeFd.createWriteStream()
+    );
+
+    return {
+      ...result,
+      path: relativeTargetPath,
+    };
+  } catch (error) {
+    log.error(
+      `${logId}: Failed to decrypt attachment to disk`,
+      Errors.toLogFormat(error)
+    );
+    safeUnlinkSync(absoluteTargetPath);
+    throw error;
+  } finally {
+    await writeFd?.close();
+  }
+}
+
+export async function decryptAttachmentV2ToSink(
+  options: DecryptAttachmentToSinkOptionsType,
+  sink: Writable
+): Promise<Omit<DecryptedAttachmentV2, 'path'>> {
+  const { idForLogging, ciphertextPath, outerEncryption } = options;
+
+  let aesKey: Uint8Array;
+  let macKey: Uint8Array;
+
+  if ('aesKey' in options) {
+    ({ aesKey, macKey } = options);
+  } else {
+    const { keysBase64 } = options;
+    const keys = Buffer.from(keysBase64, 'base64');
+
+    ({ aesKey, macKey } = splitKeys(keys));
+  }
+
+  const logId = `decryptAttachmentV2(${idForLogging})`;
 
   const digest = createHash(HashType.size256);
   const hmac = createHmac(HashType.size256, macKey);
@@ -276,7 +362,6 @@ export async function decryptAttachmentV2(
     : undefined;
 
   let readFd;
-  let writeFd;
   let iv: Uint8Array | undefined;
   try {
     try {
@@ -284,12 +369,6 @@ export async function decryptAttachmentV2(
     } catch (cause) {
       throw new Error(`${logId}: Read path doesn't exist`, { cause });
     }
-    try {
-      await ensureFile(absoluteTargetPath);
-      writeFd = await open(absoluteTargetPath, 'w');
-    } catch (cause) {
-      throw new Error(`${logId}: Failed to create write path`, { cause });
-    }
 
     await pipeline(
       [
@@ -305,18 +384,23 @@ export async function decryptAttachmentV2(
         }),
         trimPadding(options.size),
         peekAndUpdateHash(plaintextHash),
-        writeFd.createWriteStream(),
+        sink,
       ].filter(isNotNil)
     );
   } catch (error) {
+    // These errors happen when canceling fetch from `attachment://` urls,
+    // ignore them to avoid noise in the logs.
+    if (error.name === 'AbortError') {
+      throw error;
+    }
+
     log.error(
       `${logId}: Failed to decrypt attachment`,
       Errors.toLogFormat(error)
     );
-    safeUnlinkSync(absoluteTargetPath);
     throw error;
   } finally {
-    await Promise.all([readFd?.close(), writeFd?.close()]);
+    await readFd?.close();
   }
 
   const ourMac = hmac.digest();
@@ -343,7 +427,7 @@ export async function decryptAttachmentV2(
   if (!constantTimeEqual(ourMac, theirMac)) {
     throw new Error(`${logId}: Bad MAC`);
   }
-  if (!constantTimeEqual(ourDigest, theirDigest)) {
+  if (!options.isLocal && !constantTimeEqual(ourDigest, options.theirDigest)) {
     throw new Error(`${logId}: Bad digest`);
   }
 
@@ -372,12 +456,64 @@ export async function decryptAttachmentV2(
   }
 
   return {
-    path: relativeTargetPath,
     iv,
     plaintextHash: ourPlaintextHash,
   };
 }
 
+export async function reencryptAttachmentV2(
+  options: DecryptAttachmentOptionsType
+): Promise<ReencryptedAttachmentV2> {
+  const { idForLogging } = options;
+
+  const logId = `reencryptAttachmentV2(${idForLogging})`;
+
+  // Create random output file
+  const relativeTargetPath = getRelativePath(createName());
+  const absoluteTargetPath =
+    options.getAbsoluteAttachmentPath(relativeTargetPath);
+
+  let writeFd;
+  try {
+    try {
+      await ensureFile(absoluteTargetPath);
+      writeFd = await open(absoluteTargetPath, 'w');
+    } catch (cause) {
+      throw new Error(`${logId}: Failed to create write path`, { cause });
+    }
+
+    const keys = generateKeys();
+
+    const passthrough = new PassThrough();
+    const [result] = await Promise.all([
+      decryptAttachmentV2ToSink(options, passthrough),
+      await encryptAttachmentV2({
+        keys,
+        plaintext: {
+          stream: passthrough,
+        },
+        sink: createWriteStream(absoluteTargetPath),
+        getAbsoluteAttachmentPath: options.getAbsoluteAttachmentPath,
+      }),
+    ]);
+
+    return {
+      ...result,
+      key: keys,
+      path: relativeTargetPath,
+    };
+  } catch (error) {
+    log.error(
+      `${logId}: Failed to decrypt attachment`,
+      Errors.toLogFormat(error)
+    );
+    safeUnlinkSync(absoluteTargetPath);
+    throw error;
+  } finally {
+    await writeFd?.close();
+  }
+}
+
 /**
  * Splits the keys into aes and mac keys.
  */
@@ -396,6 +532,10 @@ export function splitKeys(keys: Uint8Array): AttachmentEncryptionKeysType {
   return { aesKey, macKey };
 }
 
+export function generateKeys(): Uint8Array {
+  return randomBytes(KEY_SET_LENGTH);
+}
+
 /**
  * Updates a hash of the stream without modifying it.
  */
@@ -412,122 +552,6 @@ function peekAndUpdateHash(hash: Hash) {
   });
 }
 
-/**
- * Updates an hmac with the stream except for the last ATTACHMENT_MAC_LENGTH
- * bytes. The last ATTACHMENT_MAC_LENGTH bytes are passed to the callback.
- */
-export function getMacAndUpdateHmac(
-  hmac: Hmac,
-  onTheirMac: (theirMac: Uint8Array) => void
-): Transform {
-  // Because we don't have a view of the entire stream, we don't know when we're
-  // at the end. We need to omit the last ATTACHMENT_MAC_LENGTH bytes from
-  // `hmac.update` so we only push what we know is not the mac.
-  let maybeMacBytes = Buffer.alloc(0);
-
-  function updateWithKnownNonMacBytes() {
-    let knownNonMacBytes = null;
-    if (maybeMacBytes.byteLength > ATTACHMENT_MAC_LENGTH) {
-      knownNonMacBytes = maybeMacBytes.subarray(0, -ATTACHMENT_MAC_LENGTH);
-      maybeMacBytes = maybeMacBytes.subarray(-ATTACHMENT_MAC_LENGTH);
-      hmac.update(knownNonMacBytes);
-    }
-    return knownNonMacBytes;
-  }
-
-  return new Transform({
-    transform(chunk, _encoding, callback) {
-      try {
-        maybeMacBytes = Buffer.concat([maybeMacBytes, chunk]);
-        const knownNonMac = updateWithKnownNonMacBytes();
-        callback(null, knownNonMac);
-      } catch (error) {
-        callback(error);
-      }
-    },
-    flush(callback) {
-      try {
-        onTheirMac(maybeMacBytes);
-        callback(null, null);
-      } catch (error) {
-        callback(error);
-      }
-    },
-  });
-}
-
-/**
- * Gets the IV from the start of the stream and creates a decipher.
- * Then deciphers the rest of the stream.
- */
-export function getIvAndDecipher(
-  aesKey: Uint8Array,
-  onFoundIv?: (iv: Buffer) => void
-): Transform {
-  let maybeIvBytes: Buffer | null = Buffer.alloc(0);
-  let decipher: Decipher | null = null;
-  return new Transform({
-    transform(chunk, _encoding, callback) {
-      try {
-        // If we've already initialized the decipher, just pass the chunk through.
-        if (decipher != null) {
-          callback(null, decipher.update(chunk));
-          return;
-        }
-
-        // Wait until we have enough bytes to get the iv to initialize the
-        // decipher.
-        maybeIvBytes = Buffer.concat([maybeIvBytes, chunk]);
-        if (maybeIvBytes.byteLength < IV_LENGTH) {
-          callback(null, null);
-          return;
-        }
-
-        // Once we have enough bytes, initialize the decipher and pass the
-        // remainder of the bytes through.
-        const iv = maybeIvBytes.subarray(0, IV_LENGTH);
-        const remainder = maybeIvBytes.subarray(IV_LENGTH);
-        onFoundIv?.(iv);
-        maybeIvBytes = null; // free memory
-        decipher = createDecipheriv(CipherType.AES256CBC, aesKey, iv);
-        callback(null, decipher.update(remainder));
-      } catch (error) {
-        callback(error);
-      }
-    },
-    flush(callback) {
-      try {
-        strictAssert(decipher != null, 'decipher must be set');
-        callback(null, decipher.final());
-      } catch (error) {
-        callback(error);
-      }
-    },
-  });
-}
-
-/**
- * Truncates the stream to the target size.
- */
-function trimPadding(size: number) {
-  let total = 0;
-  return new Transform({
-    transform(chunk, _encoding, callback) {
-      const chunkSize = chunk.byteLength;
-      const sizeLeft = size - total;
-      if (sizeLeft >= chunkSize) {
-        total += chunkSize;
-        callback(null, chunk);
-      } else if (sizeLeft > 0) {
-        total += sizeLeft;
-        callback(null, chunk.subarray(0, sizeLeft));
-      } else {
-        callback(null, null);
-      }
-    },
-  });
-}
-
 export function measureSize(onComplete: (size: number) => void): Transform {
   let totalBytes = 0;
   const passthrough = new PassThrough();
@@ -568,62 +592,6 @@ function prependIv(iv: Uint8Array) {
   return prependStream(iv);
 }
 
-/**
- * Called during message schema migration. New messages downloaded should have
- * plaintextHash added automatically during decryption / writing to file system.
- */
-export async function addPlaintextHashToAttachment(
-  attachment: AttachmentType,
-  { getAbsoluteAttachmentPath }: ContextType
-): Promise<AttachmentType> {
-  if (!attachment.path) {
-    return attachment;
-  }
-
-  const plaintextHash = await getPlaintextHashForAttachmentOnDisk(
-    getAbsoluteAttachmentPath(attachment.path)
-  );
-
-  if (!plaintextHash) {
-    log.error('addPlaintextHashToAttachment: Failed to generate hash');
-    return attachment;
-  }
-
-  return {
-    ...attachment,
-    plaintextHash,
-  };
-}
-
-export async function getPlaintextHashForAttachmentOnDisk(
-  absolutePath: string
-): Promise<string | undefined> {
-  let readFd;
-  try {
-    try {
-      readFd = await open(absolutePath, 'r');
-    } catch (error) {
-      log.error('addPlaintextHashToAttachment: Target path does not exist');
-      return undefined;
-    }
-    const hash = createHash(HashType.size256);
-    await pipeline(readFd.createReadStream(), hash);
-    const plaintextHash = hash.digest('hex');
-    if (!plaintextHash) {
-      log.error(
-        'addPlaintextHashToAttachment: no hash generated from file; is the file empty?'
-      );
-      return;
-    }
-    return plaintextHash;
-  } catch (error) {
-    log.error('addPlaintextHashToAttachment: error during file read', error);
-    return undefined;
-  } finally {
-    await readFd?.close();
-  }
-}
-
 export function getPlaintextHashForInMemoryAttachment(
   data: Uint8Array
 ): string {

ts/background.ts

@@ -208,6 +208,7 @@ import type { ReadSyncTaskType } from './messageModifiers/ReadSyncs';
 import { isEnabled } from './RemoteConfig';
 import { AttachmentBackupManager } from './jobs/AttachmentBackupManager';
 import { getConversationIdForLogging } from './util/idForLogging';
+import { encryptConversationAttachments } from './util/encryptConversationAttachments';
 
 export function isOverHourIntoPast(timestamp: number): boolean {
   return isNumber(timestamp) && isOlderThan(timestamp, HOUR);
@@ -960,12 +961,22 @@ export async function startApp(): Promise<void> {
       window.i18n
     );
 
-    if (newVersion) {
+    if (newVersion || window.storage.get('needOrphanedAttachmentCheck')) {
+      await window.storage.remove('needOrphanedAttachmentCheck');
       await window.Signal.Data.cleanupOrphanedAttachments();
 
       drop(window.Signal.Data.ensureFilePermissions());
     }
 
+    if (
+      newVersion &&
+      lastVersion &&
+      window.isBeforeVersion(lastVersion, 'v7.18.0-beta.1')
+    ) {
+      await encryptConversationAttachments();
+      await Stickers.encryptLegacyStickers();
+    }
+
     setAppLoadingScreenMessage(window.i18n('icu:loading'), window.i18n);
 
     let isMigrationWithIndexComplete = false;

ts/components/AddUserToAnotherGroupModal.tsx

@@ -129,7 +129,7 @@ export function AddUserToAnotherGroupModal({
       }
 
       return {
-        ...pick(convo, 'id', 'avatarPath', 'title', 'unblurredAvatarPath'),
+        ...pick(convo, 'id', 'avatarUrl', 'title', 'unblurredAvatarUrl'),
         memberships,
         membersCount,
         disabledReason,

ts/components/Avatar.stories.tsx

@@ -65,7 +65,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   acceptedMessageRequest: isBoolean(overrideProps.acceptedMessageRequest)
     ? overrideProps.acceptedMessageRequest
     : true,
-  avatarPath: overrideProps.avatarPath || '',
+  avatarUrl: overrideProps.avatarUrl || '',
   badge: overrideProps.badge,
   blur: overrideProps.blur,
   color: overrideProps.color || AvatarColors[0],
@@ -107,7 +107,7 @@ const TemplateSingle: StoryFn<Props> = (args: Props) => (
 
 export const Default = Template.bind({});
 Default.args = createProps({
-  avatarPath: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
+  avatarUrl: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
 });
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 Default.play = async (context: any) => {
@@ -120,13 +120,13 @@ Default.play = async (context: any) => {
 
 export const WithBadge = Template.bind({});
 WithBadge.args = createProps({
-  avatarPath: '/fixtures/kitten-3-64-64.jpg',
+  avatarUrl: '/fixtures/kitten-3-64-64.jpg',
   badge: getFakeBadge(),
 });
 
 export const WideImage = Template.bind({});
 WideImage.args = createProps({
-  avatarPath: '/fixtures/wide.jpg',
+  avatarUrl: '/fixtures/wide.jpg',
 });
 
 export const OneWordName = Template.bind({});
@@ -186,12 +186,12 @@ BrokenColor.args = createProps({
 
 export const BrokenAvatar = Template.bind({});
 BrokenAvatar.args = createProps({
-  avatarPath: 'badimage.png',
+  avatarUrl: 'badimage.png',
 });
 
 export const BrokenAvatarForGroup = Template.bind({});
 BrokenAvatarForGroup.args = createProps({
-  avatarPath: 'badimage.png',
+  avatarUrl: 'badimage.png',
   conversationType: 'group',
 });
 
@@ -203,29 +203,29 @@ Loading.args = createProps({
 export const BlurredBasedOnProps = TemplateSingle.bind({});
 BlurredBasedOnProps.args = createProps({
   acceptedMessageRequest: false,
-  avatarPath: '/fixtures/kitten-3-64-64.jpg',
+  avatarUrl: '/fixtures/kitten-3-64-64.jpg',
 });
 
 export const ForceBlurred = TemplateSingle.bind({});
 ForceBlurred.args = createProps({
-  avatarPath: '/fixtures/kitten-3-64-64.jpg',
+  avatarUrl: '/fixtures/kitten-3-64-64.jpg',
   blur: AvatarBlur.BlurPicture,
 });
 
 export const BlurredWithClickToView = TemplateSingle.bind({});
 BlurredWithClickToView.args = createProps({
-  avatarPath: '/fixtures/kitten-3-64-64.jpg',
+  avatarUrl: '/fixtures/kitten-3-64-64.jpg',
   blur: AvatarBlur.BlurPictureWithClickToView,
 });
 
 export const StoryUnread = TemplateSingle.bind({});
 StoryUnread.args = createProps({
-  avatarPath: '/fixtures/kitten-3-64-64.jpg',
+  avatarUrl: '/fixtures/kitten-3-64-64.jpg',
   storyRing: HasStories.Unread,
 });
 
 export const StoryRead = TemplateSingle.bind({});
 StoryRead.args = createProps({
-  avatarPath: '/fixtures/kitten-3-64-64.jpg',
+  avatarUrl: '/fixtures/kitten-3-64-64.jpg',
   storyRing: HasStories.Read,
 });

ts/components/Avatar.tsx

@@ -53,7 +53,7 @@ export enum AvatarSize {
 type BadgePlacementType = { bottom: number; right: number };
 
 export type Props = {
-  avatarPath?: string;
+  avatarUrl?: string;
   blur?: AvatarBlur;
   color?: AvatarColorType;
   loading?: boolean;
@@ -67,7 +67,7 @@ export type Props = {
   sharedGroupNames: ReadonlyArray<string>;
   size: AvatarSize;
   title: string;
-  unblurredAvatarPath?: string;
+  unblurredAvatarUrl?: string;
   searchResult?: boolean;
   storyRing?: HasStories;
 
@@ -107,7 +107,7 @@ const getDefaultBlur = (
 
 export function Avatar({
   acceptedMessageRequest,
-  avatarPath,
+  avatarUrl,
   badge,
   className,
   color = 'A200',
@@ -123,15 +123,15 @@ export function Avatar({
   size,
   theme,
   title,
-  unblurredAvatarPath,
+  unblurredAvatarUrl,
   searchResult,
   storyRing,
   blur = getDefaultBlur({
     acceptedMessageRequest,
-    avatarPath,
+    avatarUrl,
     isMe,
     sharedGroupNames,
-    unblurredAvatarPath,
+    unblurredAvatarUrl,
   }),
   ...ariaProps
 }: Props): JSX.Element {
@@ -139,15 +139,15 @@ export function Avatar({
 
   useEffect(() => {
     setImageBroken(false);
-  }, [avatarPath]);
+  }, [avatarUrl]);
 
   useEffect(() => {
-    if (!avatarPath) {
+    if (!avatarUrl) {
       return noop;
     }
 
     const image = new Image();
-    image.src = avatarPath;
+    image.src = avatarUrl;
     image.onerror = () => {
       log.warn('Avatar: Image failed to load; failing over to placeholder');
       setImageBroken(true);
@@ -156,10 +156,10 @@ export function Avatar({
     return () => {
       image.onerror = noop;
     };
-  }, [avatarPath]);
+  }, [avatarUrl]);
 
   const initials = getInitials(title);
-  const hasImage = !noteToSelf && avatarPath && !imageBroken;
+  const hasImage = !noteToSelf && avatarUrl && !imageBroken;
   const shouldUseInitials =
     !hasImage &&
     conversationType === 'direct' &&
@@ -179,7 +179,7 @@ export function Avatar({
       </div>
     );
   } else if (hasImage) {
-    assertDev(avatarPath, 'avatarPath should be defined here');
+    assertDev(avatarUrl, 'avatarUrl should be defined here');
 
     assertDev(
       blur !== AvatarBlur.BlurPictureWithClickToView ||
@@ -195,7 +195,7 @@ export function Avatar({
         <div
           className="module-Avatar__image"
           style={{
-            backgroundImage: `url('${encodeURI(avatarPath)}')`,
+            backgroundImage: `url('${avatarUrl}')`,
             ...(isBlurred ? { filter: `blur(${Math.ceil(size / 2)}px)` } : {}),
           }}
         />
@@ -316,7 +316,7 @@ export function Avatar({
         Boolean(storyRing) && 'module-Avatar--with-story',
         storyRing === HasStories.Unread && 'module-Avatar--with-story--unread',
         className,
-        avatarPath === SIGNAL_AVATAR_PATH
+        avatarUrl === SIGNAL_AVATAR_PATH
           ? 'module-Avatar--signal-official'
           : undefined
       )}

ts/components/AvatarEditor.stories.tsx

@@ -18,7 +18,7 @@ const i18n = setupI18n('en', enMessages);
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   avatarColor: overrideProps.avatarColor || AvatarColors[9],
-  avatarPath: overrideProps.avatarPath,
+  avatarUrl: overrideProps.avatarUrl,
   conversationId: '123',
   conversationTitle: overrideProps.conversationTitle || 'Default Title',
   deleteAvatarFromDisk: action('deleteAvatarFromDisk'),
@@ -104,7 +104,7 @@ export function HasAvatar(): JSX.Element {
   return (
     <AvatarEditor
       {...createProps({
-        avatarPath: '/fixtures/kitten-3-64-64.jpg',
+        avatarUrl: '/fixtures/kitten-3-64-64.jpg',
       })}
     />
   );

ts/components/AvatarEditor.tsx

@@ -24,7 +24,7 @@ import { missingCaseError } from '../util/missingCaseError';
 
 export type PropsType = {
   avatarColor?: AvatarColorType;
-  avatarPath?: string;
+  avatarUrl?: string;
   avatarValue?: Uint8Array;
   conversationId?: string;
   conversationTitle?: string;
@@ -46,7 +46,7 @@ enum EditMode {
 
 export function AvatarEditor({
   avatarColor,
-  avatarPath,
+  avatarUrl,
   avatarValue,
   conversationId,
   conversationTitle,
@@ -152,7 +152,7 @@ export function AvatarEditor({
   }, []);
 
   const hasChanges =
-    initialAvatar !== avatarPreview || Boolean(pendingClear && avatarPath);
+    initialAvatar !== avatarPreview || Boolean(pendingClear && avatarUrl);
 
   let content: JSX.Element | undefined;
 
@@ -162,7 +162,7 @@ export function AvatarEditor({
         <div className="AvatarEditor__preview">
           <AvatarPreview
             avatarColor={avatarColor}
-            avatarPath={pendingClear ? undefined : avatarPath}
+            avatarUrl={pendingClear ? undefined : avatarUrl}
             avatarValue={avatarPreview}
             conversationTitle={conversationTitle}
             i18n={i18n}

ts/components/AvatarLightbox.stories.tsx

@@ -45,5 +45,5 @@ export function Person(args: PropsType): JSX.Element {
 }
 
 export function Photo(args: PropsType): JSX.Element {
-  return <AvatarLightbox {...args} avatarPath="/fixtures/kitten-1-64-64.jpg" />;
+  return <AvatarLightbox {...args} avatarUrl="/fixtures/kitten-1-64-64.jpg" />;
 }

ts/components/AvatarLightbox.tsx

@@ -11,7 +11,7 @@ import type { LocalizerType } from '../types/Util';
 
 export type PropsType = {
   avatarColor?: AvatarColorType;
-  avatarPath?: string;
+  avatarUrl?: string;
   conversationTitle?: string;
   i18n: LocalizerType;
   isGroup?: boolean;
@@ -20,7 +20,7 @@ export type PropsType = {
 
 export function AvatarLightbox({
   avatarColor,
-  avatarPath,
+  avatarUrl,
   conversationTitle,
   i18n,
   isGroup,
@@ -43,7 +43,7 @@ export function AvatarLightbox({
     >
       <AvatarPreview
         avatarColor={avatarColor}
-        avatarPath={avatarPath}
+        avatarUrl={avatarUrl}
         conversationTitle={conversationTitle}
         i18n={i18n}
         isGroup={isGroup}

ts/components/AvatarPreview.stories.tsx

@@ -24,7 +24,7 @@ const TEST_IMAGE = new Uint8Array(
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   avatarColor: overrideProps.avatarColor,
-  avatarPath: overrideProps.avatarPath,
+  avatarUrl: overrideProps.avatarUrl,
   avatarValue: overrideProps.avatarValue,
   conversationTitle: overrideProps.conversationTitle,
   i18n,
@@ -81,7 +81,7 @@ export function Value(): JSX.Element {
 export function Path(): JSX.Element {
   return (
     <AvatarPreview
-      {...createProps({ avatarPath: '/fixtures/kitten-3-64-64.jpg' })}
+      {...createProps({ avatarUrl: '/fixtures/kitten-3-64-64.jpg' })}
     />
   );
 }
@@ -90,7 +90,7 @@ export function ValueAndPath(): JSX.Element {
   return (
     <AvatarPreview
       {...createProps({
-        avatarPath: '/fixtures/kitten-3-64-64.jpg',
+        avatarUrl: '/fixtures/kitten-3-64-64.jpg',
         avatarValue: TEST_IMAGE,
       })}
     />

ts/components/AvatarPreview.tsx

@@ -15,7 +15,7 @@ import { imagePathToBytes } from '../util/imagePathToBytes';
 
 export type PropsType = {
   avatarColor?: AvatarColorType;
-  avatarPath?: string;
+  avatarUrl?: string;
   avatarValue?: Uint8Array;
   conversationTitle?: string;
   i18n: LocalizerType;
@@ -35,7 +35,7 @@ enum ImageStatus {
 
 export function AvatarPreview({
   avatarColor = AvatarColors[0],
-  avatarPath,
+  avatarUrl,
   avatarValue,
   conversationTitle,
   i18n,
@@ -48,15 +48,15 @@ export function AvatarPreview({
 }: PropsType): JSX.Element {
   const [avatarPreview, setAvatarPreview] = useState<Uint8Array | undefined>();
 
-  // Loads the initial avatarPath if one is provided, but only if we're in editable mode.
+  // Loads the initial avatarUrl if one is provided, but only if we're in editable mode.
-  //   If we're not editable, we assume that we either have an avatarPath or we show a
+  //   If we're not editable, we assume that we either have an avatarUrl or we show a
   //   default avatar.
   useEffect(() => {
     if (!isEditable) {
       return;
     }
 
-    if (!avatarPath) {
+    if (!avatarUrl) {
       return noop;
     }
 
@@ -64,7 +64,7 @@ export function AvatarPreview({
 
     void (async () => {
       try {
-        const buffer = await imagePathToBytes(avatarPath);
+        const buffer = await imagePathToBytes(avatarUrl);
         if (shouldCancel) {
           return;
         }
@@ -85,7 +85,7 @@ export function AvatarPreview({
     return () => {
       shouldCancel = true;
     };
-  }, [avatarPath, onAvatarLoaded, isEditable]);
+  }, [avatarUrl, onAvatarLoaded, isEditable]);
 
   // Ensures that when avatarValue changes we generate new URLs
   useEffect(() => {
@@ -120,8 +120,8 @@ export function AvatarPreview({
   } else if (objectUrl) {
     encodedPath = objectUrl;
     imageStatus = ImageStatus.HasImage;
-  } else if (avatarPath) {
+  } else if (avatarUrl) {
-    encodedPath = encodeURI(avatarPath);
+    encodedPath = avatarUrl;
     imageStatus = ImageStatus.HasImage;
   } else {
     imageStatus = ImageStatus.Nothing;

ts/components/CallBackgroundBlur.tsx

@@ -5,13 +5,13 @@ import React from 'react';
 import classNames from 'classnames';
 
 export type PropsType = {
-  avatarPath?: string;
+  avatarUrl?: string;
   children?: React.ReactNode;
   className?: string;
 };
 
 export function CallBackgroundBlur({
-  avatarPath,
+  avatarUrl,
   children,
   className,
 }: PropsType): JSX.Element {
@@ -19,15 +19,15 @@ export function CallBackgroundBlur({
     <div
       className={classNames(
         'module-calling__background',
-        !avatarPath && 'module-calling__background--no-avatar',
+        !avatarUrl && 'module-calling__background--no-avatar',
         className
       )}
     >
-      {avatarPath && (
+      {avatarUrl && (
         <div
           className="module-calling__background--blur"
           style={{
-            backgroundImage: `url('${encodeURI(avatarPath)}')`,
+            backgroundImage: `url('${avatarUrl}')`,
           }}
         />
       )}

ts/components/CallManager.stories.tsx

@@ -42,7 +42,7 @@ const i18n = setupI18n('en', enMessages);
 const getConversation = () =>
   getDefaultConversation({
     id: '3051234567',
-    avatarPath: undefined,
+    avatarUrl: undefined,
     color: AvatarColors[0],
     title: 'Rick Sanchez',
     name: 'Rick Sanchez',

ts/components/CallNeedPermissionScreen.tsx

@@ -13,7 +13,7 @@ export type Props = {
   conversation: Pick<
     ConversationType,
     | 'acceptedMessageRequest'
-    | 'avatarPath'
+    | 'avatarUrl'
     | 'color'
     | 'isMe'
     | 'name'
@@ -21,7 +21,7 @@ export type Props = {
     | 'profileName'
     | 'sharedGroupNames'
     | 'title'
-    | 'unblurredAvatarPath'
+    | 'unblurredAvatarUrl'
   >;
   i18n: LocalizerType;
   close: () => void;
@@ -46,7 +46,7 @@ export function CallNeedPermissionScreen({
     <div className="module-call-need-permission-screen">
       <Avatar
         acceptedMessageRequest={conversation.acceptedMessageRequest}
-        avatarPath={conversation.avatarPath}
+        avatarUrl={conversation.avatarUrl}
         badge={undefined}
         color={conversation.color || AvatarColors[0]}
         noteToSelf={false}

ts/components/CallScreen.stories.tsx

@@ -42,7 +42,7 @@ const i18n = setupI18n('en', enMessages);
 
 const conversation = getDefaultConversation({
   id: '3051234567',
-  avatarPath: undefined,
+  avatarUrl: undefined,
   color: AvatarColors[0],
   title: 'Rick Sanchez',
   name: 'Rick Sanchez',

ts/components/CallScreen.tsx

@@ -432,7 +432,7 @@ export function CallScreen({
         {isSendingVideo ? (
           <video ref={localVideoRef} autoPlay />
         ) : (
-          <CallBackgroundBlur avatarPath={me.avatarPath}>
+          <CallBackgroundBlur avatarUrl={me.avatarUrl}>
             <div className="module-calling__spacer module-calling__camera-is-off-spacer" />
             <div className="module-calling__camera-is-off">
               {i18n('icu:calling__your-video-is-off')}
@@ -453,10 +453,10 @@ export function CallScreen({
         autoPlay
       />
     ) : (
-      <CallBackgroundBlur avatarPath={me.avatarPath}>
+      <CallBackgroundBlur avatarUrl={me.avatarUrl}>
         <Avatar
           acceptedMessageRequest
-          avatarPath={me.avatarPath}
+          avatarUrl={me.avatarUrl}
           badge={undefined}
           color={me.color || AvatarColors[0]}
           noteToSelf={false}

ts/components/CallingAdhocCallInfo.stories.tsx

@@ -33,7 +33,7 @@ function createParticipant(
     sharingScreen: Boolean(participantProps.sharingScreen),
     videoAspectRatio: 1.3,
     ...getDefaultConversationWithServiceId({
-      avatarPath: participantProps.avatarPath,
+      avatarUrl: participantProps.avatarUrl,
       color: sample(AvatarColors),
       isBlocked: Boolean(participantProps.isBlocked),
       name: participantProps.name,

ts/components/CallingAdhocCallInfo.tsx

@@ -80,7 +80,7 @@ function UnknownContacts({
       return (
         <Avatar
           acceptedMessageRequest={participant.acceptedMessageRequest}
-          avatarPath={participant.avatarPath}
+          avatarUrl={participant.avatarUrl}
           badge={undefined}
           className="CallingAdhocCallInfo__UnknownContactAvatar"
           color={AvatarColors[colorIndex]}
@@ -211,7 +211,7 @@ export function CallingAdhocCallInfo({
         <div className="module-calling-participants-list__avatar-and-name">
           <Avatar
             acceptedMessageRequest={participant.acceptedMessageRequest}
-            avatarPath={participant.avatarPath}
+            avatarUrl={participant.avatarUrl}
             badge={undefined}
             color={participant.color}
             conversationType="direct"

ts/components/CallingLobby.stories.tsx

@@ -129,7 +129,7 @@ export function NoCameraLocalAvatar(): JSX.Element {
   const props = createProps({
     availableCameras: [],
     me: getDefaultConversation({
-      avatarPath: '/fixtures/kitten-4-112-112.jpg',
+      avatarUrl: '/fixtures/kitten-4-112-112.jpg',
       color: AvatarColors[0],
       id: generateUuid(),
       serviceId: generateAci(),

ts/components/CallingLobby.tsx

@@ -37,7 +37,7 @@ export type PropsType = {
   conversation: Pick<
     CallingConversationType,
     | 'acceptedMessageRequest'
-    | 'avatarPath'
+    | 'avatarUrl'
     | 'color'
     | 'isMe'
     | 'memberships'
@@ -49,7 +49,7 @@ export type PropsType = {
     | 'systemNickname'
     | 'title'
     | 'type'
-    | 'unblurredAvatarPath'
+    | 'unblurredAvatarUrl'
   >;
   getIsSharingPhoneNumberWithEverybody: () => boolean;
   groupMembers?: Array<
@@ -66,7 +66,7 @@ export type PropsType = {
   isConversationTooBigToRing: boolean;
   isCallFull?: boolean;
   me: Readonly<
-    Pick<ConversationType, 'avatarPath' | 'color' | 'id' | 'serviceId'>
+    Pick<ConversationType, 'avatarUrl' | 'color' | 'id' | 'serviceId'>
   >;
   onCallCanceled: () => void;
   onJoinCall: () => void;
@@ -285,7 +285,7 @@ export function CallingLobby({
         ) : (
           <CallBackgroundBlur
             className="module-CallingLobby__local-preview module-CallingLobby__local-preview--camera-is-off"
-            avatarPath={me.avatarPath}
+            avatarUrl={me.avatarUrl}
           />
         )}
 

ts/components/CallingParticipantsList.stories.tsx

@@ -31,7 +31,7 @@ function createParticipant(
     sharingScreen: Boolean(participantProps.sharingScreen),
     videoAspectRatio: 1.3,
     ...getDefaultConversationWithServiceId({
-      avatarPath: participantProps.avatarPath,
+      avatarUrl: participantProps.avatarUrl,
       color: sample(AvatarColors),
       isBlocked: Boolean(participantProps.isBlocked),
       name: participantProps.name,

ts/components/CallingParticipantsList.tsx

@@ -129,7 +129,7 @@ export const CallingParticipantsList = React.memo(
                         acceptedMessageRequest={
                           participant.acceptedMessageRequest
                         }
-                        avatarPath={participant.avatarPath}
+                        avatarUrl={participant.avatarUrl}
                         badge={undefined}
                         color={participant.color}
                         conversationType="direct"

ts/components/CallingPendingParticipants.tsx

@@ -244,7 +244,7 @@ export function CallingPendingParticipants({
               <div className="module-calling-participants-list__avatar-and-name">
                 <Avatar
                   acceptedMessageRequest={participant.acceptedMessageRequest}
-                  avatarPath={participant.avatarPath}
+                  avatarUrl={participant.avatarUrl}
                   badge={undefined}
                   color={participant.color}
                   conversationType="direct"
@@ -306,7 +306,7 @@ export function CallingPendingParticipants({
         <div className="module-calling-participants-list__avatar-and-name">
           <Avatar
             acceptedMessageRequest={participant.acceptedMessageRequest}
-            avatarPath={participant.avatarPath}
+            avatarUrl={participant.avatarUrl}
             badge={undefined}
             color={participant.color}
             conversationType="direct"

ts/components/CallingPip.stories.tsx

@@ -26,7 +26,7 @@ const i18n = setupI18n('en', enMessages);
 
 const conversation: ConversationType = getDefaultConversation({
   id: '3051234567',
-  avatarPath: undefined,
+  avatarUrl: undefined,
   color: AvatarColors[0],
   title: 'Rick Sanchez',
   name: 'Rick Sanchez',
@@ -98,7 +98,7 @@ export function ContactWithAvatarAndNoVideo(args: PropsType): JSX.Element {
         ...getDefaultCall({}),
         conversation: {
           ...conversation,
-          avatarPath: 'https://www.fillmurray.com/64/64',
+          avatarUrl: 'https://www.fillmurray.com/64/64',
         },
         remoteParticipants: [
           { hasRemoteVideo: false, presenting: false, title: 'Julian' },

ts/components/CallingPipRemoteVideo.tsx

@@ -40,7 +40,7 @@ function NoVideo({
 }): JSX.Element {
   const {
     acceptedMessageRequest,
-    avatarPath,
+    avatarUrl,
     color,
     type: conversationType,
     isMe,
@@ -52,11 +52,11 @@ function NoVideo({
 
   return (
     <div className="module-calling-pip__video--remote">
-      <CallBackgroundBlur avatarPath={avatarPath}>
+      <CallBackgroundBlur avatarUrl={avatarUrl}>
         <div className="module-calling-pip__video--avatar">
           <Avatar
             acceptedMessageRequest={acceptedMessageRequest}
-            avatarPath={avatarPath}
+            avatarUrl={avatarUrl}
             badge={undefined}
             color={color || AvatarColors[0]}
             noteToSelf={false}

ts/components/CallingPreCallInfo.tsx

@@ -20,7 +20,7 @@ export type PropsType = {
   conversation: Pick<
     CallingConversationType,
     | 'acceptedMessageRequest'
-    | 'avatarPath'
+    | 'avatarUrl'
     | 'color'
     | 'isMe'
     | 'phoneNumber'
@@ -30,7 +30,7 @@ export type PropsType = {
     | 'systemNickname'
     | 'title'
     | 'type'
-    | 'unblurredAvatarPath'
+    | 'unblurredAvatarUrl'
   >;
   i18n: LocalizerType;
   me: Pick<ConversationType, 'id' | 'serviceId'>;
@@ -186,7 +186,7 @@ export function CallingPreCallInfo({
   return (
     <div className="module-CallingPreCallInfo">
       <Avatar
-        avatarPath={conversation.avatarPath}
+        avatarUrl={conversation.avatarUrl}
         badge={undefined}
         color={conversation.color}
         acceptedMessageRequest={conversation.acceptedMessageRequest}
@@ -198,7 +198,7 @@ export function CallingPreCallInfo({
         sharedGroupNames={conversation.sharedGroupNames}
         size={AvatarSize.NINETY_SIX}
         title={conversation.title}
-        unblurredAvatarPath={conversation.unblurredAvatarPath}
+        unblurredAvatarUrl={conversation.unblurredAvatarUrl}
         i18n={i18n}
       />
       <div className="module-CallingPreCallInfo__title">

ts/components/CallingRaisedHandsList.stories.tsx

@@ -35,7 +35,7 @@ const i18n = setupI18n('en', enMessages);
 
 const conversation = getDefaultConversationWithServiceId({
   id: '3051234567',
-  avatarPath: undefined,
+  avatarUrl: undefined,
   color: AvatarColors[0],
   title: 'Rick Sanchez',
   name: 'Rick Sanchez',

ts/components/CallingRaisedHandsList.tsx

@@ -101,7 +101,7 @@ export function CallingRaisedHandsList({
               <div className="CallingRaisedHandsList__AvatarAndName module-calling-participants-list__avatar-and-name">
                 <Avatar
                   acceptedMessageRequest={participant.acceptedMessageRequest}
-                  avatarPath={participant.avatarPath}
+                  avatarUrl={participant.avatarUrl}
                   badge={undefined}
                   color={participant.color}
                   conversationType="direct"

ts/components/CallsList.tsx

@@ -789,7 +789,7 @@ export function CallsList({
             leading={
               <Avatar
                 acceptedMessageRequest
-                avatarPath={conversation.avatarPath}
+                avatarUrl={conversation.avatarUrl}
                 color={conversation.color}
                 conversationType={conversation.type}
                 i18n={i18n}

ts/components/CallsNewCall.tsx

@@ -220,7 +220,7 @@ export function CallsNewCall({
             leading={
               <Avatar
                 acceptedMessageRequest
-                avatarPath={item.conversation.avatarPath}
+                avatarUrl={item.conversation.avatarUrl}
                 conversationType="group"
                 i18n={i18n}
                 isMe={false}

ts/components/ContactPill.tsx

@@ -15,7 +15,7 @@ export type PropsType = {
   ConversationType,
   | 'about'
   | 'acceptedMessageRequest'
-  | 'avatarPath'
+  | 'avatarUrl'
   | 'color'
   | 'firstName'
   | 'id'
@@ -24,12 +24,12 @@ export type PropsType = {
   | 'profileName'
   | 'sharedGroupNames'
   | 'title'
-  | 'unblurredAvatarPath'
+  | 'unblurredAvatarUrl'
 >;
 
 export function ContactPill({
   acceptedMessageRequest,
-  avatarPath,
+  avatarUrl,
   color,
   firstName,
   i18n,
@@ -39,7 +39,7 @@ export function ContactPill({
   profileName,
   sharedGroupNames,
   title,
-  unblurredAvatarPath,
+  unblurredAvatarUrl,
   onClickRemove,
 }: PropsType): JSX.Element {
   const removeLabel = i18n('icu:ContactPill--remove');
@@ -48,7 +48,7 @@ export function ContactPill({
     <div className="module-ContactPill">
       <Avatar
         acceptedMessageRequest={acceptedMessageRequest}
-        avatarPath={avatarPath}
+        avatarUrl={avatarUrl}
         badge={undefined}
         color={color}
         noteToSelf={false}
@@ -60,7 +60,7 @@ export function ContactPill({
         title={title}
         sharedGroupNames={sharedGroupNames}
         size={AvatarSize.TWENTY}
-        unblurredAvatarPath={unblurredAvatarPath}
+        unblurredAvatarUrl={unblurredAvatarUrl}
       />
       <ContactName
         firstName={firstName}

ts/components/ContactPills.stories.tsx

@@ -38,7 +38,7 @@ const contactPillProps = (
 ): ContactPillPropsType => ({
   ...(overrideProps ??
     getDefaultConversation({
-      avatarPath: gifUrl,
+      avatarUrl: gifUrl,
       firstName: 'John',
       id: 'abc123',
       isMe: false,

ts/components/ConversationList.stories.tsx

@@ -275,7 +275,7 @@ const createConversation = (
       : true,
   badges: [],
   isMe: overrideProps.isMe ?? false,
-  avatarPath: overrideProps.avatarPath ?? '',
+  avatarUrl: overrideProps.avatarUrl ?? '',
   id: overrideProps.id || '',
   isSelected: overrideProps.isSelected ?? false,
   title: overrideProps.title ?? 'Some Person',
@@ -308,7 +308,7 @@ export const ConversationName = (): JSX.Element => renderConversation();
 
 export const ConversationNameAndAvatar = (): JSX.Element =>
   renderConversation({
-    avatarPath: '/fixtures/kitten-1-64-64.jpg',
+    avatarUrl: '/fixtures/kitten-1-64-64.jpg',
   });
 
 export const ConversationWithYourself = (): JSX.Element =>

ts/components/ConversationList.tsx

@@ -371,7 +371,7 @@ export function ConversationList({
         case RowType.Conversation: {
           const itemProps = pick(row.conversation, [
             'acceptedMessageRequest',
-            'avatarPath',
+            'avatarUrl',
             'badges',
             'color',
             'draftPreview',
@@ -393,7 +393,7 @@ export function ConversationList({
             'title',
             'type',
             'typingContactIdTimestamps',
-            'unblurredAvatarPath',
+            'unblurredAvatarUrl',
             'unreadCount',
             'unreadMentionsCount',
             'serviceId',

ts/components/DirectCallRemoteParticipant.tsx

@@ -52,7 +52,7 @@ function renderAvatar(
   i18n: LocalizerType,
   {
     acceptedMessageRequest,
-    avatarPath,
+    avatarUrl,
     color,
     isMe,
     phoneNumber,
@@ -62,7 +62,7 @@ function renderAvatar(
   }: Pick<
     ConversationType,
     | 'acceptedMessageRequest'
-    | 'avatarPath'
+    | 'avatarUrl'
     | 'color'
     | 'isMe'
     | 'phoneNumber'
@@ -73,10 +73,10 @@ function renderAvatar(
 ): JSX.Element {
   return (
     <div className="module-ongoing-call__remote-video-disabled">
-      <CallBackgroundBlur avatarPath={avatarPath}>
+      <CallBackgroundBlur avatarUrl={avatarUrl}>
         <Avatar
           acceptedMessageRequest={acceptedMessageRequest}
-          avatarPath={avatarPath}
+          avatarUrl={avatarUrl}
           badge={undefined}
           color={color || AvatarColors[0]}
           noteToSelf={false}

ts/components/GroupCallRemoteParticipant.tsx

@@ -85,7 +85,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
     const {
       acceptedMessageRequest,
       addedTime,
-      avatarPath,
+      avatarUrl,
       color,
       demuxId,
       hasRemoteAudio,
@@ -378,7 +378,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
         noVideoNode = (
           <Avatar
             acceptedMessageRequest={acceptedMessageRequest}
-            avatarPath={avatarPath}
+            avatarUrl={avatarUrl}
             badge={undefined}
             color={color || AvatarColors[0]}
             noteToSelf={false}
@@ -510,7 +510,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
           )}
           {noVideoNode && (
             <CallBackgroundBlur
-              avatarPath={avatarPath}
+              avatarUrl={avatarUrl}
               className="module-ongoing-call__group-call-remote-participant-background"
             >
               {noVideoNode}

ts/components/GroupDialog.tsx

@@ -110,7 +110,7 @@ function Contacts({
         <li key={contact.id} className="module-GroupDialog__contacts__contact">
           <Avatar
             acceptedMessageRequest={contact.acceptedMessageRequest}
-            avatarPath={contact.avatarPath}
+            avatarUrl={contact.avatarUrl}
             badge={getPreferredBadge(contact.badges)}
             color={contact.color}
             conversationType={contact.type}
@@ -118,7 +118,7 @@ function Contacts({
             noteToSelf={contact.isMe}
             theme={theme}
             title={contact.title}
-            unblurredAvatarPath={contact.unblurredAvatarPath}
+            unblurredAvatarUrl={contact.unblurredAvatarUrl}
             sharedGroupNames={contact.sharedGroupNames}
             size={AvatarSize.TWENTY_EIGHT}
             i18n={i18n}

ts/components/GroupV2JoinDialog.tsx

@@ -70,7 +70,7 @@ export const GroupV2JoinDialog = React.memo(function GroupV2JoinDialogInner({
       <div className="module-group-v2-join-dialog__avatar">
         <Avatar
           acceptedMessageRequest={false}
-          avatarPath={avatar ? avatar.url : undefined}
+          avatarUrl={avatar ? avatar.url : undefined}
           badge={undefined}
           blur={AvatarBlur.NoBlur}
           loading={avatar && !avatar.url}

ts/components/IncomingCallBar.stories.tsx

@@ -25,7 +25,7 @@ const commonProps = {
   },
   conversation: getDefaultConversation({
     id: '3051234567',
-    avatarPath: undefined,
+    avatarUrl: undefined,
     name: 'Rick Sanchez',
     phoneNumber: '3051234567',
     profileName: 'Rick Sanchez',
@@ -38,7 +38,7 @@ const commonProps = {
 
 const directConversation = getDefaultConversation({
   id: '3051234567',
-  avatarPath: undefined,
+  avatarUrl: undefined,
   name: 'Rick Sanchez',
   phoneNumber: '3051234567',
   profileName: 'Rick Sanchez',
@@ -46,7 +46,7 @@ const directConversation = getDefaultConversation({
 });
 
 const groupConversation = getDefaultConversation({
-  avatarPath: undefined,
+  avatarUrl: undefined,
   name: 'Tahoe Trip',
   title: 'Tahoe Trip',
   type: 'group',

ts/components/IncomingCallBar.tsx

@@ -28,7 +28,7 @@ export type PropsType = {
   conversation: Pick<
     ConversationType,
     | 'acceptedMessageRequest'
-    | 'avatarPath'
+    | 'avatarUrl'
     | 'color'
     | 'id'
     | 'isMe'
@@ -194,7 +194,7 @@ export function IncomingCallBar(props: PropsType): JSX.Element | null {
   const {
     id: conversationId,
     acceptedMessageRequest,
-    avatarPath,
+    avatarUrl,
     color,
     isMe,
     phoneNumber,
@@ -275,7 +275,7 @@ export function IncomingCallBar(props: PropsType): JSX.Element | null {
           <div className="IncomingCallBar__conversation--avatar">
             <Avatar
               acceptedMessageRequest={acceptedMessageRequest}
-              avatarPath={avatarPath}
+              avatarUrl={avatarUrl}
               badge={undefined}
               color={color || AvatarColors[0]}
               noteToSelf={false}

ts/components/LeftPaneSearchInput.tsx

@@ -136,7 +136,7 @@ export function LeftPaneSearchInput({
         >
           <Avatar
             acceptedMessageRequest={searchConversation.acceptedMessageRequest}
-            avatarPath={searchConversation.avatarPath}
+            avatarUrl={searchConversation.avatarUrl}
             badge={undefined}
             color={searchConversation.color}
             conversationType={searchConversation.type}
@@ -146,7 +146,7 @@ export function LeftPaneSearchInput({
             sharedGroupNames={searchConversation.sharedGroupNames}
             size={AvatarSize.TWENTY}
             title={searchConversation.title}
-            unblurredAvatarPath={searchConversation.unblurredAvatarPath}
+            unblurredAvatarUrl={searchConversation.unblurredAvatarUrl}
           />
           <button
             aria-label={i18n('icu:clearSearch')}

ts/components/Lightbox.stories.tsx

@@ -311,7 +311,7 @@ export function ConversationHeader(): JSX.Element {
       {...createProps({})}
       getConversation={() => ({
         acceptedMessageRequest: true,
-        avatarPath: '/fixtures/kitten-1-64-64.jpg',
+        avatarUrl: '/fixtures/kitten-1-64-64.jpg',
         badges: [],
         id: '1234',
         isMe: false,

ts/components/Lightbox.tsx

@@ -806,7 +806,7 @@ function LightboxHeader({
       <div className="Lightbox__header--avatar">
         <Avatar
           acceptedMessageRequest={conversation.acceptedMessageRequest}
-          avatarPath={conversation.avatarPath}
+          avatarUrl={conversation.avatarUrl}
           badge={undefined}
           color={conversation.color}
           conversationType={conversation.type}
@@ -817,7 +817,7 @@ function LightboxHeader({
           sharedGroupNames={conversation.sharedGroupNames}
           size={AvatarSize.THIRTY_TWO}
           title={conversation.title}
-          unblurredAvatarPath={conversation.unblurredAvatarPath}
+          unblurredAvatarUrl={conversation.unblurredAvatarUrl}
         />
       </div>
       <div className="Lightbox__header--content">

ts/components/MyStoryButton.tsx

@@ -50,7 +50,7 @@ export function MyStoryButton({
 
   const {
     acceptedMessageRequest,
-    avatarPath,
+    avatarUrl,
     color,
     isMe,
     profileName,
@@ -70,7 +70,7 @@ export function MyStoryButton({
         <div className="MyStories__avatar-container">
           <Avatar
             acceptedMessageRequest={acceptedMessageRequest}
-            avatarPath={avatarPath}
+            avatarUrl={avatarUrl}
             badge={undefined}
             color={getAvatarColor(color)}
             conversationType="direct"
@@ -123,7 +123,7 @@ export function MyStoryButton({
         >
           <Avatar
             acceptedMessageRequest={acceptedMessageRequest}
-            avatarPath={avatarPath}
+            avatarUrl={avatarUrl}
             badge={undefined}
             color={getAvatarColor(color)}
             conversationType="direct"

ts/components/NavTabs.tsx

@@ -372,7 +372,7 @@ export function NavTabs({
                 <span className="NavTabs__ItemContent">
                   <Avatar
                     acceptedMessageRequest
-                    avatarPath={me.avatarPath}
+                    avatarUrl={me.avatarUrl}
                     badge={badge}
                     className="module-main-header__avatar"
                     color={me.color}

ts/components/ProfileEditor.stories.tsx

@@ -48,7 +48,7 @@ export default {
   args: {
     aboutEmoji: '',
     aboutText: casual.sentence,
-    profileAvatarPath: undefined,
+    profileAvatarUrl: undefined,
     conversationId: generateUuid(),
     color: getRandomColor(),
     deleteAvatarFromDisk: action('deleteAvatarFromDisk'),
@@ -127,7 +127,7 @@ FullSet.args = {
   aboutText: 'Live. Laugh. Love',
   familyName: casual.last_name,
   firstName: casual.first_name,
-  profileAvatarPath: '/fixtures/kitten-3-64-64.jpg',
+  profileAvatarUrl: '/fixtures/kitten-3-64-64.jpg',
 };
 
 export const WithFullName = Template.bind({});

ts/components/ProfileEditor.tsx

@@ -72,7 +72,7 @@ type PropsExternalType = {
 export type PropsDataType = {
   aboutEmoji?: string;
   aboutText?: string;
-  profileAvatarPath?: string;
+  profileAvatarUrl?: string;
   color?: AvatarColorType;
   conversationId: string;
   familyName?: string;
@@ -155,7 +155,7 @@ export function ProfileEditor({
   onProfileChanged,
   onSetSkinTone,
   openUsernameReservationModal,
-  profileAvatarPath,
+  profileAvatarUrl,
   recentEmojis,
   renderEditUsernameModalBody,
   replaceAvatar,
@@ -192,8 +192,7 @@ export function ProfileEditor({
     aboutEmoji,
     aboutText,
   });
-  const [startingAvatarPath, setStartingAvatarPath] =
+  const [startingAvatarUrl, setStartingAvatarUrl] = useState(profileAvatarUrl);
-    useState(profileAvatarPath);
 
   const [oldAvatarBuffer, setOldAvatarBuffer] = useState<
     Uint8Array | undefined
@@ -239,7 +238,7 @@ export function ProfileEditor({
   const handleAvatarChanged = useCallback(
     (avatar: Uint8Array | undefined) => {
       // Do not display stale avatar from disk anymore.
-      setStartingAvatarPath(undefined);
+      setStartingAvatarUrl(undefined);
 
       setAvatarBuffer(avatar);
       setEditState(EditState.None);
@@ -301,7 +300,7 @@ export function ProfileEditor({
     content = (
       <AvatarEditor
         avatarColor={color || AvatarColors[0]}
-        avatarPath={startingAvatarPath}
+        avatarUrl={startingAvatarUrl}
         avatarValue={avatarBuffer}
         conversationId={conversationId}
         conversationTitle={getFullNameText()}
@@ -675,7 +674,7 @@ export function ProfileEditor({
       <>
         <AvatarPreview
           avatarColor={color}
-          avatarPath={startingAvatarPath}
+          avatarUrl={startingAvatarUrl}
           avatarValue={avatarBuffer}
           conversationTitle={getFullNameText()}
           i18n={i18n}

ts/components/ProfileEditorModal.tsx

@@ -40,7 +40,7 @@ export function ProfileEditorModal({
   myProfileChanged,
   onSetSkinTone,
   openUsernameReservationModal,
-  profileAvatarPath,
+  profileAvatarUrl,
   recentEmojis,
   renderEditUsernameModalBody,
   replaceAvatar,
@@ -117,7 +117,7 @@ export function ProfileEditorModal({
         onProfileChanged={myProfileChanged}
         onSetSkinTone={onSetSkinTone}
         openUsernameReservationModal={openUsernameReservationModal}
-        profileAvatarPath={profileAvatarPath}
+        profileAvatarUrl={profileAvatarUrl}
         recentEmojis={recentEmojis}
         renderEditUsernameModalBody={renderEditUsernameModalBody}
         replaceAvatar={replaceAvatar}

ts/components/SafetyNumberChangeDialog.stories.tsx

@@ -18,7 +18,7 @@ const i18n = setupI18n('en', enMessages);
 
 const contactWithAllData = getDefaultConversation({
   id: 'abc',
-  avatarPath: undefined,
+  avatarUrl: undefined,
   profileName: '-*Smartest Dude*-',
   title: 'Rick Sanchez',
   name: 'Rick Sanchez',
@@ -27,7 +27,7 @@ const contactWithAllData = getDefaultConversation({
 
 const contactWithJustProfileVerified = getDefaultConversation({
   id: 'def',
-  avatarPath: undefined,
+  avatarUrl: undefined,
   title: '-*Smartest Dude*-',
   profileName: '-*Smartest Dude*-',
   name: undefined,
@@ -37,7 +37,7 @@ const contactWithJustProfileVerified = getDefaultConversation({
 
 const contactWithJustNumberVerified = getDefaultConversation({
   id: 'xyz',
-  avatarPath: undefined,
+  avatarUrl: undefined,
   profileName: undefined,
   name: undefined,
   title: '(305) 123-4567',
@@ -47,7 +47,7 @@ const contactWithJustNumberVerified = getDefaultConversation({
 
 const contactWithNothing = getDefaultConversation({
   id: 'some-guid',
-  avatarPath: undefined,
+  avatarUrl: undefined,
   profileName: undefined,
   name: undefined,
   phoneNumber: undefined,

ts/components/SafetyNumberChangeDialog.tsx

@@ -452,7 +452,7 @@ function ContactRow({
     <li className="module-SafetyNumberChangeDialog__row" key={contact.id}>
       <Avatar
         acceptedMessageRequest={contact.acceptedMessageRequest}
-        avatarPath={contact.avatarPath}
+        avatarUrl={contact.avatarUrl}
         badge={getPreferredBadge(contact.badges)}
         color={contact.color}
         conversationType="direct"
@@ -464,7 +464,7 @@ function ContactRow({
         title={contact.title}
         sharedGroupNames={contact.sharedGroupNames}
         size={AvatarSize.THIRTY_TWO}
-        unblurredAvatarPath={contact.unblurredAvatarPath}
+        unblurredAvatarUrl={contact.unblurredAvatarUrl}
       />
       <div className="module-SafetyNumberChangeDialog__row--wrapper">
         <div className="module-SafetyNumberChangeDialog__row--name">

ts/components/SafetyNumberViewer.stories.tsx

@@ -40,7 +40,7 @@ const contactWithAllData = getDefaultConversation({
 });
 
 const contactWithJustProfile = getDefaultConversation({
-  avatarPath: undefined,
+  avatarUrl: undefined,
   title: '-*Smartest Dude*-',
   profileName: '-*Smartest Dude*-',
   name: undefined,
@@ -48,7 +48,7 @@ const contactWithJustProfile = getDefaultConversation({
 });
 
 const contactWithJustNumber = getDefaultConversation({
-  avatarPath: undefined,
+  avatarUrl: undefined,
   profileName: undefined,
   name: undefined,
   title: '(305) 123-4567',
@@ -57,7 +57,7 @@ const contactWithJustNumber = getDefaultConversation({
 
 const contactWithNothing = getDefaultConversation({
   id: 'some-guid',
-  avatarPath: undefined,
+  avatarUrl: undefined,
   profileName: undefined,
   title: 'Unknown contact',
   name: undefined,

ts/components/SendStoryModal.tsx

@@ -558,7 +558,7 @@ export function SendStoryModal({
                   >
                     <Avatar
                       acceptedMessageRequest={group.acceptedMessageRequest}
-                      avatarPath={group.avatarPath}
+                      avatarUrl={group.avatarUrl}
                       badge={undefined}
                       color={group.color}
                       conversationType={group.type}
@@ -708,7 +708,7 @@ export function SendStoryModal({
                 {list.id === MY_STORY_ID ? (
                   <Avatar
                     acceptedMessageRequest={me.acceptedMessageRequest}
-                    avatarPath={me.avatarPath}
+                    avatarUrl={me.avatarUrl}
                     badge={undefined}
                     color={me.color}
                     conversationType={me.type}
@@ -823,7 +823,7 @@ export function SendStoryModal({
               >
                 <Avatar
                   acceptedMessageRequest={group.acceptedMessageRequest}
-                  avatarPath={group.avatarPath}
+                  avatarUrl={group.avatarUrl}
                   badge={undefined}
                   color={group.color}
                   conversationType={group.type}

ts/components/StoriesSettingsModal.tsx

@@ -161,7 +161,7 @@ function DistributionListItem({
         {isMyStory ? (
           <Avatar
             acceptedMessageRequest={me.acceptedMessageRequest}
-            avatarPath={me.avatarPath}
+            avatarUrl={me.avatarUrl}
             badge={undefined}
             color={me.color}
             conversationType={me.type}
@@ -215,7 +215,7 @@ function GroupStoryItem({
       <span className="StoriesSettingsModal__list__left">
         <Avatar
           acceptedMessageRequest={groupStory.acceptedMessageRequest}
-          avatarPath={groupStory.avatarPath}
+          avatarUrl={groupStory.avatarUrl}
           badge={undefined}
           color={groupStory.color}
           conversationType={groupStory.type}
@@ -676,7 +676,7 @@ export function DistributionListSettingsModal({
               <span className="StoriesSettingsModal__list__left">
                 <Avatar
                   acceptedMessageRequest={member.acceptedMessageRequest}
-                  avatarPath={member.avatarPath}
+                  avatarUrl={member.avatarUrl}
                   badge={getPreferredBadge(member.badges)}
                   color={member.color}
                   conversationType={member.type}
@@ -1095,7 +1095,7 @@ export function EditDistributionListModal({
             <span className="StoriesSettingsModal__list__left">
               <Avatar
                 acceptedMessageRequest={contact.acceptedMessageRequest}
-                avatarPath={contact.avatarPath}
+                avatarUrl={contact.avatarUrl}
                 badge={getPreferredBadge(contact.badges)}
                 color={contact.color}
                 conversationType={contact.type}
@@ -1191,7 +1191,7 @@ export function EditDistributionListModal({
             <ContactPill
               key={contact.id}
               acceptedMessageRequest={contact.acceptedMessageRequest}
-              avatarPath={contact.avatarPath}
+              avatarUrl={contact.avatarUrl}
               color={contact.color}
               firstName={contact.firstName}
               i18n={i18n}
@@ -1286,7 +1286,7 @@ export function GroupStorySettingsModal({
       <div className="GroupStorySettingsModal__header">
         <Avatar
           acceptedMessageRequest={group.acceptedMessageRequest}
-          avatarPath={group.avatarPath}
+          avatarUrl={group.avatarUrl}
           badge={undefined}
           color={group.color}
           conversationType={group.type}
@@ -1315,7 +1315,7 @@ export function GroupStorySettingsModal({
           >
             <Avatar
               acceptedMessageRequest={member.acceptedMessageRequest}
-              avatarPath={member.avatarPath}
+              avatarUrl={member.avatarUrl}
               badge={undefined}
               color={member.color}
               conversationType={member.type}

ts/components/StoryDetailsModal.tsx

@@ -129,7 +129,7 @@ export function StoryDetailsModal({
                   <div key={contact.id} className="StoryDetailsModal__contact">
                     <Avatar
                       acceptedMessageRequest={contact.acceptedMessageRequest}
-                      avatarPath={contact.avatarPath}
+                      avatarUrl={contact.avatarUrl}
                       badge={getPreferredBadge(contact.badges)}
                       color={contact.color}
                       conversationType="direct"
@@ -141,7 +141,7 @@ export function StoryDetailsModal({
                       size={AvatarSize.THIRTY_TWO}
                       theme={ThemeType.dark}
                       title={contact.title}
-                      unblurredAvatarPath={contact.unblurredAvatarPath}
+                      unblurredAvatarUrl={contact.unblurredAvatarUrl}
                     />
                     <div className="StoryDetailsModal__contact__text">
                       <ContactName title={contact.title} />
@@ -172,7 +172,7 @@ export function StoryDetailsModal({
           <div className="StoryDetailsModal__contact">
             <Avatar
               acceptedMessageRequest={sender.acceptedMessageRequest}
-              avatarPath={sender.avatarPath}
+              avatarUrl={sender.avatarUrl}
               badge={getPreferredBadge(sender.badges)}
               color={sender.color}
               conversationType="direct"

ts/components/StoryListItem.tsx

@@ -35,7 +35,7 @@ export type PropsType = Pick<ConversationStoryType, 'group' | 'isHidden'> & {
 
 function StoryListItemAvatar({
   acceptedMessageRequest,
-  avatarPath,
+  avatarUrl,
   avatarStoryRing,
   badges,
   color,
@@ -49,7 +49,7 @@ function StoryListItemAvatar({
 }: Pick<
   ConversationType,
   | 'acceptedMessageRequest'
-  | 'avatarPath'
+  | 'avatarUrl'
   | 'color'
   | 'profileName'
   | 'sharedGroupNames'
@@ -65,7 +65,7 @@ function StoryListItemAvatar({
   return (
     <Avatar
       acceptedMessageRequest={acceptedMessageRequest}
-      avatarPath={avatarPath}
+      avatarUrl={avatarUrl}
       badge={badges ? getPreferredBadge(badges) : undefined}
       color={getAvatarColor(color)}
       conversationType="direct"

ts/components/StoryViewer.stories.tsx

@@ -80,7 +80,7 @@ export function InAGroup(args: PropsType): JSX.Element {
     <StoryViewer
       {...args}
       group={getDefaultConversation({
-        avatarPath: '/fixtures/kitten-4-112-112.jpg',
+        avatarUrl: '/fixtures/kitten-4-112-112.jpg',
         title: 'Family Group',
         type: 'group',
       })}

ts/components/StoryViewer.tsx

@@ -74,7 +74,7 @@ export type PropsType = {
   group?: Pick<
     ConversationType,
     | 'acceptedMessageRequest'
-    | 'avatarPath'
+    | 'avatarUrl'
     | 'color'
     | 'id'
     | 'name'
@@ -204,7 +204,7 @@ export function StoryViewer({
   } = story;
   const {
     acceptedMessageRequest,
-    avatarPath,
+    avatarUrl,
     color,
     isMe,
     firstName,
@@ -783,7 +783,7 @@ export function StoryViewer({
               <div className="StoryViewer__meta__playback-bar__container">
                 <Avatar
                   acceptedMessageRequest={acceptedMessageRequest}
-                  avatarPath={avatarPath}
+                  avatarUrl={avatarUrl}
                   badge={undefined}
                   color={getAvatarColor(color)}
                   conversationType="direct"
@@ -797,7 +797,7 @@ export function StoryViewer({
                 {group && (
                   <Avatar
                     acceptedMessageRequest={group.acceptedMessageRequest}
-                    avatarPath={group.avatarPath}
+                    avatarUrl={group.avatarUrl}
                     badge={undefined}
                     className="StoryViewer__meta--group-avatar"
                     color={getAvatarColor(group.color)}

ts/components/StoryViewsNRepliesModal.tsx

@@ -368,7 +368,7 @@ export function StoryViewsNRepliesModal({
             <div>
               <Avatar
                 acceptedMessageRequest={view.recipient.acceptedMessageRequest}
-                avatarPath={view.recipient.avatarPath}
+                avatarUrl={view.recipient.avatarUrl}
                 badge={undefined}
                 color={getAvatarColor(view.recipient.color)}
                 conversationType="direct"
@@ -550,7 +550,7 @@ function ReplyOrReactionMessage({
           <div className="StoryViewsNRepliesModal__reaction--container">
             <Avatar
               acceptedMessageRequest={reply.author.acceptedMessageRequest}
-              avatarPath={reply.author.avatarPath}
+              avatarUrl={reply.author.avatarUrl}
               badge={getPreferredBadge(reply.author.badges)}
               color={getAvatarColor(reply.author.color)}
               conversationType="direct"

ts/components/conversation/AboutContactModal.tsx

@@ -120,7 +120,7 @@ export function AboutContactModal({
       <div className="AboutContactModal__row AboutContactModal__row--centered">
         <Avatar
           acceptedMessageRequest={conversation.acceptedMessageRequest}
-          avatarPath={conversation.avatarPath}
+          avatarUrl={conversation.avatarUrl}
           blur={avatarBlur}
           onClick={avatarBlur === AvatarBlur.NoBlur ? undefined : onAvatarClick}
           badge={undefined}
@@ -132,7 +132,7 @@ export function AboutContactModal({
           sharedGroupNames={[]}
           size={AvatarSize.TWO_HUNDRED_SIXTEEN}
           title={conversation.title}
-          unblurredAvatarPath={conversation.unblurredAvatarPath}
+          unblurredAvatarUrl={conversation.unblurredAvatarUrl}
         />
       </div>
 

ts/components/conversation/AttachmentList.tsx

@@ -126,7 +126,7 @@ export function AttachmentList<T extends AttachmentType | AttachmentDraftType>({
 
             if (isImage && canEditImages) {
               return (
-                <div className="module-attachments--editable">
+                <div className="module-attachments--editable" key={key}>
                   {imgElement}
                   <div className="module-attachments__edit-icon" />
                 </div>

ts/components/conversation/ContactModal.tsx

@@ -314,7 +314,7 @@ export function ContactModal({
           <div className="ContactModal">
             <Avatar
               acceptedMessageRequest={contact.acceptedMessageRequest}
-              avatarPath={contact.avatarPath}
+              avatarUrl={contact.avatarUrl}
               badge={preferredBadge}
               color={contact.color}
               conversationType="direct"
@@ -338,7 +338,7 @@ export function ContactModal({
               storyRing={hasStories}
               theme={theme}
               title={contact.title}
-              unblurredAvatarPath={contact.unblurredAvatarPath}
+              unblurredAvatarUrl={contact.unblurredAvatarUrl}
             />
             <button
               type="button"
@@ -472,7 +472,7 @@ export function ContactModal({
       return (
         <AvatarLightbox
           avatarColor={contact.color}
-          avatarPath={contact.avatarPath}
+          avatarUrl={contact.avatarUrl}
           conversationTitle={contact.title}
           i18n={i18n}
           onClose={() => setView(ContactModalView.Default)}

ts/components/conversation/ConversationHeader.stories.tsx

@@ -87,7 +87,7 @@ export function PrivateConvo(): JSX.Element {
         conversation: getDefaultConversation({
           color: getRandomColor(),
           isVerified: true,
-          avatarPath: gifUrl,
+          avatarUrl: gifUrl,
           title: 'Someone 🔥 Somewhere',
           name: 'Someone 🔥 Somewhere',
           phoneNumber: '(202) 555-0001',

ts/components/conversation/ConversationHeader.tsx

@@ -443,7 +443,7 @@ function HeaderContent({
     <span className="module-ConversationHeader__header__avatar">
       <Avatar
         acceptedMessageRequest={conversation.acceptedMessageRequest}
-        avatarPath={conversation.avatarPath ?? undefined}
+        avatarUrl={conversation.avatarUrl ?? undefined}
         badge={badge ?? undefined}
         color={conversation.color ?? undefined}
         conversationType={conversation.type}
@@ -459,7 +459,7 @@ function HeaderContent({
         storyRing={conversation.isMe ? undefined : hasStories ?? undefined}
         theme={theme}
         title={conversation.title}
-        unblurredAvatarPath={conversation.unblurredAvatarPath ?? undefined}
+        unblurredAvatarUrl={conversation.unblurredAvatarUrl ?? undefined}
       />
     </span>
   );

ts/components/conversation/ConversationHero.stories.tsx

@@ -84,7 +84,7 @@ DirectNoGroupsJustPhoneNumber.args = {
 
 export const DirectNoGroupsNoData = Template.bind({});
 DirectNoGroupsNoData.args = {
-  avatarPath: undefined,
+  avatarUrl: undefined,
   phoneNumber: '',
   profileName: '',
   title: casual.phone,
@@ -93,7 +93,7 @@ DirectNoGroupsNoData.args = {
 export const DirectNoGroupsNoDataNotAccepted = Template.bind({});
 DirectNoGroupsNoDataNotAccepted.args = {
   acceptedMessageRequest: false,
-  avatarPath: undefined,
+  avatarUrl: undefined,
   phoneNumber: '',
   profileName: '',
   title: '',
@@ -116,7 +116,7 @@ GroupManyMembers.args = {
 
 export const GroupOneMember = Template.bind({});
 GroupOneMember.args = {
-  avatarPath: undefined,
+  avatarUrl: undefined,
   conversationType: 'group',
   groupDescription: casual.sentence,
   membersCount: 1,
@@ -125,7 +125,7 @@ GroupOneMember.args = {
 
 export const GroupZeroMembers = Template.bind({});
 GroupZeroMembers.args = {
-  avatarPath: undefined,
+  avatarUrl: undefined,
   conversationType: 'group',
   groupDescription: casual.sentence,
   membersCount: 0,

ts/components/conversation/ConversationHero.tsx

@@ -31,7 +31,7 @@ export type Props = {
   phoneNumber?: string;
   sharedGroupNames?: ReadonlyArray<string>;
   unblurAvatar: (conversationId: string) => void;
-  unblurredAvatarPath?: string;
+  unblurredAvatarUrl?: string;
   updateSharedGroups: (conversationId: string) => unknown;
   theme: ThemeType;
   viewUserStories: ViewUserStoriesActionCreatorType;
@@ -136,7 +136,7 @@ export function ConversationHero({
   i18n,
   about,
   acceptedMessageRequest,
-  avatarPath,
+  avatarUrl,
   badge,
   color,
   conversationType,
@@ -152,7 +152,7 @@ export function ConversationHero({
   theme,
   title,
   unblurAvatar,
-  unblurredAvatarPath,
+  unblurredAvatarUrl,
   updateSharedGroups,
   viewUserStories,
   toggleAboutContactModal,
@@ -174,10 +174,10 @@ export function ConversationHero({
   if (
     shouldBlurAvatar({
       acceptedMessageRequest,
-      avatarPath,
+      avatarUrl,
       isMe,
       sharedGroupNames,
-      unblurredAvatarPath,
+      unblurredAvatarUrl,
     })
   ) {
     avatarBlur = AvatarBlur.BlurPictureWithClickToView;
@@ -221,7 +221,7 @@ export function ConversationHero({
       <div className="module-conversation-hero">
         <Avatar
           acceptedMessageRequest={acceptedMessageRequest}
-          avatarPath={avatarPath}
+          avatarUrl={avatarUrl}
           badge={badge}
           blur={avatarBlur}
           className="module-conversation-hero__avatar"

ts/components/conversation/Message.tsx

@@ -229,7 +229,7 @@ export type PropsData = {
   author: Pick<
     ConversationType,
     | 'acceptedMessageRequest'
-    | 'avatarPath'
+    | 'avatarUrl'
     | 'badges'
     | 'color'
     | 'id'
@@ -238,7 +238,7 @@ export type PropsData = {
     | 'profileName'
     | 'sharedGroupNames'
     | 'title'
-    | 'unblurredAvatarPath'
+    | 'unblurredAvatarUrl'
   >;
   conversationType: ConversationTypeType;
   attachments?: ReadonlyArray<AttachmentType>;
@@ -1814,7 +1814,7 @@ export class Message extends React.PureComponent<Props, State> {
         ) : (
           <Avatar
             acceptedMessageRequest={author.acceptedMessageRequest}
-            avatarPath={author.avatarPath}
+            avatarUrl={author.avatarUrl}
             badge={getPreferredBadge(author.badges)}
             color={author.color}
             conversationType="direct"
@@ -1832,7 +1832,7 @@ export class Message extends React.PureComponent<Props, State> {
             size={GROUP_AVATAR_SIZE}
             theme={theme}
             title={author.title}
-            unblurredAvatarPath={author.unblurredAvatarPath}
+            unblurredAvatarUrl={author.unblurredAvatarUrl}
           />
         )}
       </div>

ts/components/conversation/MessageDetail.tsx

@@ -37,7 +37,7 @@ import {
 export type Contact = Pick<
   ConversationType,
   | 'acceptedMessageRequest'
-  | 'avatarPath'
+  | 'avatarUrl'
   | 'badges'
   | 'color'
   | 'id'
@@ -46,7 +46,7 @@ export type Contact = Pick<
   | 'profileName'
   | 'sharedGroupNames'
   | 'title'
-  | 'unblurredAvatarPath'
+  | 'unblurredAvatarUrl'
 > & {
   status?: SendStatus;
   statusTimestamp?: number;
@@ -154,7 +154,7 @@ export function MessageDetail({
   function renderAvatar(contact: Contact): JSX.Element {
     const {
       acceptedMessageRequest,
-      avatarPath,
+      avatarUrl,
       badges,
       color,
       isMe,
@@ -162,13 +162,13 @@ export function MessageDetail({
       profileName,
       sharedGroupNames,
       title,
-      unblurredAvatarPath,
+      unblurredAvatarUrl,
     } = contact;
 
     return (
       <Avatar
         acceptedMessageRequest={acceptedMessageRequest}
-        avatarPath={avatarPath}
+        avatarUrl={avatarUrl}
         badge={getPreferredBadge(badges)}
         color={color}
         conversationType="direct"
@@ -180,7 +180,7 @@ export function MessageDetail({
         title={title}
         sharedGroupNames={sharedGroupNames}
         size={AvatarSize.THIRTY_TWO}
-        unblurredAvatarPath={unblurredAvatarPath}
+        unblurredAvatarUrl={unblurredAvatarUrl}
       />
     );
   }

ts/components/conversation/Quote.tsx

@@ -614,9 +614,7 @@ function ThumbnailImage({
   return (
     <div
       className={className}
-      style={
+      style={loadedSrc ? { backgroundImage: `url('${loadedSrc}')` } : {}}
-        loadedSrc ? { backgroundImage: `url('${encodeURI(loadedSrc)}')` } : {}
-      }
     >
       {children}
     </div>

ts/components/conversation/ReactionViewer.tsx

@@ -22,7 +22,7 @@ export type Reaction = {
   from: Pick<
     ConversationType,
     | 'acceptedMessageRequest'
-    | 'avatarPath'
+    | 'avatarUrl'
     | 'badges'
     | 'color'
     | 'id'
@@ -226,7 +226,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
               <div className="module-reaction-viewer__body__row__avatar">
                 <Avatar
                   acceptedMessageRequest={from.acceptedMessageRequest}
-                  avatarPath={from.avatarPath}
+                  avatarUrl={from.avatarUrl}
                   badge={getPreferredBadge(from.badges)}
                   conversationType="direct"
                   sharedGroupNames={from.sharedGroupNames}

ts/components/conversation/Timeline.stories.tsx

@@ -399,7 +399,7 @@ const renderHeroRow = () => {
       <ConversationHero
         about={getAbout()}
         acceptedMessageRequest
-        avatarPath={getAvatarPath()}
+        avatarUrl={getAvatarPath()}
         badge={undefined}
         conversationType="direct"
         id={getDefaultConversation().id}

ts/components/conversation/TimelineMessage.stories.tsx

@@ -721,7 +721,7 @@ ReactionsShortMessage.args = {
 
 export const AvatarInGroup = Template.bind({});
 AvatarInGroup.args = {
-  author: getDefaultConversation({ avatarPath: pngUrl }),
+  author: getDefaultConversation({ avatarUrl: pngUrl }),
   conversationType: 'group',
   status: 'sent',
   text: 'Hello it is me, the saxophone.',

ts/components/conversation/TypingBubble.stories.tsx

@@ -27,7 +27,7 @@ const CONTACTS = times(10, index => {
   return getDefaultConversation({
     id: `contact-${index}`,
     acceptedMessageRequest: false,
-    avatarPath: '',
+    avatarUrl: '',
     badges: [],
     color: AvatarColors[index],
     name: `${letter} ${letter}`,

ts/components/conversation/TypingBubble.tsx

@@ -19,7 +19,7 @@ const MAX_AVATARS_COUNT = 3;
 type TypingContactType = Pick<
   ConversationType,
   | 'acceptedMessageRequest'
-  | 'avatarPath'
+  | 'avatarUrl'
   | 'badges'
   | 'color'
   | 'id'
@@ -120,7 +120,7 @@ function TypingBubbleAvatar({
     <animated.div className="module-message__typing-avatar" style={springProps}>
       <Avatar
         acceptedMessageRequest={contact.acceptedMessageRequest}
-        avatarPath={contact.avatarPath}
+        avatarUrl={contact.avatarUrl}
         badge={getPreferredBadge(contact.badges)}
         color={contact.color}
         conversationType="direct"

ts/components/conversation/contactUtil.tsx

@@ -25,7 +25,7 @@ export function renderAvatar({
 }): JSX.Element {
   const { avatar } = contact;
 
-  const avatarPath = avatar && avatar.avatar && avatar.avatar.path;
+  const avatarUrl = avatar && avatar.avatar && avatar.avatar.path;
   const pending = avatar && avatar.avatar && avatar.avatar.pending;
   const title = getName(contact) || '';
   const spinnerSvgSize = size < 50 ? 'small' : 'normal';
@@ -46,7 +46,7 @@ export function renderAvatar({
   return (
     <Avatar
       acceptedMessageRequest={false}
-      avatarPath={avatarPath}
+      avatarUrl={avatarUrl}
       badge={undefined}
       blur={AvatarBlur.NoBlur}
       color={AvatarColors[0]}

ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx

@@ -412,7 +412,7 @@ export function ChooseGroupMembersModal({
               <ContactPill
                 key={contact.id}
                 acceptedMessageRequest={contact.acceptedMessageRequest}
-                avatarPath={contact.avatarPath}
+                avatarUrl={contact.avatarUrl}
                 color={contact.color}
                 firstName={contact.systemGivenName ?? contact.firstName}
                 i18n={i18n}

ts/components/conversation/conversation-details/ConversationDetails.tsx

@@ -245,7 +245,7 @@ export function ConversationDetails({
       modalNode = (
         <EditConversationAttributesModal
           avatarColor={conversation.color}
-          avatarPath={conversation.avatarPath}
+          avatarUrl={conversation.avatarUrl}
           conversationId={conversation.id}
           groupDescription={conversation.groupDescription}
           i18n={i18n}

ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx

@@ -107,7 +107,7 @@ export function ConversationDetailsHeader({
       modal = (
         <AvatarLightbox
           avatarColor={conversation.color}
-          avatarPath={conversation.avatarPath}
+          avatarUrl={conversation.avatarUrl}
           conversationTitle={conversation.title}
           i18n={i18n}
           isGroup={isGroup}

ts/components/conversation/conversation-details/EditConversationAttributesModal.stories.tsx

@@ -20,7 +20,7 @@ export default {
 type PropsType = ComponentProps<typeof EditConversationAttributesModal>;
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
-  avatarPath: undefined,
+  avatarUrl: undefined,
   conversationId: '123',
   i18n,
   initiallyFocusDescription: false,
@@ -43,7 +43,7 @@ export function AvatarAndTitle(): JSX.Element {
   return (
     <EditConversationAttributesModal
       {...createProps({
-        avatarPath: '/fixtures/kitten-3-64-64.jpg',
+        avatarUrl: '/fixtures/kitten-3-64-64.jpg',
       })}
     />
   );

ts/components/conversation/conversation-details/EditConversationAttributesModal.tsx

@@ -23,7 +23,7 @@ import type { AvatarColorType } from '../../../types/Colors';
 
 type PropsType = {
   avatarColor?: AvatarColorType;
-  avatarPath?: string;
+  avatarUrl?: string;
   conversationId: string;
   groupDescription?: string;
   i18n: LocalizerType;
@@ -46,7 +46,7 @@ type PropsType = {
 
 export function EditConversationAttributesModal({
   avatarColor,
-  avatarPath: externalAvatarPath,
+  avatarUrl: externalAvatarUrl,
   conversationId,
   groupDescription: externalGroupDescription = '',
   i18n,
@@ -66,7 +66,7 @@ export function EditConversationAttributesModal({
   const focusDescription = focusDescriptionRef.current;
 
   const startingTitleRef = useRef<string>(externalTitle);
-  const startingAvatarPathRef = useRef<undefined | string>(externalAvatarPath);
+  const startingAvatarUrlRef = useRef<undefined | string>(externalAvatarUrl);
 
   const [editingAvatar, setEditingAvatar] = useState(false);
   const [avatar, setAvatar] = useState<undefined | Uint8Array>();
@@ -87,7 +87,7 @@ export function EditConversationAttributesModal({
   };
 
   const hasChangedExternally =
-    startingAvatarPathRef.current !== externalAvatarPath ||
+    startingAvatarUrlRef.current !== externalAvatarUrl ||
     startingTitleRef.current !== externalTitle;
   const hasTitleChanged = trimmedTitle !== externalTitle.trim();
   const hasGroupDescriptionChanged =
@@ -123,16 +123,14 @@ export function EditConversationAttributesModal({
     makeRequest(request);
   };
 
-  const avatarPathForPreview = hasAvatarChanged
+  const avatarUrlForPreview = hasAvatarChanged ? undefined : externalAvatarUrl;
-    ? undefined
-    : externalAvatarPath;
 
   let content: JSX.Element;
   if (editingAvatar) {
     content = (
       <AvatarEditor
         avatarColor={avatarColor}
-        avatarPath={avatarPathForPreview}
+        avatarUrl={avatarUrlForPreview}
         avatarValue={avatar}
         conversationId={conversationId}
         deleteAvatarFromDisk={deleteAvatarFromDisk}
@@ -161,7 +159,7 @@ export function EditConversationAttributesModal({
       >
         <AvatarPreview
           avatarColor={avatarColor}
-          avatarPath={avatarPathForPreview}
+          avatarUrl={avatarUrlForPreview}
           avatarValue={avatar}
           i18n={i18n}
           isEditable

ts/components/conversationList/BaseConversationListItem.tsx

@@ -58,7 +58,7 @@ type PropsType = {
 } & Pick<
   ConversationType,
   | 'acceptedMessageRequest'
-  | 'avatarPath'
+  | 'avatarUrl'
   | 'color'
   | 'groupId'
   | 'isMe'
@@ -67,7 +67,7 @@ type PropsType = {
   | 'profileName'
   | 'sharedGroupNames'
   | 'title'
-  | 'unblurredAvatarPath'
+  | 'unblurredAvatarUrl'
   | 'serviceId'
 > &
   (
@@ -79,7 +79,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
   React.memo(function BaseConversationListItem(props) {
     const {
       acceptedMessageRequest,
-      avatarPath,
+      avatarUrl,
       avatarSize,
       buttonAriaLabel,
       checked,
@@ -106,7 +106,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
       shouldShowSpinner,
       testId: overrideTestId,
       title,
-      unblurredAvatarPath,
+      unblurredAvatarUrl,
       unreadCount,
       unreadMentionsCount,
       serviceId,
@@ -194,7 +194,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
         <div className={AVATAR_CONTAINER_CLASS_NAME}>
           <Avatar
             acceptedMessageRequest={acceptedMessageRequest}
-            avatarPath={avatarPath}
+            avatarUrl={avatarUrl}
             color={color}
             conversationType={conversationType}
             noteToSelf={isAvatarNoteToSelf}
@@ -206,7 +206,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
             title={title}
             sharedGroupNames={sharedGroupNames}
             size={avatarSize ?? AvatarSize.FORTY_EIGHT}
-            unblurredAvatarPath={unblurredAvatarPath}
+            unblurredAvatarUrl={unblurredAvatarUrl}
             // This is here to appease the type checker.
             {...(props.badge
               ? { badge: props.badge, theme: props.theme }

ts/components/conversationList/ContactCheckbox.tsx

@@ -27,7 +27,7 @@ export type PropsDataType = {
   ConversationType,
   | 'about'
   | 'acceptedMessageRequest'
-  | 'avatarPath'
+  | 'avatarUrl'
   | 'color'
   | 'groupId'
   | 'id'
@@ -37,7 +37,7 @@ export type PropsDataType = {
   | 'sharedGroupNames'
   | 'title'
   | 'type'
-  | 'unblurredAvatarPath'
+  | 'unblurredAvatarUrl'
   | 'serviceId'
 >;
 
@@ -56,7 +56,7 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
   function ContactCheckbox({
     about,
     acceptedMessageRequest,
-    avatarPath,
+    avatarUrl,
     badge,
     color,
     disabledReason,
@@ -71,7 +71,7 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
     theme,
     title,
     type,
-    unblurredAvatarPath,
+    unblurredAvatarUrl,
   }) {
     const disabled = Boolean(disabledReason);
 
@@ -104,7 +104,7 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
         leading={
           <Avatar
             acceptedMessageRequest={acceptedMessageRequest}
-            avatarPath={avatarPath}
+            avatarUrl={avatarUrl}
             color={color}
             conversationType={type}
             noteToSelf={Boolean(isMe)}
@@ -115,7 +115,7 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
             title={title}
             sharedGroupNames={sharedGroupNames}
             size={AvatarSize.THIRTY_TWO}
-            unblurredAvatarPath={unblurredAvatarPath}
+            unblurredAvatarUrl={unblurredAvatarUrl}
             // appease the type checker.
             {...(badge ? { badge, theme } : { badge: undefined })}
           />

ts/components/conversationList/ContactListItem.tsx

@@ -23,7 +23,7 @@ export type ContactListItemConversationType = Pick<
   ConversationType,
   | 'about'
   | 'acceptedMessageRequest'
-  | 'avatarPath'
+  | 'avatarUrl'
   | 'badges'
   | 'color'
   | 'groupId'
@@ -37,7 +37,7 @@ export type ContactListItemConversationType = Pick<
   | 'systemFamilyName'
   | 'title'
   | 'type'
-  | 'unblurredAvatarPath'
+  | 'unblurredAvatarUrl'
   | 'username'
   | 'e164'
   | 'serviceId'
@@ -64,7 +64,7 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
   function ContactListItem({
     about,
     acceptedMessageRequest,
-    avatarPath,
+    avatarUrl,
     badge,
     color,
     hasContextMenu,
@@ -85,7 +85,7 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
     theme,
     title,
     type,
-    unblurredAvatarPath,
+    unblurredAvatarUrl,
     serviceId,
   }) {
     const [isConfirmingBlocking, setConfirmingBlocking] = useState(false);
@@ -265,7 +265,7 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
           leading={
             <Avatar
               acceptedMessageRequest={acceptedMessageRequest}
-              avatarPath={avatarPath}
+              avatarUrl={avatarUrl}
               color={color}
               conversationType={type}
               noteToSelf={Boolean(isMe)}
@@ -276,7 +276,7 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
               title={title}
               sharedGroupNames={sharedGroupNames}
               size={AvatarSize.THIRTY_TWO}
-              unblurredAvatarPath={unblurredAvatarPath}
+              unblurredAvatarUrl={unblurredAvatarUrl}
               // This is here to appease the type checker.
               {...(badge ? { badge, theme } : { badge: undefined })}
             />

ts/components/conversationList/ConversationListItem.tsx

@@ -39,7 +39,7 @@ export type MessageStatusType = typeof MessageStatuses[number];
 export type PropsData = Pick<
   ConversationType,
   | 'acceptedMessageRequest'
-  | 'avatarPath'
+  | 'avatarUrl'
   | 'badges'
   | 'color'
   | 'draftPreview'
@@ -62,7 +62,7 @@ export type PropsData = Pick<
   | 'title'
   | 'type'
   | 'typingContactIdTimestamps'
-  | 'unblurredAvatarPath'
+  | 'unblurredAvatarUrl'
   | 'unreadCount'
   | 'unreadMentionsCount'
   | 'serviceId'
@@ -82,7 +82,7 @@ export type Props = PropsData & PropsHousekeeping;
 export const ConversationListItem: FunctionComponent<Props> = React.memo(
   function ConversationListItem({
     acceptedMessageRequest,
-    avatarPath,
+    avatarUrl,
     badge,
     buttonAriaLabel,
     color,
@@ -107,7 +107,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
     title,
     type,
     typingContactIdTimestamps,
-    unblurredAvatarPath,
+    unblurredAvatarUrl,
     unreadCount,
     unreadMentionsCount,
     serviceId,
@@ -206,7 +206,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
     return (
       <BaseConversationListItem
         acceptedMessageRequest={acceptedMessageRequest}
-        avatarPath={avatarPath}
+        avatarUrl={avatarUrl}
         badge={badge}
         buttonAriaLabel={buttonAriaLabel}
         color={color}
@@ -230,7 +230,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
         title={title}
         unreadCount={unreadCount}
         unreadMentionsCount={unreadMentionsCount}
-        unblurredAvatarPath={unblurredAvatarPath}
+        unblurredAvatarUrl={unblurredAvatarUrl}
         serviceId={serviceId}
       />
     );

ts/components/conversationList/GroupListItem.tsx

@@ -16,7 +16,7 @@ export enum DisabledReason {
 
 export type GroupListItemConversationType = Pick<
   ConversationType,
-  'id' | 'title' | 'avatarPath'
+  'id' | 'title' | 'avatarUrl'
 > & {
   disabledReason: DisabledReason | undefined;
   membersCount: number;
@@ -56,7 +56,7 @@ export function GroupListItem({
       leading={
         <Avatar
           acceptedMessageRequest
-          avatarPath={group.avatarPath}
+          avatarUrl={group.avatarUrl}
           conversationType="group"
           i18n={i18n}
           isMe={false}

ts/components/conversationList/MessageSearchResult.tsx

@@ -39,7 +39,7 @@ export type PropsDataType = {
   from: Pick<
     ConversationType,
     | 'acceptedMessageRequest'
-    | 'avatarPath'
+    | 'avatarUrl'
     | 'badges'
     | 'color'
     | 'isMe'
@@ -48,7 +48,7 @@ export type PropsDataType = {
     | 'sharedGroupNames'
     | 'title'
     | 'type'
-    | 'unblurredAvatarPath'
+    | 'unblurredAvatarUrl'
   >;
 
   to: Pick<
@@ -184,7 +184,7 @@ export const MessageSearchResult: FunctionComponent<PropsType> = React.memo(
     return (
       <BaseConversationListItem
         acceptedMessageRequest={from.acceptedMessageRequest}
-        avatarPath={from.avatarPath}
+        avatarUrl={from.avatarUrl}
         badge={getPreferredBadge(from.badges)}
         color={from.color}
         conversationType="direct"
@@ -202,7 +202,7 @@ export const MessageSearchResult: FunctionComponent<PropsType> = React.memo(
         sharedGroupNames={from.sharedGroupNames}
         theme={theme}
         title={from.title}
-        unblurredAvatarPath={from.unblurredAvatarPath}
+        unblurredAvatarUrl={from.unblurredAvatarUrl}
       />
     );
   }

ts/components/leftPane/LeftPaneChooseGroupMembersHelper.tsx

@@ -228,7 +228,7 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
               <ContactPill
                 key={contact.id}
                 acceptedMessageRequest={contact.acceptedMessageRequest}
-                avatarPath={contact.avatarPath}
+                avatarUrl={contact.avatarUrl}
                 color={contact.color}
                 firstName={contact.systemGivenName ?? contact.firstName}
                 i18n={i18n}

ts/groups.ts

@@ -438,25 +438,17 @@ export function parseGroupLink(value: string): {
 
 // Group Modifications
 
-async function uploadAvatar(
+async function uploadAvatar(options: {
-  options: {
   logId: string;
   publicParams: string;
   secretParams: string;
-  } & ({ path: string } | { data: Uint8Array })
+  data: Uint8Array;
-): Promise<UploadedAvatarType> {
+}): Promise<UploadedAvatarType> {
-  const { logId, publicParams, secretParams } = options;
+  const { logId, publicParams, secretParams, data } = options;
 
   try {
     const clientZkGroupCipher = getClientZkGroupCipher(secretParams);
 
-    let data: Uint8Array;
-    if ('data' in options) {
-      ({ data } = options);
-    } else {
-      data = await window.Signal.Migrations.readAttachmentData(options.path);
-    }
-
     const hash = computeHash(data);
 
     const blobPlaintext = Proto.GroupAttributeBlob.encode({
@@ -1967,9 +1959,9 @@ export async function createGroupV2(
     try {
       avatarAttribute = {
         url: uploadedAvatar.key,
-        path: await window.Signal.Migrations.writeNewAttachmentData(
+        ...(await window.Signal.Migrations.writeNewAttachmentData(
           uploadedAvatar.data
-        ),
+        )),
         hash: uploadedAvatar.hash,
       };
     } catch (err) {
@@ -2382,17 +2374,21 @@ export async function initiateMigrationToGroupV2(
       //   - name
       //   - expireTimer
       let avatarAttribute: ConversationAttributesType['avatar'];
-      const avatarPath = conversation.attributes.avatar?.path;
+
-      if (avatarPath) {
+      const { avatar: currentAvatar } = conversation.attributes;
+      if (currentAvatar?.path) {
+        const avatarData = await window.Signal.Migrations.readAttachmentData(
+          currentAvatar
+        );
         const { hash, key } = await uploadAvatar({
           logId,
           publicParams,
           secretParams,
-          path: avatarPath,
+          data: avatarData,
         });
         avatarAttribute = {
+          ...currentAvatar,
           url: key,
-          path: avatarPath,
           hash,
         };
       }
@@ -5577,10 +5573,10 @@ export async function applyNewAvatar(
         );
       }
 
-      const path = await window.Signal.Migrations.writeNewAttachmentData(data);
+      const local = await window.Signal.Migrations.writeNewAttachmentData(data);
       result.avatar = {
         url: newAvatarUrl,
-        path,
+        ...local,
         hash,
       };
     }

ts/groups/joinViaLink.ts

@@ -30,6 +30,7 @@ import { isGroupV1 } from '../util/whatTypeOfConversation';
 import { longRunningTaskWrapper } from '../util/longRunningTaskWrapper';
 import { sleep } from '../util/sleep';
 import { dropNull } from '../util/dropNull';
+import { getLocalAttachmentUrl } from '../util/getLocalAttachmentUrl';
 
 export async function joinViaLink(value: string): Promise<void> {
   let inviteLinkPassword: string;
@@ -184,9 +185,7 @@ export async function joinViaLink(value: string): Promise<void> {
       };
     } else if (localAvatar && localAvatar.path) {
       avatar = {
-        url: window.Signal.Migrations.getAbsoluteAttachmentPath(
+        url: getLocalAttachmentUrl(localAvatar),
-          localAvatar.path
-        ),
       };
     }
 
@@ -405,7 +404,7 @@ export async function joinViaLink(value: string): Promise<void> {
 
       if (attributes.avatar && attributes.avatar.path) {
         localAvatar = {
-          path: attributes.avatar.path,
+          ...attributes.avatar,
         };
 
         // Dialog has been dismissed; we'll delete the unneeeded avatar

ts/hooks/useMinimalConversation.ts

@@ -23,7 +23,7 @@ export type MinimalConversation = Satisfies<
     | 'acceptedMessageRequest'
     | 'announcementsOnly'
     | 'areWeAdmin'
-    | 'avatarPath'
+    | 'avatarUrl'
     | 'canChangeTimer'
     | 'color'
     | 'expireTimer'
@@ -43,7 +43,7 @@ export type MinimalConversation = Satisfies<
     | 'profileName'
     | 'title'
     | 'type'
-    | 'unblurredAvatarPath'
+    | 'unblurredAvatarUrl'
   >
 >;
 
@@ -54,7 +54,7 @@ export function useMinimalConversation(
     acceptedMessageRequest,
     announcementsOnly,
     areWeAdmin,
-    avatarPath,
+    avatarUrl,
     canChangeTimer,
     color,
     expireTimer,
@@ -74,14 +74,14 @@ export function useMinimalConversation(
     profileName,
     title,
     type,
-    unblurredAvatarPath,
+    unblurredAvatarUrl,
   } = conversation;
   return useMemo(() => {
     return {
       acceptedMessageRequest,
       announcementsOnly,
       areWeAdmin,
-      avatarPath,
+      avatarUrl,
       canChangeTimer,
       color,
       expireTimer,
@@ -101,13 +101,13 @@ export function useMinimalConversation(
       profileName,
       title,
       type,
-      unblurredAvatarPath,
+      unblurredAvatarUrl,
     };
   }, [
     acceptedMessageRequest,
     announcementsOnly,
     areWeAdmin,
-    avatarPath,
+    avatarUrl,
     canChangeTimer,
     color,
     expireTimer,
@@ -127,6 +127,6 @@ export function useMinimalConversation(
     profileName,
     title,
     type,
-    unblurredAvatarPath,
+    unblurredAvatarUrl,
   ]);
 }

ts/jobs/AttachmentBackupManager.ts

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 /* eslint-disable max-classes-per-file */
 
-import { existsSync } from 'fs';
+import { existsSync } from 'node:fs';
+import { PassThrough } from 'node:stream';
 
 import * as durations from '../util/durations';
 import * as log from '../logging/log';
@@ -22,6 +23,7 @@ import {
   type EncryptedAttachmentV2,
   getAttachmentCiphertextLength,
   getAesCbcCiphertextLength,
+  decryptAttachmentV2ToSink,
   ReencyptedDigestMismatchError,
 } from '../AttachmentCrypto';
 import { getBackupKey } from '../services/backups/crypto';
@@ -114,6 +116,7 @@ type RunAttachmentBackupJobDependenciesType = {
   backupMediaBatch?: WebAPIType['backupMediaBatch'];
   backupsService: BackupsService;
   encryptAndUploadAttachment: typeof encryptAndUploadAttachment;
+  decryptAttachmentV2ToSink: typeof decryptAttachmentV2ToSink;
 };
 
 export async function runAttachmentBackupJob(
@@ -125,6 +128,7 @@ export async function runAttachmentBackupJob(
     backupsService,
     backupMediaBatch: window.textsecure.server?.backupMediaBatch,
     encryptAndUploadAttachment,
+    decryptAttachmentV2ToSink,
   }
 ): Promise<JobManagerJobResultType> {
   const jobIdForLogging = getJobIdForLogging(job);
@@ -171,7 +175,8 @@ async function runAttachmentBackupJobInner(
     'Only standard uploads are currently supported'
   );
 
-  const { path, transitCdnInfo, iv, digest, keys, size } = job.data;
+  const { path, transitCdnInfo, iv, digest, keys, size, version, localKey } =
+    job.data;
 
   const mediaId = getMediaIdFromMediaName(mediaName);
   const backupKeyMaterial = deriveBackupMediaKeyMaterial(
@@ -236,6 +241,10 @@ async function runAttachmentBackupJobInner(
   log.info(`${logId}: uploading to transit tier`);
   const uploadResult = await uploadToTransitTier({
     absolutePath,
+    version,
+    localKey,
+    size,
+
     keys,
     iv,
     digest,
@@ -263,6 +272,9 @@ type UploadResponseType = {
 async function uploadToTransitTier({
   absolutePath,
   keys,
+  version,
+  localKey,
+  size,
   iv,
   digest,
   logPrefix,
@@ -272,13 +284,54 @@ async function uploadToTransitTier({
   iv: string;
   digest: string;
   keys: string;
+  version?: 2;
+  localKey?: string;
+  size: number;
   logPrefix: string;
   dependencies: {
+    decryptAttachmentV2ToSink: typeof decryptAttachmentV2ToSink;
     encryptAndUploadAttachment: typeof encryptAndUploadAttachment;
   };
 }): Promise<UploadResponseType> {
   try {
-    const uploadResult = await dependencies.encryptAndUploadAttachment({
+    if (version === 2) {
+      strictAssert(
+        localKey != null,
+        'Missing localKey for version 2 attachment'
+      );
+
+      const sink = new PassThrough();
+
+      // This `Promise.all` is chaining two separate pipelines via
+      // a pass-through `sink`.
+      const [, result] = await Promise.all([
+        dependencies.decryptAttachmentV2ToSink(
+          {
+            idForLogging: 'uploadToTransitTier',
+            ciphertextPath: absolutePath,
+            keysBase64: localKey,
+            size,
+            isLocal: true,
+          },
+          sink
+        ),
+        dependencies.encryptAndUploadAttachment({
+          plaintext: { stream: sink },
+          keys: fromBase64(keys),
+          dangerousIv: {
+            reason: 'reencrypting-for-backup',
+            iv: fromBase64(iv),
+            digestToMatch: fromBase64(digest),
+          },
+          uploadType: 'backup',
+        }),
+      ]);
+
+      return result;
+    }
+
+    // Legacy attachments
+    return dependencies.encryptAndUploadAttachment({
       plaintext: { absolutePath },
       keys: fromBase64(keys),
       dangerousIv: {
@@ -288,7 +341,6 @@ async function uploadToTransitTier({
       },
       uploadType: 'backup',
     });
-    return uploadResult;
   } catch (error) {
     log.error(
       `${logPrefix}/uploadToTransitTier: Error while encrypting and uploading`,

ts/model-types.d.ts

@@ -471,6 +471,9 @@ export type ConversationAttributesType = {
   // This value is useless once the message request has been approved. We don't clean it
   //   up but could. We don't persist it but could (though we'd probably want to clean it
   //   up in that case).
+  unblurredAvatarUrl?: string;
+
+  // Legacy field, mapped to above in getConversation()
   unblurredAvatarPath?: string;
 };
 

ts/models/conversations.ts

@@ -26,9 +26,14 @@ import { toDayMillis } from '../util/timestamp';
 import { areWeAdmin } from '../util/areWeAdmin';
 import { isBlocked } from '../util/isBlocked';
 import { getAboutText } from '../util/getAboutText';
-import { getAvatarPath } from '../util/avatarUtils';
+import {
+  getAvatar,
+  getRawAvatarPath,
+  getLocalAvatarUrl,
+} from '../util/avatarUtils';
 import { getDraftPreview } from '../util/getDraftPreview';
 import { hasDraft } from '../util/hasDraft';
+import { missingCaseError } from '../util/missingCaseError';
 import * as Conversation from '../types/Conversation';
 import type { StickerType, StickerWithHydratedData } from '../types/Stickers';
 import * as Stickers from '../types/Stickers';
@@ -77,6 +82,7 @@ import {
   decryptProfileName,
   deriveAccessKey,
 } from '../Crypto';
+import { decryptAttachmentV2 } from '../AttachmentCrypto';
 import * as Bytes from '../Bytes';
 import type { DraftBodyRanges } from '../types/BodyRange';
 import { BodyRange } from '../types/BodyRange';
@@ -84,6 +90,7 @@ import { migrateColor } from '../util/migrateColor';
 import { isNotNil } from '../util/isNotNil';
 import {
   NotificationType,
+  NotificationSetting,
   notificationService,
 } from '../services/notifications';
 import { storageServiceUploadJob } from '../services/storage';
@@ -178,6 +185,7 @@ window.Whisper = window.Whisper || {};
 
 const { Message } = window.Signal.Types;
 const {
+  copyIntoTempDirectory,
   deleteAttachmentData,
   doesAttachmentExist,
   getAbsoluteAttachmentPath,
@@ -3660,8 +3668,8 @@ export class ConversationModel extends window.Backbone
     }
 
     const { key } = packData;
-    const { emoji, path, width, height } = stickerData;
+    const { emoji, width, height } = stickerData;
-    const data = await readStickerData(path);
+    const data = await readStickerData(stickerData);
 
     // We need this content type to be an image so we can display an `<img>` instead of a
     //   `<video>` or an error, but it's not critical that we get the full type correct.
@@ -4736,18 +4744,18 @@ export class ConversationModel extends window.Backbone
   }
 
   async setProfileAvatar(
-    avatarPath: undefined | null | string,
+    avatarUrl: undefined | null | string,
     decryptionKey: Uint8Array
   ): Promise<void> {
     if (isMe(this.attributes)) {
-      if (avatarPath) {
+      if (avatarUrl) {
-        await window.storage.put('avatarUrl', avatarPath);
+        await window.storage.put('avatarUrl', avatarUrl);
       } else {
         await window.storage.remove('avatarUrl');
       }
     }
 
-    if (!avatarPath) {
+    if (!avatarUrl) {
       this.set({ profileAvatar: undefined });
       return;
     }
@@ -4756,7 +4764,7 @@ export class ConversationModel extends window.Backbone
     if (!messaging) {
       throw new Error('setProfileAvatar: Cannot fetch avatar when offline!');
     }
-    const avatar = await messaging.getAvatar(avatarPath);
+    const avatar = await messaging.getAvatar(avatarUrl);
 
     // decrypt
     const decrypted = decryptProfile(avatar, decryptionKey);
@@ -5130,11 +5138,11 @@ export class ConversationModel extends window.Backbone
   }
 
   unblurAvatar(): void {
-    const avatarPath = getAvatarPath(this.attributes);
+    const avatarUrl = getRawAvatarPath(this.attributes);
-    if (avatarPath) {
+    if (avatarUrl) {
-      this.set('unblurredAvatarPath', avatarPath);
+      this.set('unblurredAvatarUrl', avatarUrl);
     } else {
-      this.unset('unblurredAvatarPath');
+      this.unset('unblurredAvatarUrl');
     }
   }
 
@@ -5306,16 +5314,36 @@ export class ConversationModel extends window.Backbone
     url: string;
     absolutePath?: string;
   }> {
-    const avatarPath = getAvatarPath(this.attributes);
+    let saveToDisk: boolean;
-    if (avatarPath) {
+
+    const notificationSetting = notificationService.getNotificationSetting();
+    switch (notificationSetting) {
+      case NotificationSetting.NameOnly:
+      case NotificationSetting.NameAndMessage:
+        // According to the MSDN, avatars can only be loaded from disk or an
+        // http server:
+        // https://learn.microsoft.com/en-us/uwp/schemas/tiles/toastschema/element-image?redirectedfrom=MSDN
+        saveToDisk = OS.isWindows();
+        break;
+      case NotificationSetting.Off:
+      case NotificationSetting.NoNameOrMessage:
+        saveToDisk = false;
+        break;
+      default:
+        throw missingCaseError(notificationSetting);
+    }
+    const avatarUrl = getLocalAvatarUrl(this.attributes);
+    if (avatarUrl) {
       return {
-        url: getAbsoluteAttachmentPath(avatarPath),
+        url: avatarUrl,
-        absolutePath: getAbsoluteAttachmentPath(avatarPath),
+        absolutePath: saveToDisk
+          ? await this.getTemporaryAvatarPath()
+          : undefined,
       };
     }
 
     const { url, path } = await this.getIdenticon({
-      saveToDisk: OS.isWindows(),
+      saveToDisk,
     });
     return {
       url,
@@ -5323,6 +5351,46 @@ export class ConversationModel extends window.Backbone
     };
   }
 
+  private async getTemporaryAvatarPath(): Promise<string | undefined> {
+    const avatar = getAvatar(this.attributes);
+    if (avatar?.path == null) {
+      return undefined;
+    }
+
+    const avatarPath = getRawAvatarPath(this.attributes);
+    if (!avatarPath) {
+      return undefined;
+    }
+
+    // Already plaintext
+    if (avatar.version !== 2) {
+      return avatarPath;
+    }
+
+    if (!avatar.localKey || !avatar.size) {
+      return undefined;
+    }
+
+    const { path: plaintextPath } = await decryptAttachmentV2({
+      ciphertextPath: avatarPath,
+      idForLogging: 'getAvatarOrIdenticon',
+      keysBase64: avatar.localKey,
+      size: avatar.size,
+
+      getAbsoluteAttachmentPath,
+      isLocal: true,
+    });
+
+    try {
+      const { path: tempPath } = await copyIntoTempDirectory(
+        getAbsoluteAttachmentPath(plaintextPath)
+      );
+      return getAbsoluteTempPath(tempPath);
+    } finally {
+      await deleteAttachmentData(plaintextPath);
+    }
+  }
+
   private async getIdenticon({
     saveToDisk,
   }: { saveToDisk?: boolean } = {}): Promise<{

ts/quill/mentions/completion.tsx

@@ -284,7 +284,7 @@ export class MentionCompletion {
                 >
                   <Avatar
                     acceptedMessageRequest={member.acceptedMessageRequest}
-                    avatarPath={member.avatarPath}
+                    avatarUrl={member.avatarUrl}
                     badge={getPreferredBadge(member.badges)}
                     conversationType="direct"
                     i18n={this.options.i18n}
@@ -293,7 +293,7 @@ export class MentionCompletion {
                     size={AvatarSize.TWENTY_EIGHT}
                     theme={theme}
                     title={member.title}
-                    unblurredAvatarPath={member.unblurredAvatarPath}
+                    unblurredAvatarUrl={member.unblurredAvatarUrl}
                   />
                   <div className="module-composition-input__suggestions__title">
                     <UserText text={member.title} />

ts/services/LinkPreview.ts

@@ -449,8 +449,8 @@ async function getStickerPackPreview(
     const sticker = pack.stickers[coverStickerId];
     const data =
       pack.status === 'ephemeral'
-        ? await window.Signal.Migrations.readTempData(sticker.path)
+        ? await window.Signal.Migrations.readTempData(sticker)
-        : await window.Signal.Migrations.readStickerData(sticker.path);
+        : await window.Signal.Migrations.readStickerData(sticker);
 
     if (abortSignal.aborted) {
       return null;

ts/services/backups/index.ts

@@ -20,15 +20,13 @@ import { DelimitedStream } from '../../util/DelimitedStream';
 import { appendPaddingStream } from '../../util/logPadding';
 import { prependStream } from '../../util/prependStream';
 import { appendMacStream } from '../../util/appendMacStream';
+import { getIvAndDecipher } from '../../util/getIvAndDecipher';
+import { getMacAndUpdateHmac } from '../../util/getMacAndUpdateHmac';
 import { HOUR } from '../../util/durations';
 import { CipherType, HashType } from '../../types/Crypto';
 import * as Errors from '../../types/errors';
 import { constantTimeEqual } from '../../Crypto';
-import {
+import { measureSize } from '../../AttachmentCrypto';
-  getIvAndDecipher,
-  getMacAndUpdateHmac,
-  measureSize,
-} from '../../AttachmentCrypto';
 import { BackupExportStream } from './export';
 import { BackupImportStream } from './import';
 import { getKeyMaterial } from './crypto';

ts/services/backups/util/filePointers.ts

@@ -171,6 +171,10 @@ export function convertBackupMessageAttachmentToAttachment(
 async function generateNewEncryptionInfoForAttachment(
   attachment: Readonly<LocallySavedAttachment>
 ): Promise<AttachmentReadyForBackup> {
+  strictAssert(
+    attachment.version !== 2,
+    'generateNewEncryptionInfoForAttachment can only be used on legacy attachments'
+  );
   const fixedUpAttachment = { ...attachment };
 
   // Since we are changing the encryption, we need to delete all encryption & location
@@ -195,6 +199,8 @@ async function generateNewEncryptionInfoForAttachment(
         attachment.path
       ),
     },
+    getAbsoluteAttachmentPath:
+      window.Signal.Migrations.getAbsoluteAttachmentPath,
   });
 
   return {