前端数据加解密：保护敏感信息的关键

news/2024/11/30 0:40:21/

前言

如今，数据安全和隐私保护变得至关重要。本文旨在引领大家探索前端数据加密与解密的基本概念，并介绍常用的加密算法，让大家深入了解数据加解密的世界，探究其背后的原理、最佳实践和常见应用场景。

前端主流加密方式

  • 对称加密

    对称加密使用相同的密钥来加密和解密数据。常见的对称加密算法包括 AES（高级加密标准）、DES（数据加密标准）和 3DES。

  • 非对称加密

    非对称加密使用一对密钥，即公钥和私钥。公钥用于加密数据，私钥用于解密数据。算法示例：常见的非对称加密算法包括 RSA、DSA 和 SM2。

  • 散列加密

    散列加密是用于创建数据的固定长度哈希值的过程。哈希值通常是不可逆的。算法示例：常见的散列算法包括 SHA-256、MD5 和 SHA-1。

  • 混淆加密

    混淆加密是通过混淆代码或者加入噪音的方式来增强安全性，常见的方式有代码混淆、字符替换等。不是一种加密算法。

总结

  • 对称加密使用相同的密钥进行加密和解密，适用于快速加密和解密大量数据。
  • 非对称加密使用一对密钥，公钥用于加密，私钥用于解密，适用于安全通信和数字签名。
  • 散列加密用于生成数据的固定长度哈希值，通常不可逆，用于数据完整性验证。
  • 混淆加密是一种用于隐藏代码或数据的技术，不是标准的加密方法，常用于软件保护。

sm2 加密（非对称）

  • SM2 是一种非对称加密算法，使用公钥进行加密，私钥进行解密。
  • 椭圆曲线密码算法：SM2 基于椭圆曲线密码算法（Elliptic Curve Cryptography，ECC）实现。
  • 密钥长度：SM2 的密钥长度为 256 位（32字节）。
  • 安全性：SM2 具有较高的安全性，适用于数字签名、密钥交换、身份认证等场景。
  • 应用场景：SM2 广泛应用于数字证书、电子签名、安全通信等领域。

miniprogram-sm-crypto

miniprogram-sm-crypto 是专门为微信小程序环境开发的国密加密库。它被设计用于在微信小程序中进行加密操作。『官网地址』

安装

npm install miniprogram-sm-crypto --save

获取公私钥

const sm2 = require("miniprogram-sm-crypto").sm2;const keyPair = sm2.generateKeyPairHex();const publicKey = keyPair.publicKey;
const privateKey = keyPair.privateKey;console.log("公钥:", publicKey);
console.log("私钥:", privateKey);

打印结果

在这里插入图片描述

实例

封装文件

// 引入 miniprogram-sm-crypto 库中的 SM2 模块
const sm2 = require("miniprogram-sm-crypto").sm2;// SM2加密函数
function sm2Encrypt(msgString) {let msg = msgString;// 检查传入的消息是否为字符串，如果不是字符串则转换为 JSON 字符串if (typeof msgString !== "string") {msg = JSON.stringify(msgString);}let cipherMode = 1; // 加密模式固定为1let publicKey ="你的sm2公钥"; // SM2公钥// 使用 SM2 加密算法对消息进行加密let encryptData = sm2.doEncrypt(msg, publicKey, cipherMode); // 加密结果return encryptData;
}// SM2解密函数
function sm2Decrypt(msgString) {let msg = msgString;let cipherMode = 1; // 解密模式固定为1let privateKey = "你的sm2私钥"; // SM2私钥// 使用 SM2 解密算法对消息进行解密let decryptData = sm2.doDecrypt(msg, privateKey, cipherMode); // 解密结果return decryptData;
}// 导出加密和解密函数
module.exports = {sm2Encrypt,sm2Decrypt,
};

使用文件

const {sm2Encrypt,sm2Decrypt} = require('../../utils/index');//引入加密模块onLoad(){// 加密数据const originalData = {name: 'Alice',age: 30};const encryptedData = sm2Encrypt(originalData);// 解密数据const decryptedData = sm2Decrypt(encryptedData);console.log('加密后的数据:', encryptedData);console.log('解密后的数据:', JSON.parse(decryptedData));
}

打印结果

在这里插入图片描述

sm-crypto

sm-crypto 是适用于 Node.js 环境的国密加密库。它可以在 Node.js 中使用，但不适用于浏览器或微信小程序环境。『官网地址』

安装

npm install --save sm-crypto

获取公私钥

const sm2 = require('sm-crypto').sm2;let keypair = sm2.generateKeyPairHex();
let publicKey = keypair.publicKey; // 公钥
let privateKey = keypair.privateKey; // 私钥console.log("公钥: ", publicKey);
console.log("私钥: ", privateKey);

打印结果

在这里插入图片描述

实例

封装文件

