前端加密、解密

本文涉及的产品
密钥管理服务KMS,1000个密钥,100个凭据,1个月
简介: 前端加密、解密

1.前言:


像这种功能,不必追求底层怎么实现,以我而言,最好是2分钟做完加密最好,结果今天被“百度”来的坑了一把,加密还正常,解密直接成了空白字符。简直误人子弟。于是我翻了翻以前项目写的,在现有的项目里运行成功并完成功能,特此整理。

2.应用场景举例


今天做了一个功能,用户在表单里输入密码,加密后发给后端,点击编辑时,后端再将之前加密的数据原封不动给我,我解密后供用户编辑,最后再将编辑后的密码加密传给后端。

3.CryptoJS加密解密


第一步,下载插件


$ npm install --save js-base64

第二步,在需要的文件中引入


import CryptoJS from "crypto-js";//在需要的文件中引入

第三步,加密


// this.data:需要加密的数据 ;secretkey:密钥,可以自己起;cipherText:变量接收
let cipherText = CryptoJS.AES.encrypt(this.data, "secretkey").toString();

第四步,解密


1. // this.data:要解密的数据;secretkey:密钥,要和上面加密时的一致,相当于暗号
2. CryptoJS.AES.decrypt(this.data, "secretkey").toString(CryptoJS.enc.Utf8)

小结:


推荐使用这个方式,下面讲的base64有两个感觉,第一个是加密的深度不如这个,再就是遇上一些特殊字符容易报错,纯实测总结…然而,base64更简单一些,哈哈

4.base64 加密解密


第一步,下载


$ npm install --save js-base64

第二步,引入,在你需要使用的文件中引入


1. import { Base64 } from 'js-base64';
2. import { encode, decode } from 'js-base64';

第三步,加密


var jiami = encode(str); // 加密,str是你要加密的数据

第四步,解密


var jiemi= decode(data); // 解密,data是你要解密的数据

小结:


这个使用极其简单,但是有时候会遇到错误,比如一些特殊字符,我之前用了一组纯数字,实测报错了,但是他还有其他的好处,我之前用它给二进制的音频文件加密还是很好用的,你还是酌情选择吧,不过这两种方案都是很推荐的方式,他们最大的好处就是可以解密,其他的像md5,rsa都只能加密不能解密,当然他们的加密效果更强,根据项目和需求来选择,反正殊途同归,都基本上是这个套路。如有问题欢迎评论区讨论。

相关文章
|
2月前
|
存储 监控 前端开发
如何实现前端框架数据驱动方式的数据加密存储?
实现前端框架数据驱动方式的数据加密存储需要综合考虑多个因素,包括加密算法的选择、密钥管理、传输安全、服务器端处理等。通过合理的设计和实施,能够有效提高数据的安全性,保护用户的隐私和敏感信息。但需要注意的是,前端加密存储不能完全替代后端的安全措施,后端的安全防护仍然是不可或缺的。
48 3
|
2月前
|
存储 前端开发 安全
如何确保前端框架数据驱动方式的数据加密存储的兼容性?
确保前端框架数据驱动方式的数据加密存储的兼容性需要综合考虑多个因素,通过充分的评估、测试、关注和更新,以及与其他技术的协调配合,来提高兼容性的可靠性,为用户提供稳定和安全的使用体验。
40 2
|
2月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
175 2
|
2月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
417 0
|
5月前
|
JavaScript 前端开发 安全
VUE——APP,后端,前端三端AES加密解密
VUE——APP,后端,前端三端AES加密解密
191 0
|
6月前
|
前端开发 安全 JavaScript
学习前端加密
【7月更文挑战第3天】前端加密保护数据安全,防止传输中被截获,提升用户体验。HTTPS基础保障,JavaScript库如CryptoJS辅助加密,Web Crypto API提供原生加密功能。但前端加密非万能,需结合后端措施,注意算法选择、密钥管理。
77 2
|
7月前
|
算法 前端开发 安全
面试官:前端加密怎么做?这,这,这不是后端的活儿吗?
前端加密技术概述: 前端加密主要用来保护数据在传输过程中的安全,但因浏览器环境开放性,仅能提供有限的安全性,真正安全策略需结合服务器端加密和安全协议。
|
16天前
|
安全 算法 网络协议
【网络原理】——图解HTTPS如何加密(通俗简单易懂)
HTTPS加密过程,明文,密文,密钥,对称加密,非对称加密,公钥和私钥,证书加密
|
1月前
|
存储 SQL 安全
网络安全与信息安全:关于网络安全漏洞、加密技术、安全意识等方面的知识分享
随着互联网的普及,网络安全问题日益突出。本文将介绍网络安全的重要性,分析常见的网络安全漏洞及其危害,探讨加密技术在保障网络安全中的作用,并强调提高安全意识的必要性。通过本文的学习,读者将了解网络安全的基本概念和应对策略,提升个人和组织的网络安全防护能力。
|
1月前
|
SQL 安全 网络安全
网络安全与信息安全:关于网络安全漏洞、加密技术、安全意识等方面的知识分享
随着互联网的普及,网络安全问题日益突出。本文将从网络安全漏洞、加密技术和安全意识三个方面进行探讨,旨在提高读者对网络安全的认识和防范能力。通过分析常见的网络安全漏洞,介绍加密技术的基本原理和应用,以及强调安全意识的重要性,帮助读者更好地保护自己的网络信息安全。
52 10