前端加密、解密

本文涉及的产品
密钥管理服务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都只能加密不能解密,当然他们的加密效果更强,根据项目和需求来选择,反正殊途同归,都基本上是这个套路。如有问题欢迎评论区讨论。

相关文章
|
5天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
8天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
3月前
|
JavaScript 前端开发 安全
VUE——APP,后端,前端三端AES加密解密
VUE——APP,后端,前端三端AES加密解密
161 0
|
4月前
|
前端开发 安全 JavaScript
学习前端加密
【7月更文挑战第3天】前端加密保护数据安全,防止传输中被截获,提升用户体验。HTTPS基础保障,JavaScript库如CryptoJS辅助加密,Web Crypto API提供原生加密功能。但前端加密非万能,需结合后端措施,注意算法选择、密钥管理。
67 2
|
5月前
|
算法 前端开发 安全
面试官:前端加密怎么做?这,这,这不是后端的活儿吗?
前端加密技术概述: 前端加密主要用来保护数据在传输过程中的安全,但因浏览器环境开放性,仅能提供有限的安全性,真正安全策略需结合服务器端加密和安全协议。
|
6月前
|
存储 前端开发 安全
常见的前端加密方式都有哪些?
【4月更文挑战第19天】本文介绍了前端加密的四种常见方法:哈希加密、对称加密、非对称加密和混合加密。哈希加密适用于密码存储,但存在哈希碰撞风险;对称加密速度快,适合安全通信;非对称加密更安全,但速度慢;混合加密结合两者优点,常用于 SSL/TLS。前端加密是数据安全的重要一环,但需与后端安全措施配合以构建全面防护体系。示例代码展示了 JavaScript 中的 SHA-256、AES 和 RSA 加密。
698 6
|
6月前
|
存储 前端开发 算法
常见的前端加密方式有哪些?运用场景有哪些?
【4月更文挑战第12天】前端加密技术包括对称加密(如AES、DES)、非对称加密(如RSA)和Hash算法(如MD5、SHA-1)。对称加密用于本地数据加密、HTTPS通信,非对称加密常用于用户登录认证,Hash算法适用于数据完整性校验和密码存储。应用场景包括用户登录认证、敏感数据传输、文件加密和支付安全。加密技术结合访问控制、安全审计等措施,能提升数据和用户信息安全。
814 9
|
5天前
|
SQL 安全 算法
揭秘网络安全:漏洞、加密与安全意识的三重奏
【10月更文挑战第39天】在数字时代的交响乐中,网络安全扮演着不可或缺的角色。本文旨在通过浅显易懂的语言,揭示网络安全的三大核心要素:网络漏洞、加密技术以及安全意识。我们将探索这些元素如何相互交织,共同维护我们的数字安全。从初学者到资深专家,每个人都能从中获得宝贵的知识和启示。
|
5天前
|
存储 SQL 安全
网络安全与信息安全:关于网络安全漏洞、加密技术、安全意识等方面的知识分享
【10月更文挑战第39天】在数字化时代,网络安全和信息安全成为了我们生活中不可或缺的一部分。本文将介绍网络安全漏洞、加密技术和安全意识等方面的内容,帮助读者更好地了解网络安全的重要性,并提供一些实用的技巧和方法来保护自己的信息安全。
15 2
|
6天前
|
安全 算法 网络安全
网络安全的盾牌与利剑:漏洞防御与加密技术的双刃舞
【10月更文挑战第37天】在数字世界的海洋里,网络安全是航船的锚,保护我们的数据不受风暴侵袭。本文将深入浅出地探讨网络安全的两大支柱——漏洞防御和加密技术。我们将从网络安全的基本概念出发,逐步深入到漏洞的类型、检测方法以及防御策略。同时,我们也将探索加密技术的原理和应用,如何通过这一技术保护信息的完整性和私密性。最后,我们将讨论提升个人及组织安全意识的重要性,以及如何构建一个安全的网络环境。这不仅是技术人员的战斗,每个人都是自己信息安全的第一道防线。让我们一起扬帆起航,探索网络安全的世界,学习如何成为自己数据的守护者。