1.0.2 • Published 2 years ago
wk-web-monitor v1.0.2
前端监控系统
一个为了监控网站行为产生的系统。包括用户点击
、用户输入
、网络请求
,路由跳转
,指纹采集
等。
行为监控
- 点击事件 :ballot_box_with_check:
- 输入事件 :ballot_box_with_check:
- 页面跳转监控 :ballot_box_with_check:
网络监控
- XHR拦截:重写发送前和发送后信息。:ballot_box_with_check:
- fetch拦截 :bookmark_tabs:
其他
- 指纹采集::ballot_box_with_check:
- canvas指纹
- webgl指纹
- audio指纹
- MD5加密 :ballot_box_with_check:
- 内容加密: RSA
信息传递
- sendBean :ballot_box_with_check:
IMG- XHR :ballot_box_with_check:
发送方式:优先使用sendBean,如不支持sendBean或内容超出Bean的最大长度限制则转为使用xhr发送。
信息发送时机
- 主动传入最大堆栈数量,在达到数量时自动发送。
- 设置定时时间,指定时间内无论是否满足最大堆栈均发起请求。
- 页面发生跳转时,主动发起请求。
- 页面第一次加载完成时,会单独发起一次请求。
JS行为记录 参数
{
//当前应用标识
appid:"",
//用户指纹
finger:{
canvas:'',
webgl:'',
audio:''
},
// 所在页面的href
page:"http://www.wankong.top/#/article/14"
//事件类型 具体标识见下文
type:'',
// 时间戳
t:1659920178338,
//具体传递的信息
data:{
...
}
}
类型
enum ActionType {
HTTP = "http",
INPUT = "input",
CLCIK = "click",
ROUTE = "route",
PAGE = "page",
IP='ip',
}
IP地址(接收端获取
{
ip:'12.12.12.12'
}
页面加载信息
在第一次进入页面或者跳转其他页面时触发,SPA在hash下也会触发
//页面信息:
// type:page/route page:首次进入,route:页面跳转
{
//触发的方式,
// open:首次加载 ,还有可能 存在 pushstate...等
"type":'',
//"host": "127.0.0.1:5174",
//"hostname": "127.0.0.1",
"href": "http://127.0.0.1:5174/",
//"protocol": "http:",
//"origin": "http://127.0.0.1:5174",
//"port": "5174",
//"pathname": "/",
//"search": "",
// referer来源
"referer": "http://www.baidu.com",
//"hash": "",
"title": "Vite + TS",
//"language": "zh",
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36",
"winScreen": "1920x1080",
//"docScreen": "691x625"
}
点击事件
在用户点击页面任意元素时均会触发。
//点击事件
//type:click
{
// 点击坐标 x,y
"position": "36,37",
// 最大化定位dom所在位置
"path": "html>body>div #app>div .container>button"
}
输入事件
在用户对输入控件进行键入操作时会触发。
//输入事件
// type: input
{
// 最大化定位dom所在位置
"path": "html>body>div #app>div .container>div .section>form>input[name=username ]",
//输入框当前的值
"value": "sss",
//用户当前键入的值 ,可能为空
"input": "s"
}
网络请求
全局拦截网络请求,在发起ajax请求时会进行拦截。(以后可能会添加fetch的拦截)
//xhr
// type:http
{
//请求方式
"method": "GET",
// 请求地址
"url": "http://spring.wankong.top/api/blog?limit=5&pages=1",
//请求参数 post时是body的值
"body": "",
// 请求发起的时间 戳
"requestTime": 1659494982456,
//请求返回的状态码
"status": 200,
// 相应内容
"response": "返回的response",
//相应时间
"endTime": 1659494982984
}