欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

给裸接口加一道防护,避免恶意盗刷和爬取_html/css_WEB-ITnose

程序员文章站 2022-06-12 12:40:19
...
WEB应用是开放的,WEB前端代码也是公开的,和后端交互的接口如果没有经过特殊处理(加密/token),那么就是裸露的,只要知道api地址,那么就能随便获取应用数据。这样应用数据就很容易被人爬取或者恶意盗刷,典型的短信被恶意盗刷。

公司理财产品的短信接口就是一个裸接口,只要手机号就可以任意盗刷,当然背后有根据手机号,ip地址做了请求限制,但还是不够。后面就加了一定时间内一定请求次数的Token,后面观察,基本没有被刷的迹象,说明新的机制还是起到很大作用。当然这个机制不仅是用于防短信盗刷,可用于任意的裸接口防护。

原理很简单,就是在web页面请求的时候由后端按一定的算法注入token到页面中去,然后前端可以通过对应的规则取到token,在请求接口数据时带上去就能在后端对token进行验证,验证通过就能正常请求到数据。如果是native app ,可通过加密的方法请求接口来获取token,最简单直接的方式就是native app 客户端使用一段字符串+时间戳(从后端获取)进行加密,然后请求后端接口,接口对数据进行解密,对时间戳对比,在一段时间内认为有效(避免加密信息被拦截,所以加了时间戳校验),从而获取token。

当然web应用都是公开的,所有源码理论上都是能获取到的。那么后端向web页面注入token的方式也能被破解,所以,后端注入token的形式可定制,比如注入到请求,或者自己实现一套算法,增加被破解的难度。

把这套机制整理成一个独立的npm包 access-token-api,方便多项目复用。

使用例子:

npm install access-token-api//server(nodejs)  端var accessTokenApi = require('access-token-api');var TokenApi = new accessTokenApi({    webTokenVarName:'encrypt_api_tokenStr',//前端可通过webTokenVarName变量去到token值,默认encrypt_api_tokenStr});//web前端取token值window[webTokenVarName] //请求接口时带上这个值就能进行token校验了

主要接口

生成token api issue验证token api verifytoken 有效次数减一 api declineserver 端 将token 注入到 web 前端页面 api webInject

自定义后端注入token到web前端页面的方式,可以初始化模块时自定义webInject参数(函数)

var TokenApi = new accessTokenApi({    webInject:function(html,token,callback){    var htmlEndIndex = html.indexOf('