Encrypting and Decrypting with AES GCM from Angular to C#

How can I implement encryption and decryption methods in C# that are compatible with my existing Angular encryption and decryption methods? Currently, I have two methods in Angular for encryption and decryption, but I also need to be able to perform these operations in the back-end using C#. Here are my Angular methods:

 async encryptStringAES256(key: string, xSalt: string, data: string): Promise<any> {
    return new Promise((resolve, reject) => {
      const salt = new Uint8Array(this.toUin8Arry(xSalt));
      const decryptedData = new Uint8Array(this.stringToArray(data));
      this.getKeyMaterial(key).then( async (res: any) => {
        const xkey = await window.crypto.subtle.deriveKey(
          {
            name: 'PBKDF2',
            iterations: 100000,
            salt,
            hash: 'SHA-256'
          },
          res,
          { name: 'AES-GCM', length: 256},
          true,
          ['encrypt', 'decrypt']
        );
        window.crypto.subtle.encrypt({ name: 'AES-GCM', iv: salt }, xkey, decryptedData).then(
          encrypted => {
            resolve(this.arrayToString(new Uint8Array(encrypted)));
          })
        .catch(err => {
           // catch
        });
      });
    });
  }

  async decryptStringAES256(key: string, xSalt: string, data: string): Promise<any> {
      const salt = new Uint8Array(this.toUin8Arry(xSalt));
      const encryptedData = new Uint8Array(this.stringToArray(data));
      this.getKeyMaterial(key).then( async (res: any) => {
        const xkey = await window.crypto.subtle.deriveKey(
          {
            name: 'PBKDF2',
            iterations: 100000,
            salt,
            hash: 'SHA-256'
          },
          res,
          { name: 'AES-GCM', length: 256},
          true,
          ['encrypt', 'decrypt']
        );
        window.crypto.subtle.decrypt({ name: 'AES-GCM', iv: salt }, xkey, encryptedData).then(
          decrypted => {
            const dec = this.arrayToString(new Uint8Array(decrypted));
            resolve(dec);
          })
          .catch(err => {
            reject(data);
          });
      });
    });
  }

  getKeyMaterial(password: string): any {
    const enc = new TextEncoder();
    return window.crypto.subtle.importKey(
      'raw',
      enc.encode(password),
      'PBKDF2',
      false,
      ['deriveBits', 'deriveKey']
    );
  }

c#:

    public static void Decrypt(byte[] sourceData, string password)
    {
        try
        {
            var encryptedData = sourceData.AsSpan();
            var key = Convert.FromBase64String(password).AsSpan();
            var ivSizeBytes = 10;
            var tagSizeBytes = 0; 

            var cipherSize = encryptedData.Length - tagSizeBytes - ivSizeBytes;

            var iv = encryptedData.Slice(0, ivSizeBytes);

            var cipherBytes = encryptedData.Slice(ivSizeBytes, cipherSize);

            var tagStart = ivSizeBytes + cipherSize;
            var tag = encryptedData.Slice(tagStart);

            using Rfc2898DeriveBytes pbkdf2 = new(Encoding.UTF8.GetBytes(password), iv.ToArray(), 100000, HashAlgorithmName.SHA256); 

            Span<byte> plainBytes = cipherSize < 1024
                ? stackalloc byte[cipherSize]
                : new byte[cipherSize];
            using var aes = new AesGcm(pbkdf2.GetBytes(32));
            aes.Decrypt(iv, cipherBytes, tag, plainBytes);

            var x = Encoding.UTF8.GetString(plainBytes);
        }
        catch (Exception e)
        {
            throw new Exception($"Fehler Decrypt: {e.Message}");
        }
    }

> and I don't know how to get the iv and tag from the sourceData, and I
> also don't know what length they have.

• In the JavaScript code, the salt is also used as IV (i.e. IV and IV length correspond to salt and salt length).
  This coupling has disadvantages, which will be explained in the last section.
• The WebCrypto API implicitly concatenates ciphertext and tag: ciphertext|tag. Since no length is specified for the tag, the default length of 16 bytes is applied.
  When decrypting with AesGcm, ciphertext and tag are to be separated (based on the known length of the tag).

