大家好我是聪，前几天有人说要搞我的接口，我以为他口嗨，昨天快下班的时候去数据库一看！没想到他去搞了我的注册接口！给我刷了两百万条数据！（小意思哈哈开个玩笑）。本次代码已上传短链狗，可以到我的Github短链项目进行查看喔：https://github.com/lhccong/short-link-dog-backend ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35c15ac3810a4a94aeeec77179649ea5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=390&h=443&s=31787&e=png&b=222326 "图片") ## 紧急补救 ### 查看恶意访问 IP 先打开 nginx 日志目录的 access.log 文件查看访问的端口号，输入命令如下： ```bash sed -E 's/^([0-9]+.[0-9]+.[0-9]+.[0-9]+).*$/\1/' /usr/local/nginx/logs/access.log | sort | uniq -c | sort -nr | head -n 10 ``` ![image-20240528101715394.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9857c7c583b34a559d9cb10271d1456e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=126&h=118&s=2394&e=png&b=fefdfd "image-20240528101715394.png") 由于之前的日志太大我先移除了一波，重新打了一次，前面是恶意的访问次数，后面是访问的 IP 地址： ![image-20240528111204095.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e67457a540284950a67f9a5dd9b8b698~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=345&h=178&s=14539&e=png&b=060606 "image-20240528111204095.png") 找到了恶意请求的 IP 就好办了，我的 nginx 日志一直在猛猛飙我直接好家伙，虽然造成不了什么伤害，但是看着难受啊，占用我磁盘空间，那我直接！腾讯云启动！ ### 防火墙封禁在防火墙上直接封禁拦截掉这两个恶意的 IP 请求： ![image-20240528111543299.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b9286f22d614cdfb73913da000dc83f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=862&h=164&s=16317&e=png&b=ffffff "image-20240528111543299.png") 这样做其实并不能完全防御，幸好他的手段只能用它自己的两台服务器来压测我，如果是高手对我进行攻击，那我也没法防御选择拦截外网请求或者直接关闭服务器啦！ ## 增强注册接口的安全性禁掉了他的两台服务器这个风波暂时过去了，经过这件事情我发现我的注册接口太容易被搞了！！我什么都没设置，验证码都没有才导致这种坏人有机可乘，我花了 7 分钟百度了一下前端加验证码，给我找到了一个快捷方便的开源验证码 [AJ-Captcha](https://ajcaptcha.beliefteam.cn/captcha-doc/) ，先给大家看看我加完验证码后我的注册接口： ![Snipaste_2024-05-28_10-03-15.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5cbb63c910f640a9a0df3468efb15b02~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=505&h=559&s=97836&e=png&b=bbbaba "Snipaste_2024-05-28_10-03-15.png") ### 使用 AJ-Captcha 实现验证码没错！就是加了滑动校验，不能让他那么轻易的给我疯狂注册哈哈哈。既然看到了效果，不知道大家是否有兴趣跟着我来实现一波呢！来吧跟着我来实现一波！首先先跟着官方文档来啦！官方文档地址：示例代码地址：如果大家想跟着官方来也可以，但是如果你的项目是 React 的话，官方好像没有提供这样的示例 Demo ,不过我也找到了解决方法，大家可以跟着我一起看一下： ### 后端开发 #### 引入依赖先从官方文档获取到依赖地址，在项目中引入： ```xml com.anji-plus spring-boot-starter-captcha 1.3.0 ``` #### 设置配置信息官网的是 properties 的格式，想用 yml 格式的话可以使用我这份： ```yml # 滑动验证，底图路径，不配置将使用默认图片 # 支持全路径 # 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/jigsaw aj: captcha: # jigsaw: "classpath:images/jigsaw" #滑动验证，底图路径，不配置将使用默认图片 ##支持全路径 # 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/pic-click # pic-click: "classpath:images/pic-click" # 对于分布式部署的应用，我们建议应用自己实现CaptchaCacheService，比如用Redis或者memcache， # 参考CaptchaCacheServiceRedisImpl.java # 如果应用是单点的，也没有使用redis，那默认使用内存。 # 内存缓存只适合单节点部署的应用，否则验证码生产与验证在节点之间信息不同步，导致失败。 # ！！！注意啦，如果应用有使用spring-boot-starter-data-redis， # 请打开CaptchaCacheServiceRedisImpl.java注释。 # redis -----> SPI：在resources目录新建META-INF.services文件夹(两层)，参考当前服务resources。 # 缓存local/redis... cache-type: local # local缓存的阈值,达到这个值，清除缓存 #cache-number: 1000 # local定时清除过期缓存(单位秒),设置为0代表不执行 #timing-clear: 180 #spring.redis.host: 10.108.11.46 #spring.redis.port: 6379 #spring.redis.password: #spring.redis.database: 2 #spring.redis.timeout: 6000 # 验证码类型default两种都实例化。 type: default # 汉字统一使用Unicode,保证程序通过@value读取到是中文，可通过这个在线转换;yml格式不需要转换 # https://tool.chinaz.com/tools/unicode.aspx 中文转Unicode # 右下角水印文字(我的水印) water-mark: "\u6211\u7684\u6c34\u5370" # 右下角水印字体(不配置时，默认使用文泉驿正黑) # 由于宋体等涉及到版权，我们jar中内置了开源字体【文泉驿正黑】 # 方式一：直接配置OS层的现有的字体名称，比如：宋体 # 方式二：自定义特定字体，请将字体放到工程resources下fonts文件夹，支持ttf\ttc\otf字体 #water-font: WenQuanZhengHei.ttf # 点选文字验证码的文字字体(文泉驿正黑) #font-type: WenQuanZhengHei.ttf # 校验滑动拼图允许误差偏移量(默认5像素) slip-offset: 5 # aes加密坐标开启或者禁用(true|false) aes-status: true # 滑动干扰项(0/1/2) interference-options: 2 #点选字体样式默认Font.BOLD font-style: 1 #点选字体字体大小 font-size: 25 #点选文字个数,存在问题，暂不支持修改 #click-word-count: 4 history-data-clear-enable: false # 接口请求次数一分钟限制是否开启 true|false req-frequency-limit-enable: false # 验证失败5次，get接口锁定 req-get-lock-limit: 5 # 验证失败后，锁定时间间隔,s req-get-lock-seconds: 360 # get接口一分钟内请求数限制 req-get-minute-limit: 30 # check接口一分钟内请求数限制 req-check-minute-limit: 60 # verify接口一分钟内请求数限制 req-verify-minute-limit: 60 ``` #### 配置实现配置 Config： ```java @Configuration public class CaptchaConfig { @Autowired StringRedisTemplate redisTemplate; @Bean(name = "CaptchaCacheService") @Primary public CaptchaCacheService captchaCacheService(AjCaptchaProperties config){ //缓存类型redis/local/.... CaptchaCacheService ret = CaptchaServiceFactory.getCache(config.getCacheType().name()); if(ret instanceof CaptchaCacheServiceRedisImpl){ ((CaptchaCacheServiceRedisImpl)ret).setStringRedisTemplate(redisTemplate); } return ret; } } ``` 这里给出两种配置实现的方式： 1）基于单机实现这种实现方式只适合单机校验的形式，当有多台分布式的时候验证码会失效实现 AbstractCaptchaService 抽象类： ```java public class DefaultCaptchaServiceImpl extends AbstractCaptchaService { DefaultCaptchaServiceImpl() { //document why this constructor is empty } //这个需要实现，如果返回 redis 那就是使用 redis 那套 public String captchaType() {return "default";} @Override public void init(Properties config) { for (String s : CaptchaServiceFactory.instances.keySet()) { if (!this.captchaType().equals(s)) { this.getService(s).init(config); } } } @Override public void destroy(Properties config) { for (String s : CaptchaServiceFactory.instances.keySet()) { if (!this.captchaType().equals(s)) { this.getService(s).destroy(config); } } } private CaptchaService getService(String captchaType) {return CaptchaServiceFactory.instances.get(captchaType);} @Override public ResponseModel get(CaptchaVO captchaVO) { if (captchaVO == null) { return RepCodeEnum.NULL_ERROR.parseError("captchaVO"); } else { return StringUtils.isEmpty(captchaVO.getCaptchaType()) ? RepCodeEnum.NULL_ERROR.parseError("类型") : this.getService(captchaVO.getCaptchaType()).get(captchaVO); } } @Override public ResponseModel check(CaptchaVO captchaVO) { if (captchaVO == null) { return RepCodeEnum.NULL_ERROR.parseError("captchaVO"); } else if (StringUtils.isEmpty(captchaVO.getCaptchaType())) { return RepCodeEnum.NULL_ERROR.parseError("类型"); } else { return StringUtils.isEmpty(captchaVO.getToken()) ? RepCodeEnum.NULL_ERROR.parseError("token") : this.getService(captchaVO.getCaptchaType()).check(captchaVO); } } @Override public ResponseModel verification(CaptchaVO captchaVO) { if (captchaVO == null) { return RepCodeEnum.NULL_ERROR.parseError("captchaVO"); } else if (StringUtils.isEmpty(captchaVO.getCaptchaVerification())) { return RepCodeEnum.NULL_ERROR.parseError("二次校验参数"); } else { try { String codeKey = String.format(REDIS_SECOND_CAPTCHA_KEY, captchaVO.getCaptchaVerification()); if (!CaptchaServiceFactory.getCache(cacheType).exists(codeKey)) { return ResponseModel.errorMsg(RepCodeEnum.API_CAPTCHA_INVALID); } CaptchaServiceFactory.getCache(cacheType).delete(codeKey); } catch (Exception var3) { this.logger.error("验证码坐标解析失败", var3); return ResponseModel.errorMsg(var3.getMessage()); } return ResponseModel.success(); } } } ``` 1）基于 Redis 实现基于 Redis 实现的话记得要放开 yml 里面的 redis 配置喔实现 AbstractCaptchaService 抽象类： ```java public class CaptchaCacheServiceRedisImpl implements CaptchaCacheService { @Override public String type() { return "redis"; } public void setStringRedisTemplate(StringRedisTemplate stringRedisTemplate) { this.stringRedisTemplate = stringRedisTemplate; } private StringRedisTemplate stringRedisTemplate; @Override public void set(String key, String value, long expiresInSeconds) { stringRedisTemplate.opsForValue().set(key, value, expiresInSeconds, TimeUnit.SECONDS); } @Override public boolean exists(String key) { return Boolean.TRUE.equals(stringRedisTemplate.hasKey(key)); } @Override public void delete(String key) { stringRedisTemplate.delete(key); } @Override public String get(String key) { return stringRedisTemplate.opsForValue().get(key); } @Override public Long increment(String key, long val) { return stringRedisTemplate.opsForValue().increment(key,val); } } ``` 那么我们的后端服务就已经搞定啦！大家是不是有疑惑，为什么没有 Controller ，没错他的 Controller 已经在依赖中给你封装好了，具体接口官方也给出了清晰的路径： #### 后端接口获取验证码接口：http://你的项目地址/captcha/get 请求参数： ```json { "captchaType": "blockPuzzle", //验证码类型 clickWord "clientUid": "唯一标识" //客户端UI组件id,组件初始化时设置一次，UUID（非必传参数） } ``` 响应参数： ```json { "repCode": "0000", "repData": { "originalImageBase64": "底图base64", "point": { //默认不返回的，校验的就是该坐标信息，允许误差范围 "x": 205, "y": 5 }, "jigsawImageBase64": "滑块图base64", "token": "71dd26999e314f9abb0c635336976635", //一次校验唯一标识 "secretKey": "16位随机字符串", //aes秘钥，开关控制，前端根据此值决定是否加密 "result": false, "opAdmin": false }, "success": true, "error": false } ``` 核对验证码接口接口：http:// *:* /captcha/check 请求参数： ```json { "captchaType": "blockPuzzle", "pointJson": "QxIVdlJoWUi04iM+65hTow==", //aes加密坐标信息 "token": "71dd26999e314f9abb0c635336976635" //get请求返回的token } ``` 响应参数： ``` { "repCode": "0000", "repData": { "captchaType": "blockPuzzle", "token": "71dd26999e314f9abb0c635336976635", "result": true, "opAdmin": false }, "success": true, "error": false } ``` #### 测试接口 ![Snipaste_2024-05-28_08-51-17.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ccf3737adadd4446a24c8690e543d079~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=641&h=563&s=58147&e=png&b=2c2e31 "Snipaste_2024-05-28_08-51-17.png") #### 注册接口改造 1）用户注册请求体新增 captchaVerification 字段校验验证码： ```java @Data public class UserRegisterRequest implements Serializable { private static final long serialVersionUID = 3191241716373120793L; private String userAccount; private String userPassword; private String checkPassword; private String captchaVerification; } ``` 2）注册逻辑改造新增这段代码，获取 captchaVerification 通过 captchaService 进行校验： ```java CaptchaVO captchaVO = new CaptchaVO(); captchaVO.setCaptchaVerification(userRegisterRequest.getCaptchaVerification()); ResponseModel response = captchaService.verification(captchaVO); if(!response.isSuccess()){ //验证码校验失败，返回信息告诉前端 //repCode 0000 无异常，代表成功 //repCode 9999 服务器内部异常 //repCode 0011 参数不能为空 //repCode 6110 验证码已失效，请重新获取 //repCode 6111 验证失败 //repCode 6112 获取验证码失败,请联系管理员 throw new BusinessException(ErrorCode.FORBIDDEN_ERROR,"验证码错误请重试"); } ``` ### 前端开发我翻了翻官方的接口文档和示例 Demo ，发现怎么没有 React 的教程啊，前端新手直接头疼，欸不要担心，天无绝人之路。我找到了别的大佬封装的 React 版本的依赖，项目地址： #### 前端引入依赖 ```bash $ yarn add aj-captcha-react // or $ npm install aj-captcha-react ``` #### 直接项目中使用定义函数： ```javascript const ref = useRef(); const click = () => { ref.current?.verify(); console.log(ref.current?.verify()); }; ``` - 在登录按钮的时候配置上这个 click 方法就能弹出滑动校验码啦。使用组件： ```javascript { const value = valueData; if (value) { value.captchaVerification = data.captchaVerification; await handleSubmit(value); } }} path="http://localhost:8204/api" type="auto" ref={ref}> ``` - path 是你项目的前缀，不是验证码的全路径喔。 - onSuccess 是验证码滑动正确的回调，成功了才给他传参注册。完成之后就可以查看到效果啦，效果如下： ![Snipaste_2024-05-28_10-03-15.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c4eb0900c1a4a1daf7bd4e39b25260e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=505&h=559&s=97836&e=png&b=bbbaba "Snipaste_2024-05-28_10-03-15.png") 我是聪ζ希望可以跟大家一起学习，我的 Github：https://github.com/lhccong 如果里面有你感兴趣的项目不妨给我点个星星⭐和关注🔥，未来我还会持续写新的好玩的小项目。