前端安全防护

安全技能1：不要滥用Storage，应将 Token 添加到cookie 并且做httponly、samesite、secure限制

场景复现：今天试了一下，在Chrome和Firefox打开自家项目网站，先Chrome登录后，将其sessionStorage的所有数据，复制一遍，放到Firefox上的* 结果：刷新一遍无需登录也能进入网站（诸位也可以试试自家网站）* 危险性漏洞：当有人使用跨站脚本攻击获取到你的本地缓存数据后，那么无需账密也能进入你的网站* 分析：这是因为token等登陆状态信息都放在了会话存储中* 解决方案：* 因为本地缓存localStorage或sessionStorage,都没有加密或限制功能,都能用js脚本随意获取到storage数据,进而存在一旦被跨站脚本攻击成功则GG。* 而客户端数据存储方案，还有cookie技术，且cookie正有限制选项功能，能够限制是否能够被读取。* 当然，前端只需要配置Credentials即可，无需去操作cookie，后端发送过来的响应头的Set-Cookie，将会在下一次HTTP请求头的Cookie自动一起发送过去。* cookie主要配置项：* httpOnly: true/false;* 设置了 HttpOnly 属性为true的 cookie，将不能使用 JavaScript 经由 Document.cookie 属性、XMLHttpRequest 和 Request APIs 进行访问，以防范跨站脚本攻击。* secure: true/false;* 一个带有 secure 安全属性的 cookie， 只有在请求使用SSL和HTTPS协议的时候才会被发送到服务器。* sameSite: None/Strict/Lax;* SameSite属性用来限制第三方 Cookie，使cookie不能随着跨域请求一起发送，从而防范跨站请求伪造攻击（CSRF），减少安全风险。* 注意： 如果sameSite属性值为None，则cookie的secure必须为true，否则将会遭到客户端的Block拒绝，无法写入cookie

• 使用Vue开发的话，要进行代码混淆压缩，可借助插件uglifyjs-webpack-plugin或者terser-webpack-plugin

• vue-cli3打包压缩、混淆、去注释 参考文档

安全技能3：JS签名规则加密

• 场景案例参考：再解决不了前端加密我就吃shi* 亲测了一遍这位狠人的方法，虽然该Tmall网站的加密规则及字段参数已有所改变，但获取流程依然不变，debug拿到加密规则rsaPassword和Local.e，便能获得password2值

• 问题：既然能被破解，要你加密何用？* 虽然前端经过混淆和压缩，以及函数加密，依然无法彻底有效保护代码，但能提高攻击者进行攻击的难度，使之增加攻击者成本，而不是直接爬取js脚本后就能一眼得知加密规则，那么我们的防护目的也就达到了

