标签: session-replay

嗨大家可以任何人在会话固定,会话重播和会话劫持攻击之间给出明显的区别,我已阅读了很多文章,但会议劫持和会话重播攻击之间的问题仍然不明确.....

提前致谢

我正在尝试为网站构建用户重播会话功能，并且我正在使用rrweb库来做到这一点。

这个库的作用是在录制时：它捕获网页中的所有事件，我可以通过将它们存储在 an 中来保存这些事件，array当我想重播会话时，我只需将 传递array给重播函数即可函数处理会话重放。

目前，出于测试目的，我将此数组保存在 my 中sessionStorage，每次发出新事件时，我都会将array新事件推送到其中，然后array再次将其保存在 my 中，sessionStorage如下所示：

rrweb.record({
    emit(event) {
        const sessions = JSON.parse(sessionStorage.getItem('sessions')) || [];
        sessions.push(event);
        sessionStorage.setItem('sessions', JSON.stringify(sessions));
    },
});

但是，对于生产，sessionStorage我不想将该数组保存在我的数组中，然后在每次发出新事件时更新它，而是想将该数组保存array在我的数据库中，并且我想调用将其保存array到我的数据库中的函数，无论何时用户logs out或当用户决定关闭网站时（例如按下按钮X）。

第一部分 - 当用户时logs out- 非常简单，我只需在按钮eventListener上添加一个logout，这是第二部分 - 当用户决定关闭网站时 - 这让我有些头痛。

我知道有这个beforeUnload事件，但是经过快速搜索后，我清楚地意识到它是不可靠的，所以基本上我正在寻找的是一种可靠的方法来确定用户何时关闭我的网站，这样我就可以触发一个async function将保存array到我的数据库。

我正在使用 Next.js 和样式组件的项目中工作。在我的文件 [slug].tsx 中：

export default function ProductDetails({ product }: IProductDetailsProps) {
  const router = useRouter();

  if (router.isFallback) {
    return (
      <LoadingContainer>
        <ReactLoading color="#000" type="bubbles" />
      </LoadingContainer>
    );
  }

  return (
    <>
      {product._id ? (
        <>
          <Header />

          <Container>
            <ProductPath>
              <Link href="/">Home</Link>

              <Link href="/shop">Shop</Link>

              {product.categoryId && (
                <Link href={`/shop/${product.categoryId.slug}`}>
                  {product.categoryId.name}
                </Link>
              )}

              <span>{product.name}</span>
            </ProductPath>

            <ProductInfo product={product} />
          </Container>
        </>
      ) : (
        <Error>An unexpected error has occurred.</Error>
      )}
    </>
  );
}

大多数标签来自 styled-components，例如：

export const LoadingContainer = styled.div`
  display: …