防止数据泄露的最佳实践

数据加密与传输安全

前端处理敏感数据时，必须确保数据在传输和存储过程中的安全性。HTTPS是基础要求，但仅依赖传输层加密远远不够。关键数据应当在前端进行二次加密处理，常见的实现方式包括：

1. 使用Web Crypto API进行客户端加密

async function encryptData(data, secretKey) {
  const encoder = new TextEncoder();
  const dataBuffer = encoder.encode(data);
  const keyBuffer = encoder.encode(secretKey);
  
  const cryptoKey = await crypto.subtle.importKey(
    'raw',
    keyBuffer,
    { name: 'AES-GCM' },
    false,
    ['encrypt']
  );
  
  const iv = crypto.getRandomValues(new Uint8Array(12));
  const encrypted = await crypto.subtle.encrypt(
    { name: 'AES-GCM', iv },
    cryptoKey,
    dataBuffer
  );
  
  return { iv, encrypted };
}

2. 对表单敏感字段实施即时加密

document.querySelector('#credit-card').addEventListener('input', (e) => {
  const encrypted = window.btoa(e.target.value);
  e.target.dataset.encryptedValue = encrypted;
  e.target.value = ''; // 清空明文显示
});

输入验证与净化处理

不可信的用户输入是数据泄露的主要源头，必须实施严格的验证策略：

1. 实施白名单验证机制

function sanitizeInput(input) {
  const allowedChars = /^[a-zA-Z0-9\-_@. ]+$/;
  if (!allowedChars.test(input)) {
    return input.replace(/[^a-zA-Z0-9\-_@. ]/g, '');
  }
  return input;
}

2. 针对不同数据类型采用专用验证器

const emailValidator = (email) => 
  /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && 
  !/<script|javascript:/i.test(email);

const phoneValidator = (phone) => 
  /^[\d\-\+ ]+$/.test(phone) && 
  phone.replace(/\D/g, '').length >= 10;

安全的存储策略

浏览器端存储敏感数据需要特别注意：

1. 区分存储级别的重要性

// 敏感数据应使用sessionStorage且设置自动清除
const storeSessionData = (key, value) => {
  const encrypted = CryptoJS.AES.encrypt(value, 'secret').toString();
  sessionStorage.setItem(key, encrypted);
  window.addEventListener('beforeunload', () => sessionStorage.removeItem(key));
};

2. Cookie安全设置示例

document.cookie = `auth_token=${token}; 
  Secure; 
  HttpOnly; 
  SameSite=Strict; 
  Path=/; 
  Max-Age=${60 * 30}`; // 30分钟过期

防XSS攻击措施

跨站脚本攻击是数据泄露的常见途径：

1. 动态内容的安全渲染

function safeRender(content) {
  const div = document.createElement('div');
  div.textContent = content;
  return div.innerHTML
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

2. CSP策略实施示例

<meta http-equiv="Content-Security-Policy" 
  content="default-src 'self'; 
  script-src 'self' 'unsafe-inline' cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;
  connect-src 'self' api.example.com;">

第三方依赖的安全管理

前端项目依赖的第三方库可能成为安全漏洞：

1. 自动化依赖检查

// package.json示例配置
{
  "scripts": {
    "security-check": "npx audit-ci --moderate",
    "dep-check": "npx npm-check-updates -u"
  }
}

2. 动态加载资源的安全验证

function loadExternalScript(url, integrity) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.integrity = integrity;
    script.crossOrigin = 'anonymous';
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

// 使用示例
loadExternalScript(
  'https://cdn.example.com/library.js',
  'sha384-abc123...'
);

错误处理与日志记录

不当的错误处理可能暴露敏感信息：

1. 安全的错误信息处理

window.onerror = (msg, url, line) => {
  const safeMsg = msg.toString()
    .replace(/password=['"][^'"]*['"]/g, 'password=***')
    .replace(/token=['"][^'"]*['"]/g, 'token=***');
  
  console.error(`Safe Error: ${safeMsg} at ${url}:${line}`);
  return true; // 阻止默认错误处理
};

2. 生产环境错误日志过滤

function logError(error) {
  if (process.env.NODE_ENV === 'production') {
    const sanitized = {
      message: error.message.replace(/[^\w\s]/g, ''),
      stack: error.stack ? error.stack.split('\n')[0] : ''
    };
    sendToMonitoring(sanitized);
  } else {
    console.error(error);
  }
}

敏感操作的二次验证

关键操作需要额外保护层：

1. 重要操作确认流程

function confirmCriticalAction(action) {
  const modal = document.createElement('div');
  modal.innerHTML = `
    <div class="confirm-dialog">
      <p>请验证您的身份以继续</p>
      <input type="password" placeholder="账户密码">
      <button id="confirm">确认</button>
      <button id="cancel">取消</button>
    </div>
  `;
  
  return new Promise((resolve) => {
    modal.querySelector('#confirm').addEventListener('click', () => {
      if (validatePassword(modal.querySelector('input').value)) {
        action();
        resolve(true);
      }
    });
    modal.querySelector('#cancel').addEventListener('click', () => resolve(false));
    document.body.appendChild(modal);
  });
}

实时监控与警报机制

建立前端安全监控体系：

1. 异常行为检测

const activityMonitor = {
  normalPatterns: [
    /^click:button#submit$/,
    /^input:form#login/
  ],
  
  checkActivity(event) {
    const eventId = `${event.type}:${event.target.tagName.toLowerCase()}#${event.target.id}`;
    if (!this.normalPatterns.some(p => p.test(eventId))) {
      this.reportSuspicious(eventId);
    }
  },
  
  reportSuspicious(event) {
    navigator.sendBeacon('/security-log', JSON.stringify({
      event,
      timestamp: Date.now(),
      userAgent: navigator.userAgent
    }));
  }
};

document.addEventListener('click', activityMonitor.checkActivity.bind(activityMonitor));