前端项目在安全漏洞扫描的时候，爆出了基于客户端DOM的存储型代码注入的问题，经查是因为使用了浏览器缓存比如localstorage、sessionstorage、cookie时候，存入和读取过程中值可能被篡改，引起xss安全问题
这里拿localstorage作为示例，当攻击者直接在控制台修改你的localstorage值后，你在读取该值并进行运行的时候就会有被攻击的风险，解决方案就是对值进行一个加密，当然加密的复杂度越高，你的程序也就越安全。
在这里简单的进行一个base64加解密，作为demo示例。
由于base64在编码过程中遇到复杂的数据类型比如对象或者数组时会报错，所以同时也要进行decodeURIComponent/encodeURIComponent操作。
缓存里的值也应该是字符串类型，所以还涉及JSON.stringify/JSON.parse方法。
加密方法
function encrypt(data, key, iv) {
return window.btoa(encodeURIComponent(data))
}
解密方法
function decrypt(data, key, iv) {
return decodeURIComponent(window.atob(data))
}
存值方法
let data = {a:1,b:[]}
localStorage.setItem('a', encrypt(JSON.stringify(data)))
取值方法
var a = JSON.parse(decrypt(localStorage.a)