AES vs SM4: A Frontend Developer’s Guide to Encryption Algorithms#

Published: May 5, 2026 14:05

Tool: https://jsokit.com/tools/crypto-advanced

The Encryption Dilemma#

When working on projects involving sensitive data, you’ve likely faced this question: AES or Chinese national cryptography (SM series)? International algorithms have mature ecosystems, while SM algorithms offer regulatory compliance in China. Today, let’s dive into both approaches and understand their fundamental differences.

Here’s a real scenario: You’re building a data encryption module for a government system, and the client explicitly requires “SM algorithms must be used.” At this point, you need more than just API calls—you need to understand what truly sets SM4 apart from AES.

AES Encryption: From Principles to Code#

AES (Advanced Encryption Standard) is the most widely used symmetric encryption algorithm today. Its core is the SPN structure—a Substitution-Permutation Network that performs multiple rounds of byte substitution, row shifting, column mixing, and round key addition.

Key AES Parameters#

Key Length Rounds Block Size
128 bit 10 128 bit
192 bit 12 128 bit
256 bit 14 128 bit

For frontend implementation, we typically use the CryptoJS library:

import CryptoJS from 'crypto-js'

// AES encryption
const plaintext = 'sensitive data'
const key = 'my-secret-key-123'

const encrypted = CryptoJS.AES.encrypt(plaintext, key).toString()
console.log(encrypted) // U2FsdGVkX1+3Z7Q8...

// AES decryption
const decrypted = CryptoJS.AES.decrypt(encrypted, key)
const originalText = decrypted.toString(CryptoJS.enc.Utf8)
console.log(originalText) // sensitive data

This code looks simple, but there are several pitfalls:

Pitfall #1: Key Handling#

When CryptoJS receives a string key, it automatically uses OpenSSL’s EvpKDF to derive the actual encryption key and IV. This means:

// These two lines produce different results every time!
CryptoJS.AES.encrypt('hello', 'key').toString()  // Contains random salt
CryptoJS.AES.encrypt('hello', 'key').toString()  // Another different ciphertext

If you need deterministic encryption (same plaintext + same key = same ciphertext), you must manually specify the IV:

const keyBytes = CryptoJS.enc.Utf8.parse('1234567890123456') // 16-byte key
const ivBytes = CryptoJS.enc.Utf8.parse('1234567890123456')  // 16-byte IV

const encrypted = CryptoJS.AES.encrypt('sensitive data', keyBytes, {
  iv: ivBytes,
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7
}).toString()

// Now, identical inputs always produce identical outputs

Pitfall #2: Padding Mode#

AES requires plaintext length to be a multiple of 16 bytes. Padding is needed for shorter data. CryptoJS defaults to PKCS7 padding, but your backend might use ZeroPadding or NoPadding—always confirm this during integration.

SM4 Encryption: The Chinese National Standard#

SM4 is a symmetric encryption algorithm published by China’s State Cryptography Administration. Both block size and key length are 128 bits, with 32 rounds of iteration. Its core is a Feistel variant structure—the round function uses nonlinear transformation τ and linear transformation L.

SM4 vs AES Core Differences#

Feature AES SM4
Structure SPN Feistel variant
Rounds 10/12/14 Fixed 32
S-box Finite field inverse Lookup table
Philosophy Mathematical elegance Large security margin

For SM4 in the frontend, use the sm-crypto library:

import { sm4 } from 'sm-crypto'

const key = '0123456789abcdeffedcba9876543210' // 32-char hex key
const plaintext = 'SM4 test data'

// SM4 encryption
const ciphertext = sm4.encrypt(plaintext, key)
console.log(ciphertext) // 128-bit hex string

// SM4 decryption
const decrypted = sm4.decrypt(ciphertext, key)
console.log(decrypted) // SM4 test data

SM4 Key Considerations#

SM4 keys must be 32-character hexadecimal strings (16 bytes). If you pass a regular string, convert it first:

// String to hex conversion
function stringToHex(str) {
  const encoder = new TextEncoder()
  const bytes = encoder.encode(str)
  return Array.from(bytes)
    .map(b => b.toString(16).padStart(2, '0'))
    .join('')
}

// Using custom key
const myKey = 'mySecretKey12345'
const hexKey = stringToHex(myKey).padEnd(32, '0').slice(0, 32)

const encrypted = sm4.encrypt('sensitive data', hexKey)

Performance Comparison: Real Benchmarks#

I ran a simple test on Chrome 120, encrypting 1MB of random data:

AES-128-CBC (CryptoJS):  ~180ms
SM4 (sm-crypto):         ~250ms
AES-128-GCM (Web Crypto): ~15ms  🚀

The conclusion is clear: Web Crypto API dramatically outperforms JavaScript implementations. Use browser native APIs whenever possible:

// Web Crypto API for AES-GCM
async function aesGcmEncrypt(plaintext, password) {
  const encoder = new TextEncoder()
  const data = encoder.encode(plaintext)

  // Derive key from password
  const keyMaterial = await crypto.subtle.importKey(
    'raw',
    encoder.encode(password),
    'PBKDF2',
    false,
    ['deriveKey']
  )

  const key = await crypto.subtle.deriveKey(
    { name: 'PBKDF2', salt: crypto.getRandomValues(new Uint8Array(16)), iterations: 100000, hash: 'SHA-256' },
    keyMaterial,
    { name: 'AES-GCM', length: 128 },
    false,
    ['encrypt']
  )

  const iv = crypto.getRandomValues(new Uint8Array(12))
  const ciphertext = await crypto.subtle.encrypt(
    { name: 'AES-GCM', iv },
    key,
    data
  )

  return { iv, ciphertext }
}

Special Use Cases for SM Algorithms#

In China, government, financial, and healthcare sectors have explicit SM compliance requirements. The Cryptography Law mandates that critical information infrastructure must use nationally approved commercial cryptography algorithms. This means:

  1. Government procurement projects: Must support SM2/SM3/SM4
  2. Banking systems: China UnionPay requires SM algorithms
  3. Medical data: Electronic health record systems require SM protection

The SM trilogy:

Algorithm Purpose International Equivalent
SM2 Asymmetric encryption ECC P-256
SM3 Hash algorithm SHA-256
SM4 Symmetric encryption AES-128 
// SM2 asymmetric encryption example
import { sm2 } from 'sm-crypto'

const keyPair = sm2.generateKeyPairHex()
// Public key for encryption, private key for decryption

const ciphertext = sm2.doEncrypt('sensitive data', keyPair.publicKey, 1)

Practical Advice: How to Choose?#

  1. Global users → AES + Web Crypto API
  2. Chinese government/finance projects → SM series algorithms
  3. High-security scenarios → AES-256-GCM or SM4 + SM2 hybrid encryption
  4. Performance-critical applications → Prioritize Web Crypto API

Security Best Practices#

Whether you choose AES or SM4, never forget these principles:

// ❌ Wrong: Hardcoded key
const KEY = 'my-secret-key-123'

// ✅ Correct: Get key from environment or backend
const KEY = process.env.ENCRYPTION_KEY

// ✅ Correct: Generate key with strong randomness
const key = crypto.getRandomValues(new Uint8Array(16))

Never hardcode keys in frontend code, and never use timestamps or Math.random() to generate keys—these are not cryptographically secure random sources.