Apache ECharts 图例组件XSS漏洞分析与修复方案

Apache ECharts作为一款优秀的数据可视化库，其安全性一直备受关注。近期发现5.3.2版本中存在一个值得警惕的安全隐患——图例组件的tooltip功能存在脚本注入风险。

风险原理

当图例数据中包含HTML标签时，组件会将这些标签解析为实际的DOM元素而非普通文本。这种设计使得恶意用户可以通过构造特殊数据在页面上执行任意JavaScript代码，典型的安全风险场景。

从技术实现层面看，问题出在图例tooltip的内容渲染环节。ECharts默认使用HTML格式渲染tooltip内容，但未对用户输入的数据进行适当的转义处理。当数据包含<script>等危险标签时，浏览器会直接执行其中的脚本代码。

风险验证

通过构造包含HTML标签的图例数据即可验证该问题。例如设置图例数据为：

data: ['<script>alert(1)</script>', '正常数据']

当用户将鼠标悬停在图例上时，tooltip会显示原始HTML内容而非转义后的文本。更危险的是，如果数据中包含<script>标签，其中的JavaScript代码将被浏览器执行。

影响范围

该风险影响所有使用图例组件且允许用户控制图例数据的场景。特别是在以下情况风险更高：

1. 动态生成图例数据的应用
2. 允许用户输入图例内容的系统
3. 从不可信数据源加载图表配置的场景

解决方案

针对此问题，开发者可以采取以下防护措施：

1. 数据转义
   在将数据传递给ECharts前，对所有用户输入的数据进行HTML实体转义：

   function escapeHtml(unsafe) {
     return unsafe
       .replace(/&/g, "&")
       .replace(/</g, "&lt;")
       .replace(/>/g, "&gt;")
       .replace(/"/g, "&quot;")
       .replace(/'/g, "&#039;");
   }
   

2. 配置安全选项
   使用ECharts的renderMode: 'richText'配置，强制使用安全文本渲染模式：

   tooltip: {
     renderMode: 'richText'
   }
   

3. 输入验证
   对用户输入的图例数据进行严格校验，过滤掉所有HTML标签和特殊字符。

最佳实践

对于ECharts的安全使用，建议遵循以下原则：

1. 永远不要信任客户端输入，即使是在内部系统中
2. 对动态数据实施多层防御（输入验证、输出编码、内容安全策略）
3. 保持ECharts版本更新，及时应用安全补丁
4. 在生产环境中启用CSP（内容安全策略）限制内联脚本执行

该风险的发现提醒我们，即使是成熟的开源项目也可能存在安全隐患。开发者在享受ECharts强大功能的同时，必须重视数据安全防护，特别是在处理用户可控数据时更应谨慎。通过实施适当的防御措施，可以确保数据可视化的同时不牺牲系统安全性。