介绍最近好像有个很火的问题，前端能不能限制用户截图？看到这道题，感觉提问者应该是新人，或者被产品经理或者SBleader折磨得脑残了。因为下面有一个很直白的回答：无论多么牛逼的技术手段限制了软件的截图，用户只需要简单的拿出手机在屏幕上拍照即可。这道题真的说明所有的前端安全其实都是纸老虎。下面我就我接触到的几个场景，说说我从事前端以来遇到的伪前端安全需求。那些被猛烈回击的安全需求，近年来非常频繁。我之前的公司是做金融贷款业务的，强调数据安全。这两年，我也做了很多的安全需求。前端数据脱敏前端数据脱敏是一个很常见的需求，尤其是在如今这个隐私买卖如此猖獗的时代，所以很多公司都开始关注这些细节，其中最基础的就是数据脱敏。数据脱敏就是通过一些手段，让用户的隐私信息在一定程度上可以被识别出来，但是无法准确获取，例如：金*胖186**2892510*1262川A7*1上面一般都是我们常见的得到的数据脱敏格式，我也叫他数据马赛克。前端能不能做，肯定能做，一个正则表达式匹配一个String.replace方法就搞定了。但是如果产品让我们实现这个需求，我们一定要拒绝，因为前端的数据脱敏就像是sheet里的眨眼——自欺欺人。归根结底，如果有一点IT常识的人要这些数据，直接从request中获取就可以了，何必从页面copy过来呢。所以，数据脱敏一定要交给后端，从源头做起。可能在后面的一些场景中，前端又会用到一些脱敏后的数据。比如列表数据脱敏，如果需要在详情/表单编辑操作前脱敏，则根据ID发送请求获取脱敏前的数据，然后对该接口调用进行权限限制和日志记录，以允许敏感数据使用起来相对安全。表单验证是为了安全吗？我们在做表单的时候，经常会校验数据格式，比如邮箱、电话号码、银行卡号等等，甚至还有一些很复杂的联动校验。做前端验证是为了安全吗？可能有点意思吧，比如我们以前总是提验证输入，防止XSS攻击。但是现在前端格式校验更多的是为了：提升用户体验，提升用户体验，提升用户体验。第一，提醒和引导用户如何输入；其次，如果用户输入时间长，前端不验证，直接到后台，后台发现格式不对，再提示用户。这是一种非常耗时且不专业的交互体验；如果前端不校验，后端不校验，那么这是插入数据库的一段脏数据，可能会引起XSS攻击或者SQL攻击，非常危险。给数据报表加水印给页面加水印其实在前端很常见，比如钉钉，企业微信群聊都加水印，还有很多在线图片编辑工具也加入了，比如我经常用的图怪，你想白嫖，他会给你加水印：当时我们有一些列表，因为运营需要，有些数据不能脱敏，所以领导问，前端能不能加水印，让数据更安全：防止运营商不按规范处理问题，私自截图。所以当我看到知乎上的问题时，我很庆幸没有让我做：限制用户截图。以我个人的经验，前端加水印分为三个层次：通过CSS后台加水印，简单粗暴，能骗过一点文科操作。但是稍微懂一点的人都知道如何通过Elements编辑面板来屏蔽这个水印。俗话说，自己加的简单，别人去掉也容易。通过JS直接植入水印dom节点，比上一种稍微复杂一点，不过还是通过Elements编辑面板挡住了，多想多操作步骤就可以了。最终解决方案：服务端加水印生成列表图片，实现思路与图片怪兽网站一致。不过这个操作描述起来简单，具体实现起来却很复杂，需要考虑投入产出比。你可能会疑惑，为什么是服务端加水印生成图片，而不是前端通过canvas生成呢？第一，如上所述，通过请求获取敏感数据是不安全的；第二，JS本身不安全，可以被篡改；JS可以被篡改。我多次说过，前端安全是一个虚假的需求。你可能不相信。但是如果你知道JS是可篡改的，那么你就明白为什么了。我们总是提到JS的丑化，但丑化更多的是减少包的大小。某种程度上可以让发布的js资源可读性变差，但很难做到不可读。接下来，我们就来体验一下JS可以篡改什么。实战步骤一：下载并安装Chrome的HeaderEditor插件步骤二：找到目标网站，找到你要篡改的JS资源。这里我以我常用的地图网站的jquery资源（https://js.tuguaishou.com/js/...）参考为例；第三步：用编辑器复制代码，输入你要篡改的内容，我这里只加了一个控制台输出，然后在本地启动了一个静态资源服务//...console.log('dosomechange,哈哈哈'）;varc=[],d=c.slice,e=c.concat//...第四步，使用插件重定向网站的静态资源，这里我是使用本地的jquery来替换原始网站，保存配置并启动规则；第五步：强制刷新浏览器，让代理资源生效，当看到请求标记为307响应时，说明篡改已经生效，再看控制台，会有一个相应的输出；至此，一个完整的篡改就完成了。但是这个教程不是让你用这个方法来做一些XX的事情，只是让你明白，由于JS的可篡改性，我们在做网站设计的时候，需要时时刻刻考虑代码的安全性。你可以做到吗？这是否意味着你可以做到？.分享一个有趣的故事年初，前公司要做一个系统大整合：两家子公司各有权限系统，资本看好的一方占了上风（在系统设计上），我们的权限系统设计比较专业），被Abandoned，我们不得不改变我们现有的系统来对接对方的系统。这期间，由于异地沟通问题，对方一开始不同意规则，然后对接人员将我们清洗整理后的数据导入到数据库中。后来因为需要修改一些数据，网页提示导入的数据key格式不对，将这个key设置为只读，导致死路一条。然后跟我们沟通，我们能不能把数据库数据删掉重新导入，对方一万个不情愿，让我们自己在网站上删删数据，那200多条数据，侮辱谁？？？？真是气死我的同事了，然后又试了上面的招，读了对方的JS，代理了再提交，就成功了！！！早知道对方是业余的，没想到这么业余：只在前端做限制，服务器端不做验证。这个案例提醒我们，前端重交互，服务端重安全，JS可篡改；所以不要想着产品，而是想着，用你的专业Sayno！！！；还告诉我们要做技术，要谦虚，力所能及的帮助，做一个好人。结语是一堆累人的东西，希望对大家以后的需求评审和程序设计有用。前端安全重要吗？重要的。将网站的安全全部交给前端是否合适？不适当。