The following C# code for decryption is based on the code you posted:

var encryptedData = Convert.FromBase64String("avgPDxTwl9Nbr7FUnTgKvXXQ1Rrl2q2R0jBgsrn1F9i5GEyGg/vaw3i3Vkg1zUz3Wby/juz2yXE6ZpU=");
var salt = Convert.FromBase64String("MDEyMzQ1Njc4OTAx");
var password = "my password";
var plaintext = Decrypt(encryptedData, salt, password);
Console.WriteLine(Encoding.UTF8.GetString(plaintext)); // The quick brown fox jumps over the lazy dog

public static byte[] Decrypt(byte[] encryptedData, byte[] salt, string password)
{
    var ciphertext = encryptedData[0..^16];
    var tag = encryptedData[^16..];
    using Rfc2898DeriveBytes pbkdf2 = new Rfc2898DeriveBytes(Encoding.UTF8.GetBytes(password), salt, 100000, HashAlgorithmName.SHA256);
    using var aes = new AesGcm(pbkdf2.GetBytes(32));
    var plaintext = new byte[ciphertext.Length];
    aes.Decrypt(salt, ciphertext, tag, plaintext);
    return plaintext;
}

The ciphertext was generated using the posted JavaScript code, replacing all missing methods (toUin8Arry(), stringToArray(), arrayToString(), etc.) and using Base64 as the encoding for salt and ciphertext:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

(async () => {
var plaintext = new TextEncoder().encode('The quick brown fox jumps over the lazy dog');
var password = 'my password'
var salt = b642ab('MDEyMzQ1Njc4OTAx');
var ciphertextB64 = await encryptStringAES256(password, salt, plaintext);
console.log(ciphertextB64);
function b642ab(base64_string){
return Uint8Array.from(window.atob(base64_string), c => c.charCodeAt(0));
}
function ab2b64(arrayBuffer) {
return window.btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));
}
async function encryptStringAES256(password, salt, plaintext) {
const keyMaterial = await getKeyMaterial(password);
const key = await window.crypto.subtle.deriveKey(
{
name: 'PBKDF2',
iterations: 100000,
salt,
hash: 'SHA-256'
},
keyMaterial,
{
name: 'AES-GCM', 
length: 256
},
true,
['encrypt', 'decrypt']
);
const ciphertext = await window.crypto.subtle.encrypt({ name: 'AES-GCM', iv: salt }, key, plaintext)
return ab2b64(ciphertext); // avgPDxTwl9Nbr7FUnTgKvXXQ1Rrl2q2R0jBgsrn1F9i5GEyGg/vaw3i3Vkg1zUz3Wby/juz2yXE6ZpU=
}
async function getKeyMaterial(password) {
const enc = new TextEncoder();
return window.crypto.subtle.importKey(
'raw',
enc.encode(password),
'PBKDF2',
false,
['deriveBits', 'deriveKey']
);
}
})();

<!-- end snippet -->

Security:

In general, for security reasons, a random salt must be used for each encryption so that each encryption applies a different key (assuming a fixed password).
With the architecture used, this is even more necessary since the salt is also applied as IV. A static salt would therefore lead to reuse of key/IV pairs, which is a serious vulnerability for GCM.

Another drawback of coupling salt and IV is that the salt length must be chosen to 12 bytes in order to use the IV length of 12 bytes recommended for GCM.
GCM can handle other IV lengths, but this comes at the cost of performance and compatibility.
The latter is a problem especially with this example: AesGcm only supports the recommended IV length of 12 bytes (here). If you use a different salt length, you cannot apply AesGcm and have to switch to e.g. BouncyCastle.

A correct implementation on the JavaScript side would generate a random salt (e.g. 16 bytes) and a random IV (12 bytes) during encryption.
After encryption, the data would be concatenated: salt|iv|ciphertext|tag (ciphertext|tag is implicitly concatenated by WebCrypto). None of the 4 components are secret, so their disclosure is not critical.
On the decryption side, the data is separated based on the known length of salt, IV, and tag, and decryption is performed.