Back to skills
SKILL.md
Security Best Practices
ASecuritySecurity best practices for React/Next.js - XSS, CSRF, authentication, and API security
- 7 stars
- 0 votes
- 2 copies
- 25 views
- Added June 14, 2026
Works with
Security analysis
100/100npx -y skills add fratilanico/apex-os-bad-boy --skill security-best-practices --agent claude-codeAre you the author of Security Best Practices?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/fratilanico-security-best-practices)---
name: security-best-practices
description: Security best practices for React/Next.js - XSS, CSRF, authentication, and API security
tier: CRITICAL
value_tier: production
tags: [security, authentication, best-practices]
entitlements: { product_tiers: [all], agent_access: [all] }
---
# Security Best Practices
## Authentication
### Secure Session Management
- Use HTTP-only, Secure cookies
- Implement CSRF protection
- Set appropriate cookie expiry
- Rotate tokens regularly
### Password Handling
- Never store plain text passwords
- Use strong hashing (bcrypt, argon2)
- Implement rate limiting on login
- Add captcha for failed attempts
## Data Protection
### Input Validation
```typescript
import { z } from 'zod'
const UserSchema = z.object({
email: z.string().email(),
password: z.string().min(8).max(100),
name: z.string().max(100)
})
```
### SQL Injection Prevention
- Use parameterized queries
- Never concatenate user input to queries
- Use ORM/Query Builder
## XSS Prevention
### React Protection
- React escapes by default
- Use dangerouslySetInnerHTML sparingly
- Sanitize user input
- Use Content Security Policy
## API Security
### Rate Limiting
```typescript
import { rateLimit } from './lib/rate-limit'
export async function POST(req: Request) {
const ip = req.headers.get('x-forwarded-for') || 'unknown'
const { success } = await rateLimit.limit(ip)
if (!success) {
return new Response('Too Many Requests', { status: 429 })
}
// Process request
}
```
### CORS Configuration
```typescript
// Only allow specific origins
export default function handler(req, res) {
res.setHeader('Access-Control-Allow-Origin', 'https://yoursite.com')
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
res.setHeader('Access-Control-Allow-Credentials', 'true')
}
```
## Environment Variables
- Never commit secrets to git
- Use .env.local for local development
- Use Vercel env vars for production
- Prefix sensitive variables (e.g., NEXT_PUBLIC_ only for public)
Attribution
Comments
Loading comments…
Newsletter
Get the weekly list of safe new skills, and the ones we pulled.