1. 项目背景与核心需求在Vue项目中实现数据加密是一个常见的安全需求特别是涉及敏感信息传输时。SM4作为国密算法标准相比AES等国际通用算法更适合国内业务场景。gm-crypto是一个专门支持国密算法的JavaScript加密库在Vue生态中逐渐成为处理SM4加密的首选方案。我最近在金融类Vue项目中实际应用了gm-crypto进行SM4加密发现它能完美兼容Vue2/Vue3且加密性能优于同类库。下面将完整分享从环境配置到实战应用的全过程包含多个实际开发中容易踩坑的细节。2. 环境准备与库选型2.1 为什么选择gm-crypto对比热词中提到的sm-cryptogm-crypto有以下优势更完整的国密算法支持SM2/SM3/SM4针对Web环境优化体积更小min版仅78KB提供TypeScript类型定义活跃的issue响应实测24小时内得到维护者回复2.2 安装配置# 通过npm安装推荐 npm install gm-crypto --save # 或使用yarn yarn add gm-crypto注意如果遇到网络问题可配置国内镜像源。但绝对不要尝试任何违规的网络访问方式所有操作必须遵守国家法律法规。3. SM4加密核心实现3.1 基础加密示例import { SM4 } from gm-crypto const key 0123456789abcdeffedcba9876543210 // 16字节十六进制字符串 const plaintext 需要加密的数据 // ECB模式加密 const encrypted SM4.encrypt(plaintext, key, { inputEncoding: utf8, outputEncoding: hex }) // ECB模式解密 const decrypted SM4.decrypt(encrypted, key, { inputEncoding: hex, outputEncoding: utf8 })关键参数说明key必须为32个字符的十六进制字符串16字节inputEncoding/outputEncoding支持utf8、hex、base643.2 更安全的CBC模式实现实际项目中推荐使用CBC模式需要额外提供iv参数const iv 1234567890abcdef1234567890abcdef // 16字节十六进制字符串 const encrypted SM4.encrypt(plaintext, key, { iv, mode: SM4.constants.CBC, inputEncoding: utf8, outputEncoding: base64 })4. Vue项目集成实践4.1 全局封装为Vue插件在src/utils/crypto.js中创建封装import { SM4 } from gm-crypto const CryptoUtil { install(Vue) { Vue.prototype.$sm4 { encrypt(plaintext, key, iv null) { const options { inputEncoding: utf8, outputEncoding: base64 } if (iv) { options.iv iv options.mode SM4.constants.CBC } return SM4.encrypt(plaintext, key, options) }, // 解密方法同理 } } } export default CryptoUtil在main.js中引入import CryptoUtil from /utils/crypto Vue.use(CryptoUtil)4.2 组件中使用示例template div button clickhandleEncrypt加密数据/button /div /template script export default { methods: { handleEncrypt() { const key this.$store.state.cryptoKey // 从Vuex获取密钥 const encrypted this.$sm4.encrypt(敏感数据, key) console.log(加密结果:, encrypted) } } } /script5. 关键问题与解决方案5.1 密钥管理方案根据项目安全级别可选择前端硬编码仅适用于低安全要求场景通过接口动态获取推荐结合RSA非对称加密传输SM4密钥高安全要求5.2 常见报错处理错误信息原因分析解决方案Invalid key length密钥格式错误确保是32字符十六进制字符串Invalid iv lengthIV向量错误CBC模式需要16字节IVInput not a string输入数据类型错误检查inputEncoding参数5.3 性能优化技巧加密大文件时使用Web Worker避免阻塞UI多次加密相同数据可缓存加密结果使用base64输出比hex节省约1/3空间6. 安全增强实践6.1 防调试保护在vue.config.js中添加configureWebpack: { devtool: process.env.NODE_ENV production ? false : source-map }6.2 混淆加固建议配合webpack-obfuscator等工具const WebpackObfuscator require(webpack-obfuscator) module.exports { configureWebpack: { plugins: [ new WebpackObfuscator({ rotateStringArray: true }, [excluded_bundle_name.js]) ] } }7. 与后端联调要点7.1 Java端示例确保后端使用相同参数// Spring Boot示例 import org.bouncycastle.jce.provider.BouncyCastleProvider; import javax.crypto.Cipher; import javax.crypto.spec.SecretKeySpec; import javax.crypto.spec.IvParameterSpec; public class SM4Util { static { Security.addProvider(new BouncyCastleProvider()); } public static String encrypt(String content, String key, String iv) throws Exception { Cipher cipher Cipher.getInstance(SM4/CBC/PKCS5Padding, BC); SecretKeySpec keySpec new SecretKeySpec(key.getBytes(), SM4); IvParameterSpec ivSpec new IvParameterSpec(iv.getBytes()); cipher.init(Cipher.ENCRYPT_MODE, keySpec, ivSpec); byte[] encrypted cipher.doFinal(content.getBytes(StandardCharsets.UTF_8)); return Base64.getEncoder().encodeToString(encrypted); } }7.2 联调检查清单确认双方使用的模式ECB/CBC统一密钥和IV的生成规则对齐字符编码建议全链路UTF-8协商好输出格式hex/base648. 扩展应用场景8.1 加密URL参数export function encryptParams(params) { const key localStorage.getItem(sm4_key) return { data: this.$sm4.encrypt(JSON.stringify(params), key), timestamp: Date.now() } }8.2 本地存储加密Vue.prototype.$secureStorage { setItem(key, value) { const encrypted this.$sm4.encrypt(value, storageKey) localStorage.setItem(key, encrypted) }, getItem(key) { const encrypted localStorage.getItem(key) return encrypted ? this.$sm4.decrypt(encrypted, storageKey) : null } }在实际项目中使用时发现iOS Safari浏览器对localStorage的访问有特殊限制需要额外处理QuotaExceededError异常。建议对大于2MB的数据改用IndexedDB存储加密后的内容。 
长河君 · 2026/10/26 17:25:32 · 阅读 1.2k Vue项目中使用gm-crypto实现SM4数据加密实战
1. 项目背景与核心需求在Vue项目中实现数据加密是一个常见的安全需求特别是涉及敏感信息传输时。SM4作为国密算法标准相比AES等国际通用算法更适合国内业务场景。gm-crypto是一个专门支持国密算法的JavaScript加密库在Vue生态中逐渐成为处理SM4加密的首选方案。我最近在金融类Vue项目中实际应用了gm-crypto进行SM4加密发现它能完美兼容Vue2/Vue3且加密性能优于同类库。下面将完整分享从环境配置到实战应用的全过程包含多个实际开发中容易踩坑的细节。2. 环境准备与库选型2.1 为什么选择gm-crypto对比热词中提到的sm-cryptogm-crypto有以下优势更完整的国密算法支持SM2/SM3/SM4针对Web环境优化体积更小min版仅78KB提供TypeScript类型定义活跃的issue响应实测24小时内得到维护者回复2.2 安装配置# 通过npm安装推荐 npm install gm-crypto --save # 或使用yarn yarn add gm-crypto注意如果遇到网络问题可配置国内镜像源。但绝对不要尝试任何违规的网络访问方式所有操作必须遵守国家法律法规。3. SM4加密核心实现3.1 基础加密示例import { SM4 } from gm-crypto const key 0123456789abcdeffedcba9876543210 // 16字节十六进制字符串 const plaintext 需要加密的数据 // ECB模式加密 const encrypted SM4.encrypt(plaintext, key, { inputEncoding: utf8, outputEncoding: hex }) // ECB模式解密 const decrypted SM4.decrypt(encrypted, key, { inputEncoding: hex, outputEncoding: utf8 })关键参数说明key必须为32个字符的十六进制字符串16字节inputEncoding/outputEncoding支持utf8、hex、base643.2 更安全的CBC模式实现实际项目中推荐使用CBC模式需要额外提供iv参数const iv 1234567890abcdef1234567890abcdef // 16字节十六进制字符串 const encrypted SM4.encrypt(plaintext, key, { iv, mode: SM4.constants.CBC, inputEncoding: utf8, outputEncoding: base64 })4. Vue项目集成实践4.1 全局封装为Vue插件在src/utils/crypto.js中创建封装import { SM4 } from gm-crypto const CryptoUtil { install(Vue) { Vue.prototype.$sm4 { encrypt(plaintext, key, iv null) { const options { inputEncoding: utf8, outputEncoding: base64 } if (iv) { options.iv iv options.mode SM4.constants.CBC } return SM4.encrypt(plaintext, key, options) }, // 解密方法同理 } } } export default CryptoUtil在main.js中引入import CryptoUtil from /utils/crypto Vue.use(CryptoUtil)4.2 组件中使用示例template div button clickhandleEncrypt加密数据/button /div /template script export default { methods: { handleEncrypt() { const key this.$store.state.cryptoKey // 从Vuex获取密钥 const encrypted this.$sm4.encrypt(敏感数据, key) console.log(加密结果:, encrypted) } } } /script5. 关键问题与解决方案5.1 密钥管理方案根据项目安全级别可选择前端硬编码仅适用于低安全要求场景通过接口动态获取推荐结合RSA非对称加密传输SM4密钥高安全要求5.2 常见报错处理错误信息原因分析解决方案Invalid key length密钥格式错误确保是32字符十六进制字符串Invalid iv lengthIV向量错误CBC模式需要16字节IVInput not a string输入数据类型错误检查inputEncoding参数5.3 性能优化技巧加密大文件时使用Web Worker避免阻塞UI多次加密相同数据可缓存加密结果使用base64输出比hex节省约1/3空间6. 安全增强实践6.1 防调试保护在vue.config.js中添加configureWebpack: { devtool: process.env.NODE_ENV production ? false : source-map }6.2 混淆加固建议配合webpack-obfuscator等工具const WebpackObfuscator require(webpack-obfuscator) module.exports { configureWebpack: { plugins: [ new WebpackObfuscator({ rotateStringArray: true }, [excluded_bundle_name.js]) ] } }7. 与后端联调要点7.1 Java端示例确保后端使用相同参数// Spring Boot示例 import org.bouncycastle.jce.provider.BouncyCastleProvider; import javax.crypto.Cipher; import javax.crypto.spec.SecretKeySpec; import javax.crypto.spec.IvParameterSpec; public class SM4Util { static { Security.addProvider(new BouncyCastleProvider()); } public static String encrypt(String content, String key, String iv) throws Exception { Cipher cipher Cipher.getInstance(SM4/CBC/PKCS5Padding, BC); SecretKeySpec keySpec new SecretKeySpec(key.getBytes(), SM4); IvParameterSpec ivSpec new IvParameterSpec(iv.getBytes()); cipher.init(Cipher.ENCRYPT_MODE, keySpec, ivSpec); byte[] encrypted cipher.doFinal(content.getBytes(StandardCharsets.UTF_8)); return Base64.getEncoder().encodeToString(encrypted); } }7.2 联调检查清单确认双方使用的模式ECB/CBC统一密钥和IV的生成规则对齐字符编码建议全链路UTF-8协商好输出格式hex/base648. 扩展应用场景8.1 加密URL参数export function encryptParams(params) { const key localStorage.getItem(sm4_key) return { data: this.$sm4.encrypt(JSON.stringify(params), key), timestamp: Date.now() } }8.2 本地存储加密Vue.prototype.$secureStorage { setItem(key, value) { const encrypted this.$sm4.encrypt(value, storageKey) localStorage.setItem(key, encrypted) }, getItem(key) { const encrypted localStorage.getItem(key) return encrypted ? this.$sm4.decrypt(encrypted, storageKey) : null } }在实际项目中使用时发现iOS Safari浏览器对localStorage的访问有特殊限制需要额外处理QuotaExceededError异常。建议对大于2MB的数据改用IndexedDB存储加密后的内容。