前端安全规范
<ul>
<li>
<p>xss防御
首先还是xss，如果你现在不是使用老掉牙的jQuery zepto之类的框架，就简单多了
对vue来说，谨慎或不使用 v-html 即可
对react来说，谨慎或不使用 dangerouslySetInnerHTML 即可</p>
</li>
<li>
<p>开启全站https
这个无需多言，现在全站https是标配，减少了网站被劫持的风险
如果非https的话，很多技术都无法使用，包括获取媒体对象、地理位置、使用http2等</p>
</li>
<li>
<p>缓存类使用
前端禁止操作cookie
localstorage、sessionstorage 不缓存业务敏感数据，严禁存储用户名、密码等数据</p>
</li>
<li>
<p>系统需要安全退出
之前见过很多toB系统，安全退出，仅仅为跳转到登录界面而已，没有清除cookie
安全的做法，应当是调用服务端的安全退出接口，服务端来清除cookie，然后就真的安全了</p>
</li>
<li>防止界面前端绕过
前端仅使用样式做权限、限制是有风险的
case1：某界面的操作按钮，无权限的用户仍然可以看到，但是会disabled掉，不可点击。某懂技术的用户，通过浏览器的开发工具，修改了具体的css属性，使按钮可以继续操作
case2：某系统的输入时间，会对可输入的时间范围进行限制，但也可以通过浏览器开发工具修改样式，继续选择到本来不应该选的日期</li>
<li>
<p>结论：
1、如果是按钮类的操作，最好无权限就直接不展示。如果需要展示的话，也需要新写一个无功能按钮，与原来有操作功能的按钮进行区分
2、如果是需要控制选择范围的话，需要后端也来做校验</p>
</li>
<li>
<p>接口禁止返回过多隐私数据
某case：前端需要获取某客户的公司名称，服务端为了省事，直接接口返回了该公司的整体对象信息，包括联系人、联系电话、所在位置等等
类似于如上情况，接口应当做数据过滤，仅返回有用的数据信息</p>
</li>
<li>
<p>隐私数据需要脱敏
对比较隐私的客户信息，列表展示应当脱敏展示为**，并且为接口直接返回脱敏数据，不能前端来展示
如果需要再查看真实数据，需要调用接口查看数据，此时服务端会有日志记录用户的查看记录</p>
</li>
<li>
<p>某些接口数据加密
对于一些SDK、小程序、App等接口请求，需要做接口数据加密，对称或非对称的选择，取决于业务需要</p>
</li>
<li>
<p>金钱类接口，服务端不信任原则
case：某商城app的提交订单接口，被抓包修改了订单金额，然后就可以支付比订单金额少的金钱
是因为服务端信任了前端传输了订单金额，未加校验直接拿来提交
如此敏感的数据，服务端需要自己计算</p>
</li>
<li>
<p>前端添加明、暗水印
一些数据比较敏感的内部系统，会添加明水印，提醒用户不用截图外传
但明水印一般都是通过dom生成，懂技术的同学，会通过浏览器将明水印修改或者删除掉
因此还需要暗水印，万一数据泄露，也可以追踪追责</p>
</li>
<li>不信任外部资源
包括js、css、图片、接口等外部资源，只加载可信任的资源
不使用公司外的第三方cdn地址，即使目前比较稳定的那些知名cdn地址
只加载可信任的iframe</li>
</ul>