• JS签名规则加密> 虽然前端经过混淆和压缩，但如前文案例，依然可被debug一步步查找后拿到签名的相应生成规则。> 所以，为了给攻击者添堵，使攻击者看到的是“一堆乱码”，看不出任何实际的内容，将签名规则函数进一步加密是很有必要的防护手段！* 加密方式：一种或多种一起使用（前后端保持一致加密规则对比各自签名是否一致）1.base64：window.btoa / window.atob2.md5: hex_md5 / b64_md5 / str_md5 （加密不可逆）3.sha1 （加密不可逆）4.escape5.AES6.……* 其他加密方式： jsEncrypto 加密脚本工具> 借助该工具，自己再进行调整使之适用自己当前的项目，使代码得到更深度的加密，甚至我们可以将整个脚本进行加密，如果你为了安全性完全不考虑服务器带宽压力的话。* 示例：* 未加密前的sign规则函数：function sign(obj, util, md5, APP_SECRET) { let str = util.addStr(util.objKeySort(obj)); str = encodeURIComponent(str); str = str.replace(/\'/g, "%27"); str = str.replace(/\!/g, "%21"); str = str.replace(/\*/g, "%2A"); str = str.replace(/@/g, "%40"); str = str.replace(/\(/g, "%28"); str = str.replace(/\)/g, "%29"); str = APP_SECRET + str.toUpperCase() + APP_SECRET; str = md5.hex_md5(str); return str;} * 加密后的sign规则函数：let dF = new Function('return '+ unescape('%66%75%6E%63%74%69%6F%6E%20%64%46%28%73%29%7B%76%61%72%20%73%31%3D%75%6E%65%73%63%61%70%65%28%73%2E%73%75%62%73%74%72%28%30%2C%73%2E%6C%65%6E%67%74%68%2D%31%29%29%3B%20%76%61%72%20%74%3D%27%27%3B%66%6F%72%28%6C%65%74%20%69%3D%30%3B%69%3C%73%31%2E%6C%65%6E%67%74%68%3B%69%2B%2B%29%74%2B%3D%53%74%72%69%6E%67%2E%66%72%6F%6D%43%68%61%72%43%6F%64%65%28%73%31%2E%63%68%61%72%43%6F%64%65%41%74%28%69%29%2D%73%2E%73%75%62%73%74%72%28%73%2E%6C%65%6E%67%74%68%2D%31%2C%31%29%29%3B%72%65%74%75%72%6E%28%75%6E%65%73%63%61%70%65%28%74%29%29%3B%7D'))()let sign = new Function('return '+ dF('kzshynts*75xnls*7%3Dtgo*7H*75zynq*7H*75ri%3A*7H*75FUUdXJHWJY*7%3E*75*%3CG*5F*75*75qjy*75xyw*75*8I*75zynq3fiiXyw*7%3Dzynq3tgoPj%7EXtwy*7%3Dtgo*7%3E*7%3E*8G*5F*75*75xyw*75*8I*75jshtijZWNHtrutsjsy*7%3Dxyw*7%3E*8G*5F*75*75xyw*75*8I*75xyw3wjuqfhj*7%3D4*%3AH*7%3C4l*7H*75*77*7%3A7%3C*77*7%3E*8G*5F*75*75xyw*75*8I*75xyw3wjuqfhj*7%3D4*%3AH*764l*7H*75*77*7%3A76*77*7%3E*8G*5F*75*75xyw*75*8I*75xyw3wjuqfhj*7%3D4*%3AH/4l*7H*75*77*7%3A7F*77*7%3E*8G*5F*75*75xyw*75*8I*75xyw3wjuqfhj*7%3D4E4l*7H*75*77*7%3A95*77*7%3E*8G*5F*75*75xyw*75*8I*75xyw3wjuqfhj*7%3D4*%3AH*7%3D4l*7H*75*77*7%3A7%3D*77*7%3E*8G*5F*75*75xyw*75*8I*75xyw3wjuqfhj*7%3D4*%3AH*7%3E4l*7H*75*77*7%3A7%3E*77*7%3E*8G*5F*75*75xyw*75*8I*75FUUdXJHWJY*750*75xyw3ytZuujwHfxj*7%3D*7%3E*750*75FUUdXJHWJY*8G*5F*75*75xyw*75*8I*75ri%3A3mj%7Ddri%3A*7%3Dxyw*7%3E*8G*5F*75*75wjyzws*75xyw*8G*5F*%3CI5'))() * 延伸：Token、Sing与加密的作用* Token的作用：* 判断用户身份的标识* 签名Sign的作用：* 保证API接口通信时数据的安全性，进行数据校验是否有不安全的字段提交，防止信息被篡改和伪造* 加密的作用：* 将数据或代码加密，使明文变成暗文，让攻击者看不出任何实际的内容

代码漏洞扫描优化

安全尚无银弹，狼人依旧猖狂

• Vue 安全* Vue 安全官方文档

NPM第三方依赖的安全隐患> node依赖安全扫描工具 参考文档* npm@6.0新特性：npm audit1.npm audit需要当前项目存在package.json和package-lock.json文件。* 如果没有这两个文件，将会报相应EAUDITNOPJSON和EAUDITNOLOCK错误提示* 生成package.json文件: npm init* 生成package-lock.json文件: npm i --package-lock-only2.npm audit相关命令1.npm audit [--json | --parseable] : 默认输出table格式，--json输出json格式，--parseable输出纯文本格式* 如下图第一行：* Severity: 有四个等级：critical(立即处理), High(尽快处理), Moderate(有时间就处理), Low(自行决定要不要处理)* Description：漏洞的描述* Package: 哪个包有问题* Patched in: 打补丁，哪些版本可修复漏洞的版本范围* Dependency of: 你的项目中哪个包依赖了这个有问题的包* Path: 项目中的这个包到有问题的包之间的依赖路径* More info: 安全报告的链接， 查看这个问题的更多详细信息 <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c67fbf113b6f44218e408b8e009d17fe~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)*新特性：npm audit1.npm audit需要当前项目存在package.json和package-lock.json文件。* 如果没有这两个文件，将会报相应EAUDITNOPJSON和EAUDITNOLOCK错误提示* 生成package.json文件: npm init* 生成package-lock.json文件: npm i --package-lock-only2.npm audit相关命令1.npm audit [--json | --parseable] : 默认输出table格式，--json输出json格式，--parseable输出纯文本格式* 如下图第一行：* Severity: 有四个等级：critical(立即处理), High(尽快处理), Moderate(有时间就处理), Low(自行决定要不要处理)* Description：漏洞的描述* Package: 哪个包有问题* Patched in: 打补丁，哪些版本可修复漏洞的版本范围* Dependency of: 你的项目中哪个包依赖了这个有问题的包* Path: 项目中的这个包到有问题的包之间的依赖路径* More info: 安全报告的链接， 查看这个问题的更多详细信息 <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c67fbf113b6f44218e408b8e009d17fe~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)* npm audit 官方文档：about-audit-reports* npm audit 官方文档：Auditing package dependencies> 注意1： 该npm audit命令在 npm@6 中可用。要升级，请运行npm install npm@latest -g.> 注意2： npm audit检查内容包含直接依赖项、devDependencies、bundledDependencies 和 optionalDependencies，但不检查 peerDependencies.> 注意3： npm audit命令在淘宝镜像不支持使用，必须是npm初始源https://registry.npmjs.org/.>

2.npm audit fix* npm aduit [fix] 扫描并会自动更新到semver兼容的版本来消除漏洞3.npm audit fix --force* --force强制更新到安全版本, 即使semantic versioning不兼容也会更新* 但不一定能帮你修复所有的漏洞，有些需要手动去根据audit提示进行安装或卸载相应依赖* 有时修复后的依赖包不符合当前项目，导致运行崩溃，所以切记修复前做好备份，以便回滚> 注意： npm audit fix [--force]强制修复后，记得重新npm i加载依赖，再重新运行项目npm run dev，避免因为依赖丢失而导致项目报错无法运行* npm相关命令：* 查看当前npm源： npm config get registry* 配置npm源：* 原始镜像：npm config set registry https://registry.npmjs.org* 淘宝镜像：`npm config set registry https://registry.npm.taobao.org" style="margin: auto" />