Common Encryption Methods for Frontend Development

As information security becomes increasingly important, frontend developers need to choose appropriate encryption methods to protect user data. This article reviews common techniques and their suitable scenarios.

1. Base64 Encoding – Not encryption but a way to represent binary data using 64 printable characters. It is useful for transmitting small binary payloads (e.g., certificates, cookies) but should not be used for security. Example in Python:

import base64
base64.b64encode('binary\x00string')
# 'YmluYXJ5AHN0cmluZw=='
base64.b64decode('YmluYXJ5AHN0cmluZw==')

2. Hash Algorithms (Hash) – Produce a fixed‑length, irreversible digest (e.g., MD5, SHA‑1). Suitable for data comparison and verification without needing to recover the original text. Common use cases include password reset tokens and email activation links.

3. Adding Salt – Combines a random string (salt) with the original data before hashing to prevent pre‑computed attacks. Proper salting requires a cryptographically secure random generator, sufficient length, and server‑side storage. Example in JavaScript:

let salt = self.getCookie('salt') ? self.getCookie('salt') : uuid;
let sign = Sha1hex(`${token}${taxpayerId}${self.state.submitParams.companyName}${uuid}${salt}`);

Key points: avoid short or predictable salts, never reuse salts, and generate them with CSPRNG.

4. Slow Hash Functions – Make hashing deliberately slow (e.g., PBKDF2, bcrypt) to deter brute‑force attacks by using key stretching.

5. Key Hash (HMAC) – Incorporates a secret key into the hash (e.g., HMAC) so that only parties possessing the key can verify the digest. Often used on the server side for protecting against attacks such as SQL injection.

6. XOR – Simple bitwise operation useful for lightweight obfuscation when the key is as long as the message and used only once. Example:

message XOR key // cipherText
cipherText XOR key // original message

Requirements: key length ≥ message length and the key must be random and single‑use.

7. Encryption (Encrypt) – Reversible transformation of plaintext into ciphertext using a key. Symmetric algorithms (e.g., AES, DES) use the same key for encryption and decryption, while asymmetric algorithms (e.g., RSA) use a public key for encryption and a private key for decryption.

Example of AES encryption/decryption with CryptoJS in JavaScript:

/** AES encryption */
encrypt: function (data) {
  let encrypted = CryptoJS.AES.encrypt(data, CryptoJS.enc.Utf8.parse(MAP.AuthTokenKey), {
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
    iv: CryptoJS.enc.Hex.parse(MAP.iv)
  });
  return encrypted.toString();
},
/** AES decryption */
decrypt: function (data) {
  let decrypted = CryptoJS.AES.decrypt(data, CryptoJS.enc.Utf8.parse(MAP.AuthTokenKey), {
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
    iv: CryptoJS.enc.Hex.parse(MAP.iv)
  });
  return decrypted.toString(CryptoJS.enc.Utf8);
}

CryptoJS also supports other symmetric modes, padding schemes, and initialization vectors (IV) to randomize ciphertext.

8. Symmetric vs Asymmetric Encryption – Symmetric encryption is faster and suitable for large data; asymmetric encryption is slower and typically used for small data such as key exchange or digital signatures.

9. Digital Signatures – Provide authenticity and integrity by signing a hash of the message with a private key; verification is done with the corresponding public key.

// Signing
let digest = hash(message);
let digitalSignature = sign(digest, privateKey);
// Verification
let digest1 = verify(digitalSignature, publicKey);
let digest2 = hash(message);
if (digest1 === digest2) { /* valid */ }

10. Crypto Module API Highlights – When using block ciphers like AES, understand the mode (ECB, CBC, CFB), padding (PKCS7), and IV. These parameters affect security and must be chosen carefully.

Conclusion – Developers should be aware of each algorithm’s characteristics and choose the appropriate method based on the use case, while coordinating with backend services for end‑to‑end security.