20.1 那些经常被被怼回去的安全需求

下面就我们聊一些比较常见的可能会被拒绝的安全需求，其中有些内容我们在前文讨论过如何去实现，下面我们再来看看拒绝这些需求的理由是什么

20.1.1 前端数据脱敏

前端数据脱敏是一个很常见的需求，特别是当今隐私被卖的这么猖狂的时代，所以很多公司都开始注重这些细节，最基础的就是数据脱敏。数据脱敏，就是将用户的隐私信息，用一些手段，让这些信息有一定辨识度，但又无法准确获取，比如：

金*胖
186**2892
510*1262
川A 7*1

上面一般是我们常见到的数据脱敏格式，有人叫他数据马赛克。这个前端做起来很容易，一个正则配上一个String.replace方法就搞定，我们在前文也确实实现过。但有的前端工程师或项目经理为什么会拒绝这个要求呢？因为前端做数据脱敏就是自欺欺人。归根揭底，一个有一定IT技能的人如果想要这些数据，直接在Request中拿数据就是了，何必从页面复制。所以数据脱敏这种事一定要交给后端做，从源头开始脱敏。

可能后面一些场景，有些被脱敏的数据在前端又要被用到。比如列表数据脱敏，到详情/表单编辑操作时又需要脱敏前的，那就根据ID再发一次请求获取脱敏前的数据，然后对这个接口调用做权限限制和日志记录，让敏感数据的使用相对安全。

20.1.2 表单校验是为了安全么

我们在做表单时都会针对数据格式做校验，比如邮箱、电话号码、银行卡号这些，甚至还有一些非常复杂的联动校验（正如我们在前文实现的那样）。那么前端做校验是为了安全么？

可能有那么点意思吧，比如很多人都会比较强调防XSS攻击和CRSF。但现在前端这种格式校验更多是为了提升用户体验：

首先提醒并引导用户，应该怎么输入；
如果用户输入半天，前端不校验，直接到后台，后台发现格式不正确，再提示用户，这是一个非常耗时且不专业的交互体验
如果前端没校验，后端也没校验，那这就是一条脏数据插入到数据库，有可能造成XSS攻击或 SQL攻击, 这就非常危险了。

20.1.3 数据展示页面加水印

页面加水印在前端设计中很普遍，比如钉钉、企业微信的群聊都是加了水印的，很多在线图片编辑工具多会加水印。Ant Design Pro生成的代码中也设计了页面水印的机制。

通常前端加水印有三个层次：

通过 CSS 背景加水印，简单粗暴，能骗一点文科运营。但稍微懂行的人，就知道通过 Elements 编辑面板屏蔽这个水印。正所谓你加的简单，别人去掉更简单。
通过 JS 定向植入水印dom节点，这个比上一个稍微复杂点，但还是通过Elements 编辑面板屏蔽，只不过多思考一下，操作步骤多点。
服务端加水印生成列表图片。这个操作描述起来简单，具体实现就非常复杂，需要考虑投入产出比。

有可能你会疑问，为什么是服务端加水印生成图片，而不是前端自己通过 canvas 生成？

第一，同上面提到过的，通过请求拿到敏感数据，本身就是不安全的；
第二，JS 本身是不安全的，可篡改；

20.1.4 JS 可篡改

我们总是在提JS丑化（或者说混淆），但丑化更多是减少包的体积，在某种程度上，可以让发布的JS资源可读性更差，但做到不可读很难，尤其有很的工具提供了反向美化代码的手段。

20.2 结论

我们在前端设计开发中不能没有安全措施，但如果过于依赖前端的安全措施，甚至在后端完全相信前端传递过来的内容，那结果将是很悲惨的。正确的做法应该是恰好相反，后端程序应该默认前端信息是完全不可靠的，所有前端传递的内容，从格式到权限，都应该在后端进行重新的检查和校验，因为一切前端安全措施都是纸老虎！

前端技术知识库