前端常用6种数据加密方式的使用（最详解）

前言

相信大家在工作或面试中经常遇到需要加密的功能，无论是 web 后台还是小程序，都常常存在加解密传输，签名防篡改等机制，会使很多渗透人员没有办法直接对参数的值进行更改，大大增加了攻击者的攻击成本。下面我介绍前端6种常用的加密如何使用，如有不足之处，欢迎大家补充。

一、6种常用加密方案

1.Base64加密
简介
Base64顾名思义，就是基于64个可打印字符来表示二进制数据的一种方法，「注意它并不是一种加密算法」。对于64个打印字符，我们只需要6个二进制位就可以完全表示了。那么我们如何利用8个二进制位来表示只需要6个二进制位就可以完全表示的可打印字符呢？由于2的6次方等于64，所以我们可以将每6个位元为一个单元，对应某个可打印字符。三个字节有24个位元，对应于4个Base64单元，即3个字节需要用4个可打印字符来表示。

如何使用
原生加解密

  const btoa = window.btoa('hello, my name is FuChaoyang ')  // 编码
  console.log('加密后',btoa)
  const atob = window.atob('aGVsbG8sIG15IG5hbWUgaXMgRnVDaGFveWFuZyA')  // 解码
  console.log('解密后',atob)

base64插件 

 安装：

npm install --save js-base64

比如vue3中引入使用，其他框架大同小异，可做参考

<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>

总结
优势：

base64 适合不同平台、不同语言的传输；
页面中内嵌使用 base64 格式的小图片，可减少了服务器访问次数；
二进制位转换 base64 算法简单，对性能影响不大；
缺点：

二进制文件转换为 base64 后，体积大概增加 1/3；
base64 无法缓存，要缓存只能缓存包含 base64 的文件，比如 js 或者 css；
面对大文件时，会消耗一定的 CPU 进行编解码。

2.MD5加密（不可逆）

简介<