【方案】前后端数据传输加密实现方案 - 前端实现

发表于 | 分类于

[方案系列文章说明]: 该类型的文章是我在使用和学习中认为不错的解决办法,当然会有更好的方案,也一定会有, 所以文章具有一定的局限性, 请结合自己的思考辩证的看.

上代码

1, 引入加密工具包-CryptoJS

1
<script src="/layui/cryptojs/aes.js"></script><script src="/layui/cryptojs/mode-ecb-min.js"></script>

2, 加密方法

1
2
3
4
5
function encryptAesParam(content){
  const key = CryptoJS.enc.Utf8.parse("0000000000000000");
  var ciphertext = CryptoJS.AES.encrypt(content+"", key,{mode: 	            CryptoJS.mode.ECB,    padding:CryptoJS.pad.Pkcs7  }).toString();
  return ciphertext;
}

3, ajax方式请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
    url: '/inspection/detail',
    type: "POST",
    dataType: "json",
    data: {id: encryptAesParam(id)},
    success: function (data) {
    },
    error: function (xhr) {
    },
    beforeSend: function (xhr) {
        xhr.setRequestHeader("isEncrypt", true);// 是否加密
        xhr.setRequestHeader("encryptFields", "id");// 加密属性名称,以|分割,如id|name|age

    });

(针对formData类型的数据,建议重新封装ajax的调用,自动对配置字段进行加密处理)
如: $.Qajax(true, new Array(), {})
参数说明: 是否加密, 加密字段名称, ajax参数

4, 效果