import smCrypto from 'sm-crypto';
const sm2 = require('sm-crypto').sm2;// 生成密钥对
let keypair = sm2.generateKeyPairHex();
let publicKey = keypair.publicKey; // 公钥
let privateKey = keypair.privateKey; // 私钥export default {// 使用公钥加密数据encrypt(data) {try {return smCrypto.sm2.doEncrypt(data, publicKey, 1);} catch (error) {console.error("Encryption error: " + error.message);return null;}},// 使用私钥解密数据decrypt(encryptedData) {try {return smCrypto.sm2.doDecrypt(encryptedData, privateKey, 1);} catch (error) {console.error("Decryption error: " + error.message);return null;}},// 使用私钥对数据进行签名sign(data) {try {return smCrypto.sm2.doSignature(data, privateKey);} catch (error) {console.error("Signature error: " + error.message);return null;}},// 使用公钥验证数据的签名verify(data, signature) {try {return smCrypto.sm2.doVerifySignature(data, signature, publicKey);} catch (error) {console.error("Signature verification error: " + error.message);return false;}},// 计算数据的哈希值hash(data) {try {return smCrypto.sm3(data);} catch (error) {console.error("Hash calculation error: " + error.message);return null;}},// 使用公钥加密 JSON 对象encryptObject(data) {try {const dataStr = JSON.stringify(data);const encryptedData = smCrypto.sm2.doEncrypt(dataStr, publicKey, 1);return encryptedData;} catch (error) {console.error("Object encryption error: " + error.message);return null;}},// 使用私钥解密加密的 JSON 对象decryptObject(encryptedData) {try {const decryptedDataStr = smCrypto.sm2.doDecrypt(encryptedData, privateKey, 1);const decryptedData = JSON.parse(decryptedDataStr);return decryptedData;} catch (error) {console.error("Object decryption error: " + error.message);return null;}}
};

main.js 文件

import smCrypto from './utils/smCrypto';
Vue.prototype.$smCrypto = smCrypto;

任意使用文件

mounted() {// 加密对象const originalData = { name: "John", age: 30 };const encryptedData = this.$smCrypto.encryptObject(originalData);console.log("加密后的对象:", encryptedData);// 解密对象const decryptedData = this.$smCrypto.decryptObject(encryptedData);console.log("解密后的对象:", decryptedData);
},

打印结果

在这里插入图片描述

04补位问题

在 SM2 算法中，对于加密的数据，需要进行 04 补位，以确保数据的长度符合 SM2 算法的要求。但上面我们使用的是 sm-crypto 库，该库已经封装了 04 补位的功能，所以就不需要手动进行 04 补位操作。当调用 smCrypto.sm2.doEncrypt 方法时，该方法会自动进行 04 补位操作。同样，当调用 smCrypto.sm2.doDecrypt 方法时，该方法也会自动去除 04 补位。

sm4 加密（对称）

  • SM4是一种对称加密算法，使用相同的密钥进行加密和解密。
  • 块密码算法：SM4 以 128 位（16字节）的分组大小进行加密，对每个分组进行独立的加密操作。
  • 密钥长度：SM4 的密钥长度为 128 位（16字节）。
  • 加密速度：SM4 具有较高的加密速度，适用于大量数据的加密和解密操作。
  • 应用场景：SM4 广泛应用于数据加密、网络通信、存储介质加密等领域。

实例

封装文件

// 导入'miniprogram-sm-crypto'包中的sm4模块
const sm4 = require('miniprogram-sm-crypto').sm4;// 以十六进制格式定义加密密钥
const hexKey = "yuorpasword";// 使用TextEncoder将十六进制密钥转换为字节数组
const keyBytes = new TextEncoder().encode(hexKey);// 使用SM4算法的加密函数
function sm4Encrypt(text) {// 使用指定的参数使用SM4算法对文本进行加密const cipherText = sm4.encrypt(text, keyBytes, 'ecb', 'base64', '1234567891011121');return cipherText;
}// 使用SM4算法的解密函数
function sm4Decrypt(text) {// 使用指定的参数使用SM4算法对文本进行解密const decryptedText = sm4.decrypt(text, keyBytes, 'ecb', 'base64', '1234567891011121');return decryptedText;
}// 导出加密和解密函数以供外部使用
module.exports = {sm4Encrypt,sm4Decrypt
};

使用文件

const plaintext = "Hello, World!";
const encryptedText = util.sm4Encrypt(plaintext);
console.log("加密后的文本：", encryptedText);
const decryptedText = util.sm4Decrypt(encryptedText);
console.log("解密后的文本：", decryptedText);

打印结果

在这里插入图片描述

MD5 加密（不可逆）

MD5 是一种单向哈希算法，即将任意长度的“消息”经过哈希运算，生成一个 128 位的“指纹”。使用 MD5 加密可以将原始的字符串转化为不可逆的密文，从而保证数据在传输中不被篡改，提高安全性。在前端中，我们可以通过 JS 库调用 md5 加密函数进行字符串加密，以保护用户信息。

