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

news2024/11/26 14:27:17

前言

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


前端主流加密方式

  • 对称加密

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

  • 非对称加密

    非对称加密使用一对密钥,即公钥和私钥。公钥用于加密数据,私钥用于解密数据。算法示例:常见的非对称加密算法包括 RSADSASM2

  • 散列加密

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

  • 混淆加密

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

总结

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

sm2 加密(非对称)

  • SM2 是一种非对称加密算法,使用公钥进行加密,私钥进行解密。
  • 椭圆曲线密码算法:SM2 基于椭圆曲线密码算法(Elliptic Curve CryptographyECC)实现。
  • 密钥长度: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; // 加密模式固定为1
  let publicKey =
    "你的sm2公钥"; // SM2公钥
  // 使用 SM2 加密算法对消息进行加密
  let encryptData = sm2.doEncrypt(msg, publicKey, cipherMode); // 加密结果
  return encryptData;
}

// SM2解密函数
function sm2Decrypt(msgString) {
  let msg = msgString;
  let cipherMode = 1; // 解密模式固定为1
  let 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是一种对称加密算法,使用相同的密钥进行加密和解密。
  • 块密码算法:SM4128 位(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.coloradmin.cn/o/1175790.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Nuxt】在 Nuxt3 中使用 Element Plus

安装 Element Plus 和图标库 pnpm add element-plus --save pnpm add element-plus/icons-vue安装 Nuxt Element Plus 模块 pnpm add element-plus/nuxt -D配置 Nuxt 项目 在 nuxt.config.ts 中配置 // https://nuxt.com/docs/api/configuration/nuxt-config export defaul…

聚观早报 |小米CarWith启动兼容测试;「天工」大模型开放

【聚观365】11月6日消息 小米CarWith启动兼容测试 「天工」大模型开放 邮政快递揽收超20亿件 华为Mate 60 Pro开启预约申购 VERTU持续探索前沿科技 小米CarWith启动兼容测试 小米CarWith是打造“人车家生态”中不可或缺的一环&#xff0c;在最新升级的2.0版本中&#xff…

VMware Ubuntu 共享文件夹

VMware Ubuntu 共享文件夹 flyfish 物理机配置 Network Adapter设置 此处设置为NAT Shared Folders设置 虚拟机配置 vmware-hgfsclient sudo vmhgfs-fuse .host:/ /mnt -o nonempty -o allow_other 或者 sudo vmhgfs-fuse .host:/ /mnt/ -o allow_other第一行命令是查看共…

算法题:203. 移除链表元素(递归法、设置虚拟头节点法等3种方法)Java实现创建链表与解析链表

1、算法思路 讲一下设置虚拟头节点的那个方法&#xff0c;设置一个新节点指向原来链表的头节点&#xff0c;这样我们就可以通过判断链表的当前节点的后继节点值是不是目标删除值&#xff0c;来判断是否删除这个后继节点了。如果不设置虚拟头节点&#xff0c;则需要将头节点和后…

网络层重要协议 --- IP协议

小王学习录 今日摘录IP数据报数据报首部IPv4的局限及解决方法 地址管理路由选择扩展&#xff1a;NAT和NAPT的结合使用 今日摘录 关山难越&#xff0c;谁悲失路之人。萍水相逢&#xff0c;尽是他乡之客。 网络层的职责是地址管理和路由选择&#xff0c;在网络层中最重要的协议…

程序员为啥要做副业(05)-业务解决方案缔造者

点击下方“JavaEdge”&#xff0c;选择“设为星标” 第一时间关注技术干货&#xff01; 免责声明~ 任何文章不要过度深思&#xff01; 万事万物都经不起审视&#xff0c;因为世上没有同样的成长环境&#xff0c;也没有同样的认知水平&#xff0c;更「没有适用于所有人的解决方案…

机器人控制——C++ HSM状态机基础知识

本章将向您介绍使用HSM的基本知识。为了简单起见&#xff0c;我们将在这里学习如何编写单层次&#xff08;也称为平面&#xff09;状态机&#xff0c;并在下一章中介绍层次状态机。 让我们从我们可以编写的最简单的状态机开始。 // simplest_state_machine.cpp#include "…

签名加密发送请求

本篇文章介绍下通过HMAC-SHA1加密验证&#xff0c;将加密之后得到的签名作为参数发送请求&#xff0c;假如咱们需要按照下列要求将参数加密之后传递&#xff1a; 咱们来逐步分析得到签名的步骤和最终发送请求需要携带的参数内容&#xff0c;本次实现是在node.js的环境下。 首先…

计算机系统

由计算机硬件系统和计算机软件系统组成的综合体 冯诺伊曼计算机 定义 以“存储程序”的概念为基础的各类计算机通称为冯诺伊曼机 特点 计算机由运算器、存储器、控制器、输入设备和输出设备五大部件组成指令和数据以同等地位存放于存储器内&#xff0c;并可按地址寻访指令和…

Python Faker批量生成测试数据

一、前言 在做自动化测试或压力测试时会需要大批量生成测试数据&#xff0c;简单的方式你可以写一个存储过程使用随机函数来生成记录&#xff0c;但这种生成数据看起来不够真实&#xff0c;其实有蛮多现成的工具可以完成这一任务。 二、Faker基本使用介绍 faker是一个生成伪…

Python零基础入门教程(非常详细)

目前python可以说是一门非常火爆的编程语言&#xff0c;应用范围也非常的广泛&#xff0c;工资也挺高&#xff0c;未来发展也极好。 Python究竟应该怎么学呢&#xff0c;我自己最初也是从零基础开始学习Python的&#xff0c;给大家分享Python的学习思路和方法。一味的买书看书…

从零开始搭建微服务(一)

构建项目父工程 添加公共核心模块 安装nacos 安装nacos nacos 文档地址&#xff1a; https://nacos.io/zh-cn/docs/what-is-nacos.html 本文使用版本2.2.2 下载地址&#xff1a;https://github.com/alibaba/nacos/archive/refs/tags/2.2.2.zip 使用nacos 我们下载是源代码 解…

轻松编写第一个油猴脚本

第一步&#xff1a;安装油猴 首先&#xff0c;我们需要安装油猴。油猴是一个免费的浏览器扩展&#xff0c;可让您在浏览器中运行脚本。 在 Chrome 浏览器中&#xff0c;可以通过以下步骤安装油猴&#xff1a; 在 Chrome 浏览器中打开 Chrome 网上应用店。搜索 "油猴&qu…

揭秘ChatGPT的智慧密码:向量数据库的神奇作用解析

2023年8月&#xff0c;亚马逊云科技推出了自己的向量引擎Amazon OpenSearch Serverless向量引擎&#xff0c;这被认为是其旗下大语言模型Amazon Titan超越ChatGPT的一个重要契机。 那么&#xff0c;这个Amazon OpenSearch Serverless向量引擎有何厉害之处&#xff1f;为什么能…

Elasticsearch:ES|QL 中的数据丰富

在之前的文章 “Elasticsearch&#xff1a;ES|QL 查询语言简介”&#xff0c;我有介绍 ES|QL 的 ENRICH 处理命令。ES|QL ENRICH 处理命令在查询时将来自一个或多个源索引的数据与 Elasticsearch 丰富索引中找到的字段值组合相结合。这个有点类似于关系数据库查询中所使用的 jo…

数据治理概念篇:(一)相关术语与名词

数据治理内容众多&#xff0c;其中与数据治理相关名词和术语也是多不胜数。下面记录一下常见的数据治理相关名词。 1.数据仓库 1.1.名词解释 Bill Inmon 将数据仓库定义为&#xff1a;“面向主题的、整合的、随时间变化的、相对稳定的支持管理决策的数据集合”。 Ralph Kimbal…

【python】爬取斗鱼直播照片保存到本地目录

一、导入必要的模块&#xff1a; 这篇博客将介绍如何使用Python编写一个爬虫程序&#xff0c;从斗鱼直播网站上获取图片信息并保存到本地。我们将使用requests模块发送HTTP请求和接收响应&#xff0c;以及os模块处理文件和目录操作。 如果出现模块报错 进入控制台输入&#xff…

APP开发:用途与未来前景|软件定制开发|网站小程序建设

APP开发&#xff1a;用途与未来前景|软件定制开发|网站小程序建设 APP开发已成为现代科技趋势的一部分&#xff0c;无论是日常生活还是商业领域&#xff0c;都有它的身影。通过开发APP&#xff0c;我们可以将想法、功能和内容转化为直观、易用的移动设备应用程序&#xff0c;满…

【算法| 差分 No.1】AcWing 797. 差分 AcWing 798. 差分矩阵

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望对大家有所帮…

Spring中@Async的使用技巧

引言 在Java开发中&#xff0c;我们常常会遇到需要执行耗时操作的场景&#xff0c;例如文件上传、网络请求等。为了提高系统的响应速度和并发能力&#xff0c;我们可以使用异步方法来处理这些任务。本文将介绍如何在Java中使用异步方法&#xff0c;并探讨其中的一些注意事项。…