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

前言

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

前端主流加密方式

  • 对称加密

    对称加密使用相同的密钥来加密和解密数据。常见的对称加密算法包括 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.mzph.cn/news/132274.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

淘宝、天猫电商平台商品详情最低价skuid爬取、各类sku信息调取

淘宝、天猫电商平台商品详情最低价skuid爬取、各类sku信息调取

淘宝商品描述详细信息API接口是一个用于获取淘宝商品详细信息的API&#xff0c;通过它可以获取到商品的标题、价格、图片等信息。通过淘宝商品描述详细信息API接口&#xff0c;开发者可以方便地获取宝贝的相关信息&#xff0c;并将它们用于各种应用场景中。淘宝商品描述详细信息…
阅读更多...
FastAPI 库（Python 的 Web 框架）基本使用指南（一）

FastAPI 库（Python 的 Web 框架）基本使用指南（一）

FastAPI 概述 参考文档&#xff1a; 中文文档轻松上手Python的Web神器&#xff1a;FastAPI教程 介绍 FastAPI 是一个基于 Python 的现代 Web 框架&#xff0c;它具有快速构建高性能 API 的特点。 FastAPI 关键特性: 快速&#xff1a;可与 NodeJS 和 Go 并肩的极高性能&am…
阅读更多...
企业通配符SSL证书的特点

企业通配符SSL证书的特点

企业通配符SSL证书是一种数字证书&#xff0c;其可以用于保护多个企业网站&#xff0c;对网站传输信息进行加密服务。这种证书通常适用于拥有多个子域名或二级域名的企事业单位。今天就随SSL盾小编了解企业通配符SSL证书的相关信息。 1. 保护所有域名和子域名&#xff1a;企业通…
阅读更多...
Verilog刷题[hdlbits] ：Alwaysblock2

Verilog刷题[hdlbits] ：Alwaysblock2

题目&#xff1a;Alwaysblock2 For hardware synthesis, there are two types of always blocks that are relevant: 对于硬件综合&#xff0c;有两种相关的always块&#xff1a; Combinational: always () 组合型&#xff1a;always ()Clocked: always (posedge clk) 时钟型…
阅读更多...
网络层：控制平面

网络层：控制平面

路由选择算法 路由选择算法就是为了在端到端的数据传输中&#xff0c;选择路径上路由器的最好的路径。通常&#xff0c;一条好的路径指具有最低开销的路径。最低开销路径是指源和目的地之间具有最低开销的一条路。 根据集中式还是分散式来划分 集中式路由选择算法&#xff1a…
阅读更多...
Linux C++静态库动态库以及链接方式介绍

Linux C++静态库动态库以及链接方式介绍

在Linux系统中&#xff0c;C/C库分为静态库和动态库两种类型。下面是它们的基础介绍&#xff1a; 静态库&#xff08;.a文件&#xff09;&#xff1a;静态库是一种归档文件&#xff0c;其中包含了一堆可重用的目标文件&#xff0c;这些目标文件通常是C/C函数的实现。当静态库被…
阅读更多...
嵌入式系统中的FPGA

嵌入式系统中的FPGA

举个栗子 假设你有一台智能家居系统&#xff0c;其中的FPGA可以被类比为智能家居中的中央控制器。 智能家居系统&#xff1a; 定制家居逻辑&#xff1a; 你希望智能家居系统能够根据你的生活习惯、时间表和喜好自动控制灯光、温度、窗帘等设备。就像FPGA中可以根据需求重新配置…
阅读更多...
烟台海森大数据——数据驱动材料研发，本土化为安全护航

烟台海森大数据——数据驱动材料研发，本土化为安全护航

随着大数据时代的来临&#xff0c;人们的生产和生活&#xff0c;各方面都在发生着深刻的变化。作为与国计民生息息相关的材料行业&#xff0c;也在数据时代迎来了新的机遇与挑战。 新材料是我国重点推进的战略性新兴产业之一&#xff0c;对于支撑整个战略性新兴产业发展&#…
阅读更多...
vue + axios + mock

vue + axios + mock

参考来源&#xff1a;Vue mock.js模拟数据实现首页导航与左侧菜单功能_vue.js_AB教程网 记录步骤&#xff1a;在参考资料来源添加axios步骤 1、安装mock依赖 npm install mock -D //只在开发环境使用 下载完成后&#xff0c;项目文件package.json中的devDependencies就会加…
阅读更多...
1.2 HTML5

1.2 HTML5

