目次媒介相信各人在工作或口试中经常遇到必要加密的功能，无论是 web 背景照旧小程序，都经常存在加解密传输，签名防窜改等机制，会使很多渗出人员没有办法直接对参数的值举行更改，大大增长了攻击者的攻击本钱。下面我介绍前端6种常用的加密怎样使用，如有不敷之处，接待各人补充。 一、6种常用加密方案1.Base64加密简介Base64顾名思义，就是基于64个可打印字符来表现二进制数据的一种方法，「注意它并不是一种加密算法」。对于64个打印字符，我们只必要6个二进制位就可以完全表现了。那么我们怎样利用8个二进制位来表现只必要6个二进制位就可以完全表现的可打印字符呢？由于2的6次方等于64，以是我们可以将每6个位元为一个单位，对应某个可打印字符。三个字节有24个位元，对应于4个Base64单位，即3个字节必要用4个可打印字符来表现。 怎样使用原生加解密 [code] const btoa = window.btoa('hello, my name is FuChaoyang ') // 编码 console.log('加密后',btoa) const atob = window.atob('aGVsbG8sIG15IG5hbWUgaXMgRnVDaGFveWFuZyA') // 解码 console.log('解密后',atob)[/code]
base64插件 安装： [code]npm install --save js-base64[/code]比如vue3中引入使用，其他框架大同小异，可做参考 [code]<script lang="ts"> import { defineComponent } from 'vue'; import { Base64 } from 'js-base64'; export default defineComponent({ name: 'Test', setup() { const encode = Base64.encode('hello, my name is FuChaoyang'); // 编码 console.log('插件加密后', encode); const decode = Base64.decode('aGVsbG8sIG15IG5hbWUgaXMgRnVDaGFveWFuZyA'); // 解码 console.log('插件解密后', decode); } }); </script>[/code]
总结上风：
缺点：
2.MD5加密（不可逆）简介MD5是一种单向哈希算法，即将任意长度的“消息”经过哈希运算，生成一个128位的“指纹”。 使用MD5加密可以将原始的字符串转化为不可逆的密文，从而保证数据在传输中不被窜改，进步安全性。在前端中，我们可以通过JS库调用md5加密函数举行字符串加密，以保护用户信息。 怎样使用安装 [code]npm install js-md5 -s [/code]npm地址：https://www.npmjs.com/package/js-md5 比如vue3中引入使用，其他框架大同小异，可做参考 [code]<script lang="ts"> import { defineComponent } from 'vue'; import { md5 } from 'js-md5'; // 引入 export default defineComponent({ name: 'Test', setup() { console.log('md5加密', md5('hello, my name is FuChaoyang')); } }); </script>[/code]
使用技巧加盐 为了加强加密的安全性，我们可以在原始字符串的底子上再加上一段随机的字符串，这个字符串就是“盐”。 比如如下加盐加密： [code]<script lang="ts"> import { defineComponent } from 'vue'; import { md5 } from 'js-md5'; // 引入 export default defineComponent({ name: 'Test', setup() { console.log('md5加密', md5('hello, my name is FuChaoyang')); const salt = 'AbC$123'; // 界说一个随机的盐值 console.log('加盐后md5加密', md5('hello, my name is FuChaoyang' + salt)); } }); </script>[/code]
将"hello, my name is FuChaoyang"加上随机字符串"AbC$123"后的结果。 通过加盐可以低落被破解的风险，加强应用的安全性。 多次加密 为了进步加密的强度，我们可以将加密结果再次举行md5加密，多次加密后的结果更加难以破解。 比如如下多次加密： [code]<script lang="ts"> import { defineComponent } from 'vue'; import { md5 } from 'js-md5'; // 引入 export default defineComponent({ name: 'Test', setup() { // MD5普通加密 console.log('md5加密', md5('hello, my name is FuChaoyang')); // MD5加盐加密 const salt = 'AbC$123'; // 界说一个随机的盐值 console.log('加盐后md5加密', md5('hello, my name is FuChaoyang' + salt)); // MD5多次加密 console.log('md5多次加密', md5(md5('hello, my name is FuChaoyang'))); } }); </script>[/code]
即对md5两次加密后的结果 。 注意点1. 不要使用固定密钥 不要使用固定的密钥举行加密，否则容易被破解。应该采用随机密钥或者动态生成密钥举行加密。 2. 不要将加密算法公开 不要将加密算法公开，否则大概会被攻击者破解。应该将加密算法保密，仅在必要的场合使用。 3. 不要只依赖前端加密 纵然在前端举行加密，也应该在后端举行加密验证，以加强应用的安全性。 使用场景最常见的网站页面登录password加密，版权验证，文件上传比较。 3.sha256加密简介SHA256是SHA-2下细分出的一种算法SHA-2，名称来自于安全散列算法2（英语：Secure Hash Algorithm 2）的缩写，一种暗码散列函数算法标准（哈希算法），由美国国家安全局研发，属于SHA算法之一，是SHA-1的后继者。 SHA-2下又可再分为六个差别的算法标准，包括了：SHA-224、SHA-256、SHA-384、SHA-512、SHA-512/224、SHA-512/256。这些变体除了生成择要的长度 、循环运行的次数等一些微小差别外，算法的根本布局是一致的。对于任意长度的消息，SHA256都会产生一个256bit长的哈希值，称作消息择要。这个择要相当于是个长度为32个字节的数组，通常用一个长度为64的十六进制字符串来表现。 怎样使用安装 [code]npm install crypto-js --save[/code]npm地址：https://www.npmjs.com/package/crypto-js 比如vue3中引入使用，其他框架大同小异，可做参考 [code]<script lang="ts"> import { defineComponent } from 'vue'; import sha256 from 'crypto-js/sha256'; export default defineComponent({ name: 'Test', setup() { // sha256多次加密 console.log('sha256加密后', sha256('hello, my name is FuChaoyang')); } }); </script>[/code]
特点： 单向加密，不可解密，同明文，同密文。 使用场景网站验证暗码，为了保证安全，不会储存明文暗码，而是直接储存 hash。 4.sha1加密（相比于MD5 安全性高，但是 速率慢）简介SHA-1是一种数据加密算法，该算法的思想是接收一段明文，然后以一种不可逆的方式将它转换成一段（通常更小）密文，也可以简朴的明白为取一串输入码（称为预映射或信息），并把它们转化为长度较短、位数固定的输出序列即散列值（也称为信息择要或信息认证代码）的过程。 怎样使用sha1的加密和sha256，AES用的函数库都可以是crypto-js，因此我们重要装了crypto-js，这三个加密方式都可以引入使用，当然你也可以用npm上单独依赖库，这里只用crypto-js为例， 比如vue3中引入使用，其他框架大同小异，可做参考 [code]<script lang="ts"> import { defineComponent } from 'vue'; import sha1 from 'crypto-js/sha1'; export default defineComponent({ name: 'Test', setup() { // sha1加密 console.log('sha1加密后', sha1('hello, my name is FuChaoyang')); } }); </script>[/code]
使用场景用户暗码校验比较，文件的完成性比较，文件上传，版权验证。 5.AES加密简介AES是一种对称加密算法，全称为“高级加密标准”（Advanced Encryption Standard）。它是一个区块加密算法，适用于大多数应用场景，包括加密息争密，还可以在差别的平台和设备之间举行加密息争密操纵，AES加密算法支持多种加密模式。 怎样使用照旧用crypto-js为例， 比如vue3中引入使用，其他框架大同小异，可做参考 [code]<script lang="ts"> import { defineComponent } from 'vue'; import CryptoJS from 'crypto-js'; export default defineComponent({ name: 'Test', setup() { const key = CryptoJS.enc.Utf8.parse('123321'); // 密钥 后端提供 const iv = CryptoJS.enc.Utf8.parse(''); // 偏移量 /** * AES加密 ：字符串 key iv 返回base64 */ const Encrypt = (word: any)=> { const srcs = CryptoJS.enc.Utf8.parse(word); const encrypted = CryptoJS.AES.encrypt(srcs, key, { iv, mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }); return CryptoJS.enc.Base64.stringify(encrypted.ciphertext); }; ` /** * AES 解密 ：字符串 key iv 返回base64 * */`; const Decrypt = (word: any)=> { const base64 = CryptoJS.enc.Base64.parse(word); const src = CryptoJS.enc.Base64.stringify(base64); const decrypt = CryptoJS.AES.decrypt(src, key, { iv, mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }); return CryptoJS.enc.Utf8.stringify(decrypt); }; console.log('AES加密后', Encrypt('wo shi fuzhaoyang')); console.log('AES解密后', Decrypt(Encrypt('wo shi fuzhaoyang'))); } }); </script>[/code]涉及必要后端秘钥偏移量设置，这里不做结果展示。 使用场景最常见的页面签名。 6.字符串的编码息争码escape编码 unescape解码[code]<script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Test', setup() { let str = '富朝阳的前端博客'; let newStr = escape(str); console.log('字符串：', str); console.log('加密：', newStr); let newStr2 = unescape(newStr); console.log('解密：', newStr2); } }); </script>[/code]
注意点：对于汉字，数字不适用。 总结到此这篇关于前端数据加密方式的常用6种使用的文章就介绍到这了,更多相干前端数据加密方式内容请搜索脚本之家以前的文章或继续欣赏下面的相干文章渴望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/javascript/328634k0v.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 09:26 , Processed in 0.035681 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