安装

npm install --save js-md5

1. 常规使用

<script>
import md5 from "js-md5";
export default {mounted() {const hashedText = md5("123456789");console.log("加密后:", hashedText);},
};
</script>

2. 加盐使用

为了增强加密的安全性，我们可以在原始字符串的基础上再加上一段随机的字符串，这个字符串就是“盐”。

<script>
import md5 from "js-md5";
export default {mounted() {const hashedText = md5("123456789");console.log("加密后:", "hello world" + hashedText);},
};
</script>

3. 多次加密使用

为了提高加密的强度，我们可以将加密结果再次进行 md5 加密，多次加密后的结果更加难以破解。

<script>
import md5 from "js-md5";
export default {mounted() {const hashedText = md5(md5("123456789"));console.log("加密后:", hashedText);},
};
</script>

md5 使用注意事项

  • 不要使用固定的密钥进行加密，否则容易被破解。应该采用随机密钥或者动态生成密钥进行加密。
  • 不要将加密算法公开，否则可能会被攻击者破解。应该将加密算法保密，仅在需要的场合使用。
  • 即使在前端进行加密，也应该在后端进行加密验证，以增强应用的安全性。

http://www.ppmy.cn/news/1201181.html

相关文章

二叉树的最大深度（C++解法）

二叉树的最大深度（C++解法）

题目 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1a; 输入&#xff1a;root [1,null,2…
阅读更多...
idea使用lombok编译问题

idea使用lombok编译问题

idea编译报错问题如下&#xff1a; java: You arent using a compiler supported by lombok, so lombok will not work and has been disabled.Your processor is: com.sun.proxy.$Proxy26Lombok supports: OpenJDK javac, ECJ解决方案&#xff1a;在idea配置中File->Setti…
阅读更多...
发布管理工作流程介绍

发布管理工作流程介绍

对于 IT 团队来说&#xff0c;管理涉及多个角色的发布是一项具有挑战性的任务。由于交付承诺遵守时间和准确性&#xff0c;因此发布管理在软件交付过程中发挥着至关重要的作用。对于 IT 团队来说&#xff0c;发布管理是一个复杂的过程。 通常&#xff0c;发布经理必须执行两项…
阅读更多...
蓝鹏测控平台软件 智能制造生产线的大脑

蓝鹏测控平台软件 智能制造生产线的大脑

测控软件平台&#xff0c;是由包括底层驱动程序、通讯协议等&#xff0c;集数据采集、自动反馈控制、信息分析以及多种工程应用于一体的一种电子信息处理平台。 蓝鹏测控软件平台目前支持各种文本标签 、数字标签&#xff1b;支持趋势图、波动图、缺陷图及统计图表。多端口实现…
阅读更多...
【数据库技术】金管局计算机岗位——数据仓库（⭐⭐⭐⭐）

【数据库技术】金管局计算机岗位——数据仓库（⭐⭐⭐⭐）

数据库技术 数据仓库数据仓库的定义数据仓库的作用数据仓库的特点(⭐⭐⭐⭐)数据仓库的主要功能(⭐⭐⭐⭐)OLTP&#xff1a;联机事务处理(⭐⭐⭐⭐⭐)OLAP&#xff1a;联机分析处理(⭐⭐⭐⭐⭐)OLAP的基本多维分析操作(⭐⭐⭐⭐⭐) 数据仓库与数据库的区别(⭐⭐⭐)数据仓库的三…
阅读更多...
Java中各种数据格式-json/latex/obo/rdf/ turtle/owl/xml介绍对比示例加使用介绍

Java中各种数据格式-json/latex/obo/rdf/ turtle/owl/xml介绍对比示例加使用介绍

一、数据格式类型 这些文件名称似乎包含了不同的数据格式扩展名&#xff0c;如.json, .latex, .obo, .owl, .rdf, .turtle, 和 .xml。以下是对这些数据格式的简要解释和讲解&#xff1a; JSON (.json): JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级数…
阅读更多...
245：vue+openlayers 利用canvas绘制边线纹路

245：vue+openlayers 利用canvas绘制边线纹路

第245个 点击查看专栏目录 本示例的目的是介绍如何在vue+openlayers项目中利用canvas绘制边线纹路。思路就是将stroke渲染通过canvas设定的pattern模式。 直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码（共170行）专…
阅读更多...
k8s提交spark应用消费kafka数据写入elasticsearch7

k8s提交spark应用消费kafka数据写入elasticsearch7

一、k8s集群环境 k8s 1.23版本&#xff0c;三个节点&#xff0c;容器运行时使用docker。 spark版本时3.3.3 k8s部署单节点的zookeeper、kafka、elasticsearch7 二、spark源码 https://download.csdn.net/download/TT1024167802/88509398 命令行提交方式 /opt/module/spark…
阅读更多...
最新文章

Copyright @ 2022~2023