前端监控系统

一个为了监控网站行为产生的系统。包括用户点击、用户输入、网络请求，路由跳转，指纹采集等。

行为监控

1. 点击事件 :ballot_box_with_check:
2. 输入事件​ :ballot_box_with_check:
3. 页面跳转监控 :ballot_box_with_check:

网络监控

1. XHR拦截：重写发送前和发送后信息。:ballot_box_with_check:
2. fetch拦截 :bookmark_tabs:

其他

1. 指纹采集：:ballot_box_with_check:
   1. canvas指纹
   2. webgl指纹
   3. audio指纹
2. MD5加密 :ballot_box_with_check:
3. 内容加密: RSA

信息传递

1. sendBean :ballot_box_with_check:
   1. https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon
   2. 可以直接看成POST请求
2. ~~IMG~~
3. XHR :ballot_box_with_check:

发送方式：优先使用sendBean，如不支持sendBean或内容超出Bean的最大长度限制则转为使用xhr发送。

信息发送时机

1. 主动传入最大堆栈数量，在达到数量时自动发送。
2. 设置定时时间，指定时间内无论是否满足最大堆栈均发起请求。
3. 页面发生跳转时，主动发起请求。
4. 页面第一次加载完成时，会单独发起一次请求。

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
}