前端加密和压缩

前端加密和压缩

最早在开发前端项目时根本不在意数据安全这块的东西，主要是开发需求太多了，根本顾不过来。但是随着公司对数据安全的要求不断提高，我们也在这方面做了点东西。

废话不说，直接开始。

压缩

首先我用的是pako对数据进行压缩

安装依赖包

npm i pako --save-d

其实网上关于pako的使用文档有很多，我就不细说了 基本上我也是跟着文档进行的编写。但是唯独有一点需要注意的是，在对数据量较大的内容进行压缩的时候有个地方需要注意下。因为普通的文档中并没有提及这部分，我也是遇到问题才完善的代码。

zip.js：

import pako from 'pako'

class Zip {
    decode(str){
        if(!str) return str
        const _str = window.atob(str)
        const charData = _str.split('').map(t => t.charCodeAt(0))
        const bin = new Uint8Array(charData)
        const data = pako.inflate(bin)
        const array = new Uint16Array(data)
        // 兼容数据量大的操作的，不然会有问题
        const chunk = 8 * 1024
        let _d = '', i
        for (i = 0; i < array.length / chunk; i++) {
            _d += String.fromCharCode.apply(null, array.slice(i * chunk, (i + 1) * chunk))
        }
        _d += String.fromCharCode.apply(null, array.slice(i * chunk))
        const json = decodeURIComponent(_d)
        return JSON.parse(json)
    }

    encode(data){
        if(!data || (typeof data === 'object' && !Object.keys(data).length)) return data
        const str = JSON.stringify(data)
        const binary = pako.gzip(encodeURIComponent(str), {to: 'string'})
        return window.btoa(binary)
    }
}

加密

使用压缩的目的是为了减少加密的内容量，比如城市code这么个数据（绘制树形结构），其数据内容量是很大的。其实加密才是主要的功能。

加密的方法有很多种：AES、RSA、md5、SHA等
一般登录或注册时提交的密码部分都是用md5去加密（不需要解密）
在前后端数据交互的时候我选用的是AES（比较高效并简单）

前后端商量一个密钥（key）和偏移量（iv）就可以了
crypt.js：

import CryptoJS from "crypto-js"

class Crypt {
    encrypt(params){
        const key = '123456'
        const iv = '654321'
        let cipher
        if (params) {
            const data = CryptoJS.enc.Utf8.parse(JSON.stringify(params))
            cipher = CryptoJS.AES.encrypt(data, key, {
                iv,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            }).toString()
        }
        return { key, iv, cipher }
    }

    decrypt(data){
        const { key, iv, cipher } = data
        const json = CryptoJS.AES.decrypt(cipher, key, {
            iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        }).toString(CryptoJS.enc.Utf8)
        return JSON.parse(json)
    }
}

在封装请求的地方引用该方法就可以了。

另外除了在前后交互数据时进行加密，也可用在前端路由携带参数时进行加密。前后都有注意encodeURIComponent和decodeURIComponent一下，避免中文字符变成乱码。