Matomo会话录制功能中的CSS类名过滤问题解析

问题背景

Matomo作为一款开源网站分析平台，其高级插件HeatmapandSessionRecording提供了会话录制功能，能够记录用户在网站上的操作行为。然而，在最新版本中发现了一个影响页面样式渲染的问题：在录制会话时，系统会错误地过滤掉部分CSS类名，导致回放时页面样式显示异常。

技术原理分析

会话录制功能的核心机制是通过记录用户访问时的DOM结构和操作事件，然后在回放时重建页面。在这个过程中，系统会对HTML内容进行XSS安全检查，防止恶意代码注入。但当前实现存在一个缺陷：

1. 安全检查机制会检查HTML属性值中是否包含"script"字符串
2. 当检测到"description"属性值中包含"script"时，会错误地将整个class属性移除
3. 这导致类似class="rte product-single__description"这样的合法CSS类名被过滤

影响范围

该问题主要影响：

• 使用包含"script"子字符串的CSS类名的网站
• 特别是那些类名中包含"description"的页面元素
• 导致回放时页面布局和样式与原始页面不一致

解决方案

Matomo团队已在HeatmapandSessionRecording插件v5.1.7版本中修复了此问题。修复方案包括：

1. 改进了XSS检查逻辑，避免误判合法CSS类名
2. 确保只过滤真正的脚本注入风险，保留合法的class属性
3. 增强了对HTML属性的处理逻辑

最佳实践建议

对于使用会话录制功能的用户，建议：

1. 确保使用最新版本的Matomo和插件
2. 定期检查录制回放效果与原始页面的差异
3. 对于关键页面，可考虑手动验证录制效果
4. 如发现样式问题，可检查是否涉及被过滤的类名

总结

这个案例展示了安全机制与功能完整性之间的平衡问题。Matomo团队通过快速响应和版本更新，既保持了系统的安全性，又确保了录制功能的准确性。对于企业用户而言，及时更新到修复版本是确保数据分析准确性的关键。