hello，大家好。在Web应用开发中，前端参数校验不仅是提升用户体验的关键环节，更是防御SQL注入等安全威胁的第一道屏障。这里我将分享个人前端参数校验的最佳实践有效阻止SQL注入攻击。
一、SQL注入攻击原理与前端防护价值
SQL注入攻击通过在输入字段中插入恶意SQL代码，欺骗后端数据库执行非预期操作。典型攻击示例：
-- 用户输入被直接拼接到SQL语句中
SELECT * FROM users WHERE username = 'admin' OR '1'='1' -- AND password = 'xxx'
虽然前端校验可被绕过（如直接发送HTTP请求），但其价值在于：
快速拦截明显恶意输入，减少无效请求
提供即时反馈，改善用户体验
与后端防护形成纵深防御体系
二、前端参数校验的核心策略
- 输入类型与格式校验
示例：用户注册表单校验
// 使用正则表达式定义校验规则
const validationRules = {
username: /^[a-zA-Z0-9_]{4,16}$/, // 字母数字下划线，4-16位
email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
password: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, // 至少8位，含字母数字
phone: /^1[3-9]\d{
9}$/ // 中国手机号
};
function validateInput(field, value) {
if (!validationRules[field]) return true;
return validationRules[field].test(value);
}
// 在表单提交时校验
document.getElementById('registerForm').addEventListener('submit', (e) => {
const inputs = e.target.querySelectorAll('input');
let isValid = true;
inputs.forEach(input => {
if (!validateInput(input.name, input.value)) {
showError(input, `请输入有效的${
input.placeholder}`);
isValid = false;
}
});
if (!isValid) e.preventDefault();
});
- 参数类型强制转换
示例：数字参数处理
function sanitizeNumber(input, defaultValue = 0) {
const num = parseInt(input, 10);
return isNaN(num) ? defaultValue : Math.max(defaultValue, num);
}
// 处理分页参数
const page = sanitizeNumber(new URLSearchParams(window.location.search).get('page'), 1);
const pageSize = sanitizeNumber(new URLSearchParams(window.location.search).get('size'), 10);
