前端规范 - 前端广义安全规范

前言

不仅仅局限为前端老生常谈的xss、csrf等典型性前端安全问题
更多的，是前端面临的整体的一些合规、风控、信息泄露等一系列问题

xss防御

首先还是xss，如果你现在不是使用老掉牙的jQuery zepto之类的框架，就简单多了
对vue来说，谨慎或不使用 v-html 即可
对react来说，谨慎或不使用 dangerouslySetInnerHTML 即可

开启全站https

这个无需多言，现在全站https是标配，减少了网站被劫持的风险
如果非https的话，很多技术都无法使用，包括获取媒体对象、地理位置、使用http2等

缓存类使用

前端禁止操作cookie
localstorage、sessionstorage 不缓存业务敏感数据，严禁存储用户名、密码等数据

系统需要安全退出

之前见过很多toB系统，安全退出，仅仅为跳转到登录界面而已，没有清除cookie
安全的做法，应当是调用服务端的安全退出接口，服务端来清除cookie，然后就真的安全了

系统权限过滤注意点

toB系统，需要做权限过滤，需要过滤三层
以某系统的用户管理界面为例，非管理员户看不到这个界面
1、在菜单上过滤，非管理员用户看不到该菜单
2、界面上过滤，如果非管理员用户，获取了用户管理的界面url，直接输入也是需要跳转到403界面的
3、数据过滤，如果非管理员用户，获取了用户管理请求的接口地址，直接通过浏览器访问接口，或者postman之类的请求接口，也应当返回无权限

防止界面前端绕过

前端仅使用样式做权限、限制是有风险的
case1：某界面的操作按钮，无权限的用户仍然可以看到，但是会disabled掉，不可点击。某懂技术的用户，通过浏览器的开发工具，修改了具体的css属性，使按钮可以继续操作
case2：某系统的输入时间，会对可输入的时间范围进行限制，但也可以通过浏览器开发工具修改样式，继续选择到本来不应该选的日期
结论：
1、如果是按钮类的操作，最好无权限就直接不展示。如果需要展示的话，也需要新写一个无功能按钮，与原来有操作功能的按钮进行区分
2、如果是需要控制选择范围的话，需要后端也来做校验

接口禁止返回过多隐私数据

某case：前端需要获取某客户的公司名称，服务端为了省事，直接接口返回了该公司的整体对象信息，包括联系人、联系电话、所在位置等等
类似于如上情况，接口应当做数据过滤，仅返回有用的数据信息

隐私数据需要脱敏

对比较隐私的客户信息，列表展示应当脱敏展示为**，并且为接口直接返回脱敏数据，不能前端来展示
如果需要再查看真实数据，需要调用接口查看数据，此时服务端会有日志记录用户的查看记录

某些接口数据加密

对于一些SDK、小程序、App等接口请求，需要做接口数据加密，对称或非对称的选择，取决于业务需要

金钱类接口，服务端不信任原则

case：某商城app的提交订单接口，被抓包修改了订单金额，然后就可以支付比订单金额少的金钱
是因为服务端信任了前端传输了订单金额，未加校验直接拿来提交
如此敏感的数据，服务端需要自己计算

前端添加明、暗水印

一些数据比较敏感的内部系统，会添加明水印，提醒用户不用截图外传
但明水印一般都是通过dom生成，懂技术的同学，会通过浏览器将明水印修改或者删除掉
因此还需要暗水印，万一数据泄露，也可以追踪追责

不信任外部资源

包括js、css、图片、接口等外部资源，只加载可信任的资源
不使用公司外的第三方cdn地址，即使目前比较稳定的那些知名cdn地址
只加载可信任的iframe

全站前端代码压缩、混淆

避免被外部轻易看出代码逻辑

防止网站被嵌套

如果是toC网站，需要做防嵌套控制，代码也比较简单

 if(window != top) {
	top.location.href = location.href
}

总结

其实不止上面的内容，不同的场景会有其余的安全问题，像放爬虫、npm污染，需要不断的去学习总结