JS 监听用户页面访问&页面关闭操作并进行数据上报-阿里云开发者社区

JS 监听用户页面访问&页面关闭操作并进行数据上报

2024-05-26 39

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 该文主要讨论了一个网页安全项目的需求和实现，涉及用户访问和离开页面时的数据报告。需求包括首次进入、刷新、新标签页打开、导航切换以及页面关闭时的数据发送。技术要点包括使用Cookie和SessionStorage存储信息，事件监听以及navigator.sendBeacon方法进行数据发送。实现策略包括轮询检测URL变化和在unload事件中触发页面关闭报告。文章还提到了相关流程图和代码示例，总结中强调了数据上报在用户行为分析中的重要性。

前言

最近在做安全方面的项目，有个需求是在用户访问页面和关闭页面的时候，发送对应的数据。

刚拿到需求的时候，觉得没啥东西，init 的时候发送一次，页面 unload 的时候发送一次就行了，很简单，后面开发了一下，又根据当前项目，发现没这么简单

一、需求背景

1、项目需求

用户在页面访问时发送数据到后台，页面关闭时也发送数据到后台。

2、需求解析

很简单的一句话

但是我们前面说了，没有这么简单，那是因为我们的项目比较复杂

项目是一个庞大的项目，内部有好多子系统，子系统是通过 iframe 内嵌的
点击 nav 模块进入到子系统，当前页面的 hash 不会改变，只会改变 location.pathname 和 document.title，但是这两个改变有没有事件监听到
点击进入子系统时，也需要对之前的模块进行关闭上报和当前模块的访问上报
iframe 内嵌的项目不需要单独上报，在 top 层进行上报即可
iframe 内嵌的项目单独通过 URL 访问，则和当前项目一样，需要访问上报和关闭上报

3、需求概括

经过分析，整体需求分为如下几个点：

第一次进入页面时触发页面访问
刷新当前页面时触发页面访问
新 tab 进入页面时触发页面访问
当前页面点击 nav 进入其他模块时，触发页面关闭&页面访问
关闭页面时触发页面关闭

二、技术要点

主要包含以下几点：

cookie 存储
sessionStorage 存储
addEventListener 事件监听
navigator.sendBeacon 数据发送

1、Cookie 存储

使用 cookie 主要是因为项目的 domain 都一样，存储不同页面的 title、href、referrer 等数据

【Cookie】

2、SessionStorage 存储

这个主要是对在当前 tab 页下的跳转进行判断，用来区分是否首次进入当前 tab

【SessionStorage】

3、addEventListener 事件监听

事件监听，注意是用来监听 unload 事件。

【addEventListener MDN】

4、navigator.sendBeacon 数据发送

这个我们后面在水一篇文章，单独讲讲，本期只讲用法

navigator.sendBeacon() 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。

4.1. 语法

navigator.sendBeacon(url);
navigator.sendBeacon(url, data);

4.2. 参数

4.2.1. url

url 参数表明 data 将要被发送到的网络地址。

4.2.2. data 可选

data 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据。

4.3. 返回值

当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。

【navigator.sendBeacon】

三、需求实现

1、实现思路

1.1. 第一次进入页面

无 session 无 cookie
调用 urlDetectChange 函数
触发 openPage() 进行页面访问上报
设置 session 字段
setTimeout 轮询，设置 cookie 字段，监听 URL 变化

1.2. 刷新当前页面

有 session 有 cookie
触发页面访问上报
setTimeout 轮询，监听 URL 变化

1.3. 点击 nav 进入其他模块

有 session 有 cookie
setTimeout 轮询，当前 document 中的 title 和 href 与 cookie 中的不一致时，进行之前页面关闭上报和当前页面访问上报
设置新的 cookie 值
继续 setTimeout 轮询，监听 URL 变化

1.4. 新 tab 进入页面

有 cookie 无 session
触发页面访问上报
设置新的 cookie
继续 setTimeout 轮询，监听 URL 变化

1.5. 关闭 tab

触发 unload 监听事件
进行页面关闭上报

2、页面访问->页面关闭流程图

3、页面访问&页面关闭数据上报流程图

4、数据上报

/**
* 上报接口
* @param {object} data 上报接口参数
* @returns {boolean} sendBeacon 接口返回信息
*/
export const sendBeaconMessage = (data: object): boolean =>
  window.navigator.sendBeacon(
    'xxx',
    JSON.stringify(data)
  )

5、设置 cookie 的值

// Cookies 使用 js-cookie
/**
 * 设置 cookie 值
 * 设置 href、pageTitle、referrer 字段
 * key 为 ACCESS_CLOSE_COOKIE_NAME
 * domain 为 '.xxx.com'
 */
export const setAccessPageCookie = () =>
  Cookies.set(
    'ACCESS_CLOSE_COOKIE_NAME',
    JSON.stringify({
      href: location.href,
      pageTitle: document.title,
      referrer: document.referrer
    }),
    { domain: '.xxx.com', expires: 30 }
  )

6、页面访问发送消息

/**
 * 页面访问发送消息
 * @param {object} data 上报接口参数
 * 设置 sessionStorage 的值，
 */
export const openPageSendBeacon = async (data: object) => {
  sessionStorage.setItem('ACCESS_CLOSE_SESSION_NAME', 'ISTRUE')
  const sendBeaconSusscess = sendBeaconMessage(data)
  // 打印 sendBeaconSusscess 的值
  console.log(
    '%c client:sendDataToRemote use sendBeacon access page: %o',
    'color: green;',
    sendBeaconSusscess
  )
}

7、页面关闭发送消息

/**
 * 页面关闭发送消息
 * @param {object} data 上报接口参数
 */
export const closePageSendBeacon = async (data: object) => {
  const sendBeaconSusscess = sendBeaconMessage(data)
  // 打印 sendBeaconSusscess 的值
  console.log(
    '%c client:sendDataToRemote use sendBeacon close page: %o, ',
    'color: red;',
    sendBeaconSusscess
  )
}

8、URL 改变进行监听&页面关闭监听

/**
 * URL 改变事件
 */
export const urlDetectChange = () => {
  const accessPageData = Cookies.get('ACCESS_CLOSE_COOKIE_NAME')
    ? JSON.parse(Cookies.get('ACCESS_CLOSE_COOKIE_NAME'))
    : null
  const sessionAccessData = sessionStorage.getItem('ACCESS_CLOSE_SESSION_NAME')
  // 第一次进入页面 和 新 tab 进入页面
  if (!accessPageData || !sessionAccessData) {
    openPageSendBeacon({})
  }
  setTimeout(() => {
    if (
      accessPageData &&
      location.href !== accessPageData.href &&
      document.title !== accessPageData.pageTitle &&
      sessionAccessData
    ) {
      // 点击 nav 进入其他模块
      closePageSendBeacon({})
      openPageSendBeacon({})
    }
    setAccessPageCookie()
    urlDetectChange()
  }, 1000)
}
// 加这个是针对 iframe 内部的项目不进行监听，只在 top 层进行数据上报
if (window.top === window.self) {
  // 页面访问上报 刷新页面
  sessionStorage.getItem('ACCESS_CLOSE_SESSION_NAME') && openPageSendBeacon({})
  urlDetectChange()
  window.addEventListener('unload', () => closePageSendBeacon({}))
}

四、总结

页面访问&页面关闭数据上报能清楚的掌握用户的使用数据，对营销活动或者画像分析很有帮助
整体没有难点，就是不同项目不同分析
如果你的项目是 hash 改变，那就可以针对 hash 进行监听
主要就是使用 navigator.sendBeacon 进行可靠的数据传输