数据安全考虑

数据安全的基本概念

数据安全在ECharts应用中至关重要，涉及数据的传输、存储和展示三个核心环节。未经保护的敏感数据可能导致信息泄露，甚至引发法律风险。例如，某医疗健康平台使用ECharts展示患者年龄分布时，若直接将包含身份证号的原始数据发送到前端，就违反了《个人信息保护法》的相关规定。

数据传输安全

HTTPS加密传输

所有包含图表数据的API请求必须通过HTTPS协议加密：

// 错误示例：使用HTTP明文传输
fetch('http://api.example.com/chart-data')

// 正确做法：强制HTTPS
fetch('https://api.example.com/chart-data', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
})

数据脱敏处理

服务端返回数据前应对敏感字段进行脱敏：

interface PatientData {
  id: number;
  name: string;  // 需脱敏
  diagnosis: string;
}

// 脱敏函数示例
function desensitize(data: PatientData[]): PatientData[] {
  return data.map(item => ({
    ...item,
    name: item.name.charAt(0) + '**'
  }));
}

前端数据存储安全

避免本地存储敏感数据

常见错误是将认证信息存入localStorage：

// 高危做法
localStorage.setItem('auth_token', 'eyJhbGci...');

// 推荐方案
sessionStorage.setItem('temp_chart_config', JSON.stringify(config));

Web Worker处理机密计算

对于需要前端计算的敏感数据，可使用Web Worker隔离执行环境：

// worker.js
self.onmessage = function(e) {
  const sensitiveData = decrypt(e.data.payload);
  const chartOption = processData(sensitiveData);
  postMessage(chartOption);
}

// 主线程
const worker = new Worker('worker.js');
worker.postMessage({ payload: encryptedData });

ECharts配置安全实践

关闭不必要的功能

在系统配置中禁用可能引发安全风险的特性：

option = {
  toolbox: {
    show: false // 禁用可能导出数据的工具箱
  },
  tooltip: {
    formatter: (params) => {
      // 过滤敏感信息
      return `${params.seriesName}: ${params.value.replace(/\d{4}$/, '****')}`
    }
  }
}

动态权限控制

根据用户权限动态生成图表配置：

function generateChartOptions(userRole) {
  const baseOption = {
    xAxis: { type: 'category' },
    series: [{ type: 'bar' }]
  };

  if (userRole === 'admin') {
    baseOption.toolbox = {
      show: true,
      feature: {
        dataView: { readOnly: false },
        saveAsImage: {}
      }
    };
  }
  return baseOption;
}

第三方依赖安全

定期更新ECharts版本

保持依赖库处于安全版本：

# 检查已知漏洞
npm audit

# 更新到安全版本
npm update echarts@5.4.3

内容安全策略(CSP)配置

在HTTP头中严格限制资源加载：

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'unsafe-eval' cdn.jsdelivr.net;
  style-src 'self' 'unsafe-inline';
  img-src data:;

数据渲染防护措施

防XSS注入

对动态生成的HTML内容进行转义：

function safeTooltipFormatter(params) {
  const div = document.createElement('div');
  div.textContent = params.name;
  return `${div.innerHTML}: ${params.value}`;
}

大数处理方案

处理可能引发内存泄漏的大型数据集：

option = {
  dataset: {
    source: largeData.map(item => ({
      ...item,
      // 精度控制防止浮点攻击
      value: Number(item.value.toFixed(4))
    }))
  },
  progressive: 1e6,  // 启用渐进式渲染
  progressiveThreshold: 1e6
}

审计与监控机制

用户行为日志

记录关键操作事件：

chart.on('click', (params) => {
  if (params.componentType === 'series') {
    logAnalytics({
      event: 'chart_click',
      data: {
        // 记录非敏感元数据
        seriesIndex: params.seriesIndex,
        dataIndex: params.dataIndex
      }
    });
  }
});

性能监控

检测异常数据量导致的性能问题：

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  if (entries.some(entry => entry.duration > 1000)) {
    alert('图表渲染超时');
  }
});
observer.observe({ entryTypes: ['measure'] });