防止 NoSQL 注入的前端措施

NoSQL 注入的基本原理

NoSQL 注入是一种针对非关系型数据库的攻击方式，攻击者通过构造特殊的输入数据，绕过应用程序的安全检查，直接操作数据库。与传统的 SQL 注入不同，NoSQL 注入利用了应用程序对用户输入数据的处理不当，通常发生在使用 MongoDB、CouchDB 等 NoSQL 数据库的系统中。

典型的 NoSQL 注入攻击方式包括：

1. 操作符注入：攻击者通过提交包含 MongoDB 操作符（如 $ne、$gt）的数据来改变查询逻辑
2. JavaScript 注入：在允许执行 JavaScript 的数据库（如 MongoDB）中注入恶意代码
3. 布尔盲注：通过观察应用程序对不同输入的响应差异来推断数据

前端输入验证的重要性

前端输入验证是防止 NoSQL 注入的第一道防线。虽然最终的数据验证应该在服务端完成，但前端验证可以拦截大部分恶意输入，减轻服务器负担并提升用户体验。

// 示例：基本的输入验证函数
function validateInput(input) {
  // 检查是否包含 MongoDB 操作符
  const mongoOperators = ['$ne', '$gt', '$lt', '$in', '$nin', '$regex'];
  for (const op of mongoOperators) {
    if (input.includes(op)) {
      return false;
    }
  }
  
  // 检查是否包含潜在的 JavaScript 代码
  if (/(<script>|function\(|eval\(|\.js\b)/i.test(input)) {
    return false;
  }
  
  // 根据业务需求添加其他验证规则
  return true;
}

参数化查询的实现

参数化查询是防止注入攻击的有效手段，前端可以通过以下方式实现类似效果：

1. 使用预定义的查询模板
2. 严格分离数据和查询逻辑
3. 使用专门的查询构建工具

// 示例：安全的查询构建函数
function buildSafeQuery(filters) {
  const validFilters = {};
  
  // 白名单方式验证字段
  const allowedFields = ['username', 'email', 'age'];
  
  for (const [field, value] of Object.entries(filters)) {
    if (!allowedFields.includes(field)) continue;
    
    // 对值进行转义处理
    if (typeof value === 'string') {
      validFilters[field] = escapeString(value);
    } else {
      validFilters[field] = value;
    }
  }
  
  return validFilters;
}

function escapeString(str) {
  return str.replace(/[\\'"$]/g, '\\$&');
}

内容安全策略(CSP)的应用

内容安全策略可以帮助缓解某些类型的注入攻击，特别是涉及 JavaScript 执行的攻击：

<!-- 示例 CSP 策略 -->
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  connect-src 'self';
  object-src 'none';
  base-uri 'self';
">

前端框架的安全特性

现代前端框架提供了内置的防护机制，合理使用可以增强安全性：

React 的防护措施

function UserProfile({ username }) {
  // React 自动转义内容
  return <div>{username}</div>;
}

Vue 的防护措施

new Vue({
  el: '#app',
  data: {
    userInput: ''
  },
  // Vue 的插值表达式自动转义 HTML
  template: `<div>{{ userInput }}</div>`
});

客户端数据存储的安全处理

当使用 localStorage、sessionStorage 或 IndexedDB 时，需要注意：

// 安全存储示例
function safeStorageSet(key, value) {
  try {
    const sanitized = JSON.stringify(value);
    localStorage.setItem(key, sanitized);
  } catch (e) {
    console.error('Storage error:', e);
  }
}

// 安全获取示例
function safeStorageGet(key) {
  try {
    const data = localStorage.getItem(key);
    return data ? JSON.parse(data) : null;
  } catch (e) {
    console.error('Storage error:', e);
    return null;
  }
}

API 请求的安全处理

前端与后端 API 交互时的安全注意事项：

// 安全的 API 请求示例
async function safeApiRequest(endpoint, data) {
  // 验证 endpoint 是否在白名单内
  const allowedEndpoints = ['/users', '/products'];
  if (!allowedEndpoints.includes(endpoint)) {
    throw new Error('Invalid endpoint');
  }
  
  // 清理请求数据
  const cleanData = sanitizeData(data);
  
  try {
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: JSON.stringify(cleanData)
    });
    
    return await response.json();
  } catch (error) {
    console.error('API request failed:', error);
    throw error;
  }
}

function sanitizeData(data) {
  // 实现具体的数据清理逻辑
  return Object.fromEntries(
    Object.entries(data).map(([key, value]) => {
      return [key, typeof value === 'string' ? escapeString(value) : value];
    })
  );
}

错误处理与日志记录

前端错误处理和日志记录可以帮助发现潜在的注入尝试：

// 前端错误监控示例
window.addEventListener('error', (event) => {
  const errorData = {
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    stack: event.error?.stack,
    timestamp: new Date().toISOString()
  };
  
  // 安全地发送错误日志
  safeApiRequest('/log/error', errorData).catch(() => {
    // 备用日志存储
    safeStorageSet('error_logs', [
      ...(safeStorageGet('error_logs') || []),
      errorData
    ]);
  });
});

用户输入的可视化反馈

提供清晰的输入反馈可以帮助用户理解输入限制，减少恶意尝试：

// 输入实时反馈示例
document.getElementById('username').addEventListener('input', (event) => {
  const input = event.target.value;
  const feedback = document.getElementById('username-feedback');
  
  if (input.length < 3) {
    feedback.textContent = '用户名太短';
    feedback.className = 'error';
  } else if (!/^[a-zA-Z0-9_]+$/.test(input)) {
    feedback.textContent = '只能包含字母、数字和下划线';
    feedback.className = 'error';
  } else if (validateInput(input) === false) {
    feedback.textContent = '包含非法字符';
    feedback.className = 'error';
  } else {
    feedback.textContent = '用户名可用';
    feedback.className = 'success';
  }
});

安全编码的最佳实践

1. 始终假设所有用户输入都是不可信的
2. 使用最新的安全库和框架版本
3. 定期进行安全审计和代码审查
4. 实施最小权限原则
5. 保持对新兴威胁和安全更新的关注

// 示例：安全的表单处理
document.getElementById('login-form').addEventListener('submit', async (event) => {
  event.preventDefault();
  
  const formData = {
    username: document.getElementById('username').value,
    password: document.getElementById('password').value
  };
  
  // 前端验证
  if (!validateInput(formData.username) || !validateInput(formData.password)) {
    showError('输入包含非法字符');
    return;
  }
  
  try {
    const response = await safeApiRequest('/login', formData);
    if (response.success) {
      redirectToDashboard();
    } else {
      showError(response.message || '登录失败');
    }
  } catch (error) {
    showError('网络错误，请重试');
  }
});