security
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSecurity Best Practices
Web应用安全最佳实践
Essential security patterns for web development.
Web开发必备的安全模式。
Instructions
操作指南
1. Environment Variables
1. 环境变量
bash
undefinedbash
undefined✅ .env file (never commit)
✅ .env文件（切勿提交）
DATABASE_URL=postgresql://...
JWT_SECRET=your-secret-key
API_KEY=xxx
DATABASE_URL=postgresql://...
JWT_SECRET=your-secret-key
API_KEY=xxx
✅ .gitignore
✅ .gitignore
.env
.env.local
.env.*.local
```typescript
// ✅ Access with validation
const dbUrl = process.env.DATABASE_URL;
if (!dbUrl) throw new Error('DATABASE_URL required');.env
.env.local
.env.*.local
```typescript
// ✅ 带验证的访问
const dbUrl = process.env.DATABASE_URL;
if (!dbUrl) throw new Error('DATABASE_URL required');2. XSS Prevention
2. XSS防护
typescript
// ❌ Bad - direct HTML injection
element.innerHTML = userInput;
// ✅ Good - use textContent
element.textContent = userInput;
// ✅ Good - sanitize if HTML needed
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);typescript
// ❌ 错误示例 - 直接HTML注入
element.innerHTML = userInput;
// ✅ 正确示例 - 使用textContent
element.textContent = userInput;
// ✅ 正确示例 - 若需HTML则进行清理
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);3. SQL Injection Prevention
3. SQL注入防范
typescript
// ❌ Bad - string concatenation
const query = `SELECT * FROM users WHERE id = ${userId}`;
// ✅ Good - parameterized queries
const user = await prisma.user.findUnique({
where: { id: userId }
});
// ✅ Good - prepared statements
const [rows] = await db.execute(
'SELECT * FROM users WHERE id = ?',
[userId]
);typescript
// ❌ 错误示例 - 字符串拼接
const query = `SELECT * FROM users WHERE id = ${userId}`;
// ✅ 正确示例 - 参数化查询
const user = await prisma.user.findUnique({
where: { id: userId }
});
// ✅ 正确示例 - 预编译语句
const [rows] = await db.execute(
'SELECT * FROM users WHERE id = ?',
[userId]
);4. Authentication
4. 身份验证
typescript
// ✅ Password hashing
import bcrypt from 'bcrypt';
const hash = await bcrypt.hash(password, 12);
const isValid = await bcrypt.compare(password, hash);
// ✅ JWT with expiration
const token = jwt.sign(
{ userId: user.id },
process.env.JWT_SECRET,
{ expiresIn: '1h' }
);typescript
// ✅ 密码哈希
import bcrypt from 'bcrypt';
const hash = await bcrypt.hash(password, 12);
const isValid = await bcrypt.compare(password, hash);
// ✅ 带过期时间的JWT
const token = jwt.sign(
{ userId: user.id },
process.env.JWT_SECRET,
{ expiresIn: '1h' }
);5. Input Validation
5. 输入验证
typescript
import { z } from 'zod';
const UserSchema = z.object({
email: z.string().email(),
password: z.string().min(8),
age: z.number().min(18).max(120)
});
// Validate before use
const result = UserSchema.safeParse(input);
if (!result.success) {
throw new Error('Invalid input');
}typescript
import { z } from 'zod';
const UserSchema = z.object({
email: z.string().email(),
password: z.string().min(8),
age: z.number().min(18).max(120)
});
// 使用前先验证
const result = UserSchema.safeParse(input);
if (!result.success) {
throw new Error('Invalid input');
}6. HTTPS & Headers
6. HTTPS与安全头
typescript
// ✅ Security headers
app.use(helmet());
// ✅ CORS configuration
app.use(cors({
origin: ['https://yourdomain.com'],
credentials: true
}));typescript
// ✅ 安全头配置
app.use(helmet());
// ✅ CORS配置
app.use(cors({
origin: ['https://yourdomain.com'],
credentials: true
}));7. Rate Limiting
7. 请求频率限制
typescript
import rateLimit from 'express-rate-limit';
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 100 // limit per IP
});
app.use('/api', limiter);typescript
import rateLimit from 'express-rate-limit';
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15分钟
max: 100 // 每个IP的请求限制数
});
app.use('/api', limiter);