前端安全日志该记录哪些内容？怎么避免泄露敏感信息？

Prog.佳佳提问于 2026-03-15 11:51:20 阅读 51

安全

最近在做项目的安全审计，要求前端也要输出安全日志。但我有点懵，不知道该记什么——比如用户操作、接口调用这些能记吗？又怕不小心把 token 或用户隐私打到日志里，反而造成风险。

我试着加了个简单的样式来区分日志级别，但不确定这样是否安全：

.log-error {
  color: #d32f2f;
  font-weight: bold;
}
.log-info {
  color: #1976d2;
}
/* 没有隐藏任何字段，担心敏感数据被 CSS 泄露？ */

有没有实际经验的朋友说说，前端日志到底该怎么设计才既有效又安全？

我来解答赞 10 收藏

反馈

2 条解答

欧阳思晨 Lv1

前端安全日志就记这几类：登录登出、权限变更、敏感操作（删改）、接口异常、安全事件（XSS尝试等）。

敏感数据过滤是核心，写个工具函数在记录前统一处理：

// 敏感字段黑名单

const SENSITIVE_FIELDS = ['token', 'password', 'pwd', 'creditCard', 'idCard', 'phone', 'email'];



// 递归过滤对象中的敏感字段

function sanitizeLogData(data) {

  if (!data) return data;

  

  if (typeof data === 'string') {

    // 简单掩码处理

    SENSITIVE_FIELDS.forEach(field => {

      const regex = new RegExp("(${field})"\s*:\s*"([^"]+)", 'gi');

      data = data.replace(regex, "$1": "******");

    });

    return data;

  }

  

  if (typeof data === 'object') {

    const result = {};

    for (const key in data) {

      const lowerKey = key.toLowerCase();

      if (SENSITIVE_FIELDS.some(f => lowerKey.includes(f))) {

        result[key] = '******';

      } else if (typeof data[key] === 'object') {

        result[key] = sanitizeLogData(data[key]);

      } else {

        result[key] = data[key];

      }

    }

    return result;

  }

  

  return data;

}



// 记录安全日志

function securityLog(level, action, data) {

  const safeData = sanitizeLogData(data);

  console[level]('[SECURITY]', new Date().toISOString(), action, safeData);

  // 上报你的日志服务

  // sendToLogService({ level, action, data: safeData, timestamp: Date.now() });

}



// 使用示例

securityLog('warn', 'USER_LOGIN_FAILED', { username: 'test', token: 'abc123', ip: '192.168.1.1' });

// 输出: [SECURITY] "2024-01-01T00:00:00.000Z" "USER_LOGIN_FAILED" { username: "test", token: "******", ip: "192.168.1.1" }

至于你那个CSS样式，日志输出到console本身没问题，但别把日志直接渲染到页面上，不然有XSS风险。生产环境直接上报后端日志服务，别在页面里玩花活。

2026-03-19 23:08

长孙舒婕 Lv1

前端安全日志这事儿说简单也简单，说坑多也确实多。

先说该记什么。安全日志主要盯这几类：认证相关的（登录失败、token失效、异地登录检测）、接口层面的（调用失败、非200状态码、接口被拦截）、前端异常的（JS报错、组件崩溃）、还有敏感操作（修改密码、删除数据、支付相关）。这些是必须要记录的，能帮你在出问题时快速定位。

关键是怎么过滤敏感信息。简单说就是白名单机制——默认所有字段都不记录，只显式配置允许记录的字段。比如用户ID可以记，但token、密码、手机号、身份证号、邮箱这些一律脱敏或直接不记录。脱敏方式很简单，手机号留前三后三位，姓名留第一个字，其他用*号代替。

你那个CSS样式的问题，放心，颜色配置本身不会泄露数据。但要注意一点：如果日志是输出到页面的div里展示，那就要小心了——这种场景下绝对不能直接打印完整对象，必须先脱敏。如果是console.log输出到开发者工具，那问题不大，毕竟只有自己能看到。

实际落地的时候，建议你搞两套日志系统。一个是本地调试用的，可以打详细一点；另一个是上报到服务端的，这个必须严格过滤敏感字段。上报前最好统一做一次敏感信息扫描，发现有疑似token、password这些关键字的直接拦截或脱敏。

还有个细节，接口请求的URL可以记，但query参数里如果有敏感信息要过滤掉。body参数同理，特别是POST请求的body。

2026-03-16 21:01