一.HTML5 简介 1.什么是HTML5 HTML5是新一代的 HTML 标准&#xff0c;2014年10月由万维网联盟( W3C&#xff09;完成标准制定。官网地址: w3c提供:HTML StandardWHATWG提供: HTML Standard HTML5在狭义上是指新—代的 HTML 标准&#xff0c;在广义上是指:整个前端。 2.HTML…
阅读更多...
数据结构（四）--队列及面试常考的算法

数据结构（四）--队列及面试常考的算法

一、队列介绍 1、定义 与栈相似&#xff0c;队列是另一种顺序存储元素的线性数据结构。栈与队列的最大差别在于栈是LIFO&#xff08;后进先出&#xff09;&#xff0c;而队列是FIFO&#xff0c;即先进先出。 2、优缺点及使用场景 优点&#xff1a;先进先出&#xff08;FIFO&…
阅读更多...
Qt利用VCPKG和CMake和OpenCV和Tesseract实现中英文OCR

Qt利用VCPKG和CMake和OpenCV和Tesseract实现中英文OCR

文章目录 1. 开发平台2. 下载文件2.1 下载安装 OpenCV 库2.2 下载安装 Tesseract-OCR库2.3 下载训练好的语言包 3. CMakeLists.txt 内容4. Main.cpp4.1 中英文混合OCR 5. 在Qt Creator 中设置 CMake vcpkg5.1 在初始化配置文件里修改5.2 在构建配置里修改 说明&#xff1a;在Q…
阅读更多...
踩坑记录一

踩坑记录一

先呼自己两耳巴 临床采集的增强CT数据&#xff0c;有时候是同时采集了静脉期和动脉期。就会导致图像多一分如下&#xff1a; 但是勾画的时候&#xff0c;是以下面的期相进行标注的。所以在训练分割&#xff0c;对于这种案例&#xff0c;他识别到了在上面一个期相的目标位置&am…
阅读更多...
xilinx primitives(原语)

xilinx primitives(原语)

Xilinx的原语分为10类&#xff0c;包括&#xff1a;计算组件&#xff0c;IO端口组件&#xff0c;寄存器/锁存器&#xff0c;时钟组件&#xff0c;处理器组件&#xff0c;移位寄存器&#xff0c;配置和检测组件&#xff0c;RAM/ROM组件&#xff0c;Slice/CLB组件&#xff0c;G-t…
阅读更多...
百面深度学习-循环神经网络

百面深度学习-循环神经网络

循环神经网络 什么是循环神经网络&#xff1f; 循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;是一类用于处理序列数据的神经网络。你可以将它想象成一个机器&#xff0c;它不仅考虑当前的输入&#xff0c;还考虑之前接收过的输入。这使得它非…
阅读更多...
[Linux打怪升级之路]-信号的产生

[Linux打怪升级之路]-信号的产生

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、信号基础…
阅读更多...
Docker Stack部署应用详解+Tomcat项目部署详细实战

Docker Stack部署应用详解+Tomcat项目部署详细实战

Docker Stack 部署应用 概述 单机模式下&#xff0c;可以使用 Docker Compose 来编排多个服务。Docker Swarm 只能实现对单个服务的简单部署。而Docker Stack 只需对已有的 docker-compose.yml 配置文件稍加改造就可以完成 Docker 集群环境下的多服务编排。 stack是一组共享…
阅读更多...
专访HuggingFace CTO：开源崛起、创业故事和AI民主化丨智源独家

专访HuggingFace CTO：开源崛起、创业故事和AI民主化丨智源独家

导读 HuggingFace CTO Julien Chaumond认为&#xff0c;在大模型时代&#xff0c;AI民主化至关重要。随着大语言模型和复杂人工智能系统的崛起&#xff0c;持续提升AI技术的可及性有助于确保这些技术的获取和控制不集中在少数强大实体手中。技术民主化促进了机会均等&#xff0…
阅读更多...
CSV是什么

CSV是什么

CSV是逗号分隔值&#xff08;Comma-Separated Values&#xff09;的缩写&#xff0c;它是一种常见的文本文件格式&#xff0c;通常以纯文本形式存储表格数据。在CSV文件中&#xff0c;数据通常由逗号分隔&#xff0c;并且每行表示一个记录。这种格式广泛应用于电子表格和数据库…
阅读更多...
(四) Python Pandas入门

(四) Python Pandas入门

一、介绍 Pandas是Python中一个强大的数据处理库&#xff0c;它提供了许多功能强大的数据结构和数据分析工具。在本文中&#xff0c;我们将介绍Pandas的基本概念和如何使用它生成一个包含今天到未来20个工作日的日期列表的Excel文件。 Pandas提供了大量的数据结构和数据分析工…
阅读更多...
最新文章

Copyright @ 2022~2023