灵活运用CryptoJS库实现前端页面加密原理

在一些网站中我们右键查看源码会发现页面中没有内容，而实由json输出显示，

进一步查看json数据，会发现json中没有我们想象中的html标签字符，而是一堆超多的如：

cl1tRNWCGOo2gp2pgST+TA==

一样无规则的乱码.

那么这些乱码为什么可以显示为页面呢？

其实大部分都是由AES加密将原本正常的html框架加密为不可识别的数据.

怎样才能利用CryptoJS库简单实现aes加密与解密字符串的效果呢？

首先我们需要先去GitHub网站中搜索crypto-js找到且下载该库的文件.

在项目中引用所需用到的js文件

<script src="./js/crypto-js.js"></script>

<script src="./js/aes.js"></script>

然后在页面中可以使用如下代码对指定的字符串进行aes加密：

<script type="text/javascript">

    var mishi = '5B86260AE5D4168CB449D2F16E248D4A';

    var mishi = CryptoJS.enc.Hex.parse(mishi);

    var iv = CryptoJS.enc.Hex.parse("25778879797997");

    var strzfc = "在线工具";

    var aesenc = CryptoJS.AES.encrypt(strzfc, mishi, {

      iv: iv,

      mode: CryptoJS.mode.CBC,

      padding: CryptoJS.pad.Pkcs7

    })

    var newaesenc = aesenc.ciphertext.toString()；

    alert(newaesenc);

</script>

其中变量mishi为aes的密匙：5B86260AE5D4168CB449D2F16E248D4A

iv为偏移量:25778879797997

变量strzfc为需要加密的字符串：在线工具

mode: CryptoJS.mode.CBC, 

加密模式设置为cbc

当然我们也可以使用以下代码对上述的加密结果进行aes解密操作：

<script type="text/javascript">

    var mishi = '5B86260AE5D4168CB449D2F16E248D4A';

    var mishi = CryptoJS.enc.Hex.parse(mishi);

    var iv = CryptoJS.enc.Hex.parse("25778879797997");

    var newzstr = "PcL5WSfYYL+3NkHNS0ROhQ=="; //上述加密的结果

    var decod = CryptoJS.AES.decrypt(CryptoJS.format.Hex.parse(newzstr), mishi, {

      iv: iv,

      mode: CryptoJS.mode.CBC,

      padding: CryptoJS.pad.Pkcs7

    })

    alert(CryptoJS.enc.Utf8.stringify(decod));

</script>

其中变量newzstr为我们之前获取的aes加密的字符.

那么同理，大部分加密的页面也就是通过后端程序将页面aes加密后输出为json格式，前台再通过crypto-js进行解密显示.

除了使用以上CryptoJS库我们还可以通过使用本站的AES加密解密工具在线对指定的字符串或内容进行几种常见类型的加密解密操作.