rrweb项目中文本区域属性值未正确掩码的问题分析

背景介绍

rrweb是一个用于记录和回放Web应用用户操作的JavaScript库。在最新版本(rrweb-snapshot 2.0.0-alpha.17)中，发现了一个关于文本区域(textarea)属性值掩码处理的问题。

问题描述

当使用React等框架控制textarea元素时，通过设置value属性来更新内容，rrweb会记录两个事件：属性变更事件和输入变更事件。然而，在这两个事件中，属性变更事件中的value值未被正确掩码处理，而输入变更事件中的文本内容则被正确掩码。

技术细节

问题的核心在于genTextAreaValueMutation函数中的处理逻辑。该函数负责生成文本区域的变更记录，但在处理属性值时，直接从DOM节点的childNodes获取文本内容并拼接，没有应用任何掩码逻辑。

具体来说，函数中有如下代码片段：

item.attributes.value = Array.from(
  dom.childNodes(textarea),
  (cn) => dom.textContent(cn) || '',
).join('');

这段代码直接从DOM节点获取文本内容，而没有考虑是否应该对这些内容进行隐私保护处理(掩码)。

影响范围

这个问题主要影响以下场景：

1. 使用React等框架通过属性设置textarea值的情况
2. 使用类似typed.js这样的库，通过textContent或innerHTML设置文本内容的情况
3. 任何通过直接操作DOM属性而非用户输入来更新textarea内容的场景

解决方案

修复方案需要确保在生成文本区域变更记录时，对所有可能暴露敏感信息的途径都应用相同的掩码逻辑。这包括：

1. 属性变更事件中的value属性
2. 通过textContent或innerHTML设置的文本内容
3. 直接通过value属性设置的内容

最佳实践建议

对于开发者而言，在使用rrweb时应注意：

1. 确保测试所有文本输入场景，包括框架控制的输入和直接DOM操作
2. 对于敏感信息输入，考虑额外的保护层
3. 定期更新rrweb版本以获取最新的安全修复

总结

rrweb作为用户行为记录工具，正确处理敏感信息的掩码至关重要。这个问题的发现和修复提醒我们，在处理Web应用的隐私保护时，需要全面考虑所有可能暴露信息的途径，而不仅仅是用户直接输入的场景。