背景
由于项目里涉及到一些客户的地址、手机号等敏感信息,为了加强数据安全,在传输过程中需要将敏感信息进行加密。
实现方案
后端负责敏感数据的加密,前端使用crypto-js这个库中的解密方法对数据进行解密展示。
代码实现
import CryptoJS from 'crypto-js';
// aes解密方法
const decrypt = (
ciphertext,
key = 'xxxxxxxx(与后端约定好的密钥)',
options = {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
}
) => {
if (!ciphertext) return ciphertext;
let res = ciphertext;
try {
res =
CryptoJS.AES.decrypt(
CryptoJS.format.Hex.parse(ciphertext),
CryptoJS.enc.Utf8.parse(key),
options
).toString(CryptoJS.enc.Utf8) || ciphertext;
} catch (e) {
return ciphertext;
}
return res;
};
export { decrypt };
方案缺点
每处后端加密的数据前端都需要去调用这个方法进行解密,容易遗漏。
(是否可以考虑后端将整个响应报文进行加密,前端直接在响应拦截器中进行解密?这样的缺点就是查看接口返回数据时是密文需要再解密一下查看不方便,可以做个解密的页面)