前端安全防护

安全技能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签名规则加密</