Add files via upload

2026-01-22 19:05:34 +05:30
parent 41fa3734ba
commit ebdc51708c
2 changed files with 1553 additions and 0 deletions
--- a/skills/api-security-best-practices/SKILL.md
+++ b/skills/api-security-best-practices/SKILL.md
@@ -0,0 +1,907 @@
+---
+name: api-security-best-practices
+description: "Implement secure API design patterns including authentication, authorization, input validation, rate limiting, and protection against common API vulnerabilities"
+---
+
+# API Security Best Practices
+
+## Overview
+
+Guide developers in building secure APIs by implementing authentication, authorization, input validation, rate limiting, and protection against common vulnerabilities. This skill covers security patterns for REST, GraphQL, and WebSocket APIs.
+
+## When to Use This Skill
+
+- Use when designing new API endpoints
+- Use when securing existing APIs
+- Use when implementing authentication and authorization
+- Use when protecting against API attacks (injection, DDoS, etc.)
+- Use when conducting API security reviews
+- Use when preparing for security audits
+- Use when implementing rate limiting and throttling
+- Use when handling sensitive data in APIs
+
+## How It Works
+
+### Step 1: Authentication & Authorization
+
+I'll help you implement secure authentication:
+- Choose authentication method (JWT, OAuth 2.0, API keys)
+- Implement token-based authentication
+- Set up role-based access control (RBAC)
+- Secure session management
+- Implement multi-factor authentication (MFA)
+
+### Step 2: Input Validation & Sanitization
+
+Protect against injection attacks:
+- Validate all input data
+- Sanitize user inputs
+- Use parameterized queries
+- Implement request schema validation
+- Prevent SQL injection, XSS, and command injection
+
+### Step 3: Rate Limiting & Throttling
+
+Prevent abuse and DDoS attacks:
+- Implement rate limiting per user/IP
+- Set up API throttling
+- Configure request quotas
+- Handle rate limit errors gracefully
+- Monitor for suspicious activity
+
+### Step 4: Data Protection
+
+Secure sensitive data:
+- Encrypt data in transit (HTTPS/TLS)
+- Encrypt sensitive data at rest
+- Implement proper error handling (no data leaks)
+- Sanitize error messages
+- Use secure headers
+
+### Step 5: API Security Testing
+
+Verify security implementation:
+- Test authentication and authorization
+- Perform penetration testing
+- Check for common vulnerabilities (OWASP API Top 10)
+- Validate input handling
+- Test rate limiting
+
+
+## Examples
+
+### Example 1: Implementing JWT Authentication
+
+```markdown
+## Secure JWT Authentication Implementation
+
+### Authentication Flow
+
+1. User logs in with credentials
+2. Server validates credentials
+3. Server generates JWT token
+4. Client stores token securely
+5. Client sends token with each request
+6. Server validates token
+
+### Implementation
+
+#### 1. Generate Secure JWT Tokens
+
+\`\`\`javascript
+// auth.js
+const jwt = require('jsonwebtoken');
+const bcrypt = require('bcrypt');
+
+// Login endpoint
+app.post('/api/auth/login', async (req, res) => {
+  try {
+    const { email, password } = req.body;
+    
+    // Validate input
+    if (!email || !password) {
+      return res.status(400).json({ 
+        error: 'Email and password are required' 
+      });
+    }
+    
+    // Find user
+    const user = await db.user.findUnique({ 
+      where: { email } 
+    });
+    
+    if (!user) {
+      // Don't reveal if user exists
+      return res.status(401).json({ 
+        error: 'Invalid credentials' 
+      });
+    }
+    
+    // Verify password
+    const validPassword = await bcrypt.compare(
+      password, 
+      user.passwordHash
+    );
+    
+    if (!validPassword) {
+      return res.status(401).json({ 
+        error: 'Invalid credentials' 
+      });
+    }
+    
+    // Generate JWT token
+    const token = jwt.sign(
+      { 
+        userId: user.id,
+        email: user.email,
+        role: user.role
+      },
+      process.env.JWT_SECRET,
+      { 
+        expiresIn: '1h',
+        issuer: 'your-app',
+        audience: 'your-app-users'
+      }
+    );
+    
+    // Generate refresh token
+    const refreshToken = jwt.sign(
+      { userId: user.id },
+      process.env.JWT_REFRESH_SECRET,
+      { expiresIn: '7d' }
+    );
+    
+    // Store refresh token in database
+    await db.refreshToken.create({
+      data: {
+        token: refreshToken,
+        userId: user.id,
+        expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
+      }
+    });
+    
+    res.json({
+      token,
+      refreshToken,
+      expiresIn: 3600
+    });
+    
+  } catch (error) {
+    console.error('Login error:', error);
+    res.status(500).json({ 
+      error: 'An error occurred during login' 
+    });
+  }
+});
+\`\`\`
+
+#### 2. Verify JWT Tokens (Middleware)
+
+\`\`\`javascript
+// middleware/auth.js
+const jwt = require('jsonwebtoken');
+
+function authenticateToken(req, res, next) {
+  // Get token from header
+  const authHeader = req.headers['authorization'];
+  const token = authHeader && authHeader.split(' ')[1]; // Bearer TOKEN
+  
+  if (!token) {
+    return res.status(401).json({ 
+      error: 'Access token required' 
+    });
+  }
+  
+  // Verify token
+  jwt.verify(
+    token, 
+    process.env.JWT_SECRET,
+    { 
+      issuer: 'your-app',
+      audience: 'your-app-users'
+    },
+    (err, user) => {
+      if (err) {
+        if (err.name === 'TokenExpiredError') {
+          return res.status(401).json({ 
+            error: 'Token expired' 
+          });
+        }
+        return res.status(403).json({ 
+          error: 'Invalid token' 
+        });
+      }
+      
+      // Attach user to request
+      req.user = user;
+      next();
+    }
+  );
+}
+
+module.exports = { authenticateToken };
+\`\`\`
+
+#### 3. Protect Routes
+
+\`\`\`javascript
+const { authenticateToken } = require('./middleware/auth');
+
+// Protected route
+app.get('/api/user/profile', authenticateToken, async (req, res) => {
+  try {
+    const user = await db.user.findUnique({
+      where: { id: req.user.userId },
+      select: {
+        id: true,
+        email: true,
+        name: true,
+        // Don't return passwordHash
+      }
+    });
+    
+    res.json(user);
+  } catch (error) {
+    res.status(500).json({ error: 'Server error' });
+  }
+});
+\`\`\`
+
+#### 4. Implement Token Refresh
+
+\`\`\`javascript
+app.post('/api/auth/refresh', async (req, res) => {
+  const { refreshToken } = req.body;
+  
+  if (!refreshToken) {
+    return res.status(401).json({ 
+      error: 'Refresh token required' 
+    });
+  }
+  
+  try {
+    // Verify refresh token
+    const decoded = jwt.verify(
+      refreshToken, 
+      process.env.JWT_REFRESH_SECRET
+    );
+    
+    // Check if refresh token exists in database
+    const storedToken = await db.refreshToken.findFirst({
+      where: {
+        token: refreshToken,
+        userId: decoded.userId,
+        expiresAt: { gt: new Date() }
+      }
+    });
+    
+    if (!storedToken) {
+      return res.status(403).json({ 
+        error: 'Invalid refresh token' 
+      });
+    }
+    
+    // Generate new access token
+    const user = await db.user.findUnique({
+      where: { id: decoded.userId }
+    });
+    
+    const newToken = jwt.sign(
+      { 
+        userId: user.id,
+        email: user.email,
+        role: user.role
+      },
+      process.env.JWT_SECRET,
+      { expiresIn: '1h' }
+    );
+    
+    res.json({
+      token: newToken,
+      expiresIn: 3600
+    });
+    
+  } catch (error) {
+    res.status(403).json({ 
+      error: 'Invalid refresh token' 
+    });
+  }
+});
+\`\`\`
+
+### Security Best Practices
+
+- ✅ Use strong JWT secrets (256-bit minimum)
+- ✅ Set short expiration times (1 hour for access tokens)
+- ✅ Implement refresh tokens for long-lived sessions
+- ✅ Store refresh tokens in database (can be revoked)
+- ✅ Use HTTPS only
+- ✅ Don't store sensitive data in JWT payload
+- ✅ Validate token issuer and audience
+- ✅ Implement token blacklisting for logout
+```
+
+
+### Example 2: Input Validation and SQL Injection Prevention
+
+```markdown
+## Preventing SQL Injection and Input Validation
+
+### The Problem
+
+**❌ Vulnerable Code:**
+\`\`\`javascript
+// NEVER DO THIS - SQL Injection vulnerability
+app.get('/api/users/:id', async (req, res) => {
+  const userId = req.params.id;
+  
+  // Dangerous: User input directly in query
+  const query = \`SELECT * FROM users WHERE id = '\${userId}'\`;
+  const user = await db.query(query);
+  
+  res.json(user);
+});
+
+// Attack example:
+// GET /api/users/1' OR '1'='1
+// Returns all users!
+\`\`\`
+
+### The Solution
+
+#### 1. Use Parameterized Queries
+
+\`\`\`javascript
+// ✅ Safe: Parameterized query
+app.get('/api/users/:id', async (req, res) => {
+  const userId = req.params.id;
+  
+  // Validate input first
+  if (!userId || !/^\d+$/.test(userId)) {
+    return res.status(400).json({ 
+      error: 'Invalid user ID' 
+    });
+  }
+  
+  // Use parameterized query
+  const user = await db.query(
+    'SELECT id, email, name FROM users WHERE id = $1',
+    [userId]
+  );
+  
+  if (!user) {
+    return res.status(404).json({ 
+      error: 'User not found' 
+    });
+  }
+  
+  res.json(user);
+});
+\`\`\`
+
+#### 2. Use ORM with Proper Escaping
+
+\`\`\`javascript
+// ✅ Safe: Using Prisma ORM
+app.get('/api/users/:id', async (req, res) => {
+  const userId = parseInt(req.params.id);
+  
+  if (isNaN(userId)) {
+    return res.status(400).json({ 
+      error: 'Invalid user ID' 
+    });
+  }
+  
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    select: {
+      id: true,
+      email: true,
+      name: true,
+      // Don't select sensitive fields
+    }
+  });
+  
+  if (!user) {
+    return res.status(404).json({ 
+      error: 'User not found' 
+    });
+  }
+  
+  res.json(user);
+});
+\`\`\`
+
+#### 3. Implement Request Validation with Zod
+
+\`\`\`javascript
+const { z } = require('zod');
+
+// Define validation schema
+const createUserSchema = z.object({
+  email: z.string().email('Invalid email format'),
+  password: z.string()
+    .min(8, 'Password must be at least 8 characters')
+    .regex(/[A-Z]/, 'Password must contain uppercase letter')
+    .regex(/[a-z]/, 'Password must contain lowercase letter')
+    .regex(/[0-9]/, 'Password must contain number'),
+  name: z.string()
+    .min(2, 'Name must be at least 2 characters')
+    .max(100, 'Name too long'),
+  age: z.number()
+    .int('Age must be an integer')
+    .min(18, 'Must be 18 or older')
+    .max(120, 'Invalid age')
+    .optional()
+});
+
+// Validation middleware
+function validateRequest(schema) {
+  return (req, res, next) => {
+    try {
+      schema.parse(req.body);
+      next();
+    } catch (error) {
+      res.status(400).json({
+        error: 'Validation failed',
+        details: error.errors
+      });
+    }
+  };
+}
+
+// Use validation
+app.post('/api/users', 
+  validateRequest(createUserSchema),
+  async (req, res) => {
+    // Input is validated at this point
+    const { email, password, name, age } = req.body;
+    
+    // Hash password
+    const passwordHash = await bcrypt.hash(password, 10);
+    
+    // Create user
+    const user = await prisma.user.create({
+      data: {
+        email,
+        passwordHash,
+        name,
+        age
+      }
+    });
+    
+    // Don't return password hash
+    const { passwordHash: _, ...userWithoutPassword } = user;
+    res.status(201).json(userWithoutPassword);
+  }
+);
+\`\`\`
+
+#### 4. Sanitize Output to Prevent XSS
+
+\`\`\`javascript
+const DOMPurify = require('isomorphic-dompurify');
+
+app.post('/api/comments', authenticateToken, async (req, res) => {
+  const { content } = req.body;
+  
+  // Validate
+  if (!content || content.length > 1000) {
+    return res.status(400).json({ 
+      error: 'Invalid comment content' 
+    });
+  }
+  
+  // Sanitize HTML to prevent XSS
+  const sanitizedContent = DOMPurify.sanitize(content, {
+    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
+    ALLOWED_ATTR: ['href']
+  });
+  
+  const comment = await prisma.comment.create({
+    data: {
+      content: sanitizedContent,
+      userId: req.user.userId
+    }
+  });
+  
+  res.status(201).json(comment);
+});
+\`\`\`
+
+### Validation Checklist
+
+- [ ] Validate all user inputs
+- [ ] Use parameterized queries or ORM
+- [ ] Validate data types (string, number, email, etc.)
+- [ ] Validate data ranges (min/max length, value ranges)
+- [ ] Sanitize HTML content
+- [ ] Escape special characters
+- [ ] Validate file uploads (type, size, content)
+- [ ] Use allowlists, not blocklists
+```
+
+
+### Example 3: Rate Limiting and DDoS Protection
+
+```markdown
+## Implementing Rate Limiting
+
+### Why Rate Limiting?
+
+- Prevent brute force attacks
+- Protect against DDoS
+- Prevent API abuse
+- Ensure fair usage
+- Reduce server costs
+
+### Implementation with Express Rate Limit
+
+\`\`\`javascript
+const rateLimit = require('express-rate-limit');
+const RedisStore = require('rate-limit-redis');
+const Redis = require('ioredis');
+
+// Create Redis client
+const redis = new Redis({
+  host: process.env.REDIS_HOST,
+  port: process.env.REDIS_PORT
+});
+
+// General API rate limit
+const apiLimiter = rateLimit({
+  store: new RedisStore({
+    client: redis,
+    prefix: 'rl:api:'
+  }),
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // 100 requests per window
+  message: {
+    error: 'Too many requests, please try again later',
+    retryAfter: 900 // seconds
+  },
+  standardHeaders: true, // Return rate limit info in headers
+  legacyHeaders: false,
+  // Custom key generator (by user ID or IP)
+  keyGenerator: (req) => {
+    return req.user?.userId || req.ip;
+  }
+});
+
+// Strict rate limit for authentication endpoints
+const authLimiter = rateLimit({
+  store: new RedisStore({
+    client: redis,
+    prefix: 'rl:auth:'
+  }),
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 5, // Only 5 login attempts per 15 minutes
+  skipSuccessfulRequests: true, // Don't count successful logins
+  message: {
+    error: 'Too many login attempts, please try again later',
+    retryAfter: 900
+  }
+});
+
+// Apply rate limiters
+app.use('/api/', apiLimiter);
+app.use('/api/auth/login', authLimiter);
+app.use('/api/auth/register', authLimiter);
+
+// Custom rate limiter for expensive operations
+const expensiveLimiter = rateLimit({
+  windowMs: 60 * 60 * 1000, // 1 hour
+  max: 10, // 10 requests per hour
+  message: {
+    error: 'Rate limit exceeded for this operation'
+  }
+});
+
+app.post('/api/reports/generate', 
+  authenticateToken,
+  expensiveLimiter,
+  async (req, res) => {
+    // Expensive operation
+  }
+);
+\`\`\`
+
+### Advanced: Per-User Rate Limiting
+
+\`\`\`javascript
+// Different limits based on user tier
+function createTieredRateLimiter() {
+  const limits = {
+    free: { windowMs: 60 * 60 * 1000, max: 100 },
+    pro: { windowMs: 60 * 60 * 1000, max: 1000 },
+    enterprise: { windowMs: 60 * 60 * 1000, max: 10000 }
+  };
+  
+  return async (req, res, next) => {
+    const user = req.user;
+    const tier = user?.tier || 'free';
+    const limit = limits[tier];
+    
+    const key = \`rl:user:\${user.userId}\`;
+    const current = await redis.incr(key);
+    
+    if (current === 1) {
+      await redis.expire(key, limit.windowMs / 1000);
+    }
+    
+    if (current > limit.max) {
+      return res.status(429).json({
+        error: 'Rate limit exceeded',
+        limit: limit.max,
+        remaining: 0,
+        reset: await redis.ttl(key)
+      });
+    }
+    
+    // Set rate limit headers
+    res.set({
+      'X-RateLimit-Limit': limit.max,
+      'X-RateLimit-Remaining': limit.max - current,
+      'X-RateLimit-Reset': await redis.ttl(key)
+    });
+    
+    next();
+  };
+}
+
+app.use('/api/', authenticateToken, createTieredRateLimiter());
+\`\`\`
+
+### DDoS Protection with Helmet
+
+\`\`\`javascript
+const helmet = require('helmet');
+
+app.use(helmet({
+  // Content Security Policy
+  contentSecurityPolicy: {
+    directives: {
+      defaultSrc: ["'self'"],
+      styleSrc: ["'self'", "'unsafe-inline'"],
+      scriptSrc: ["'self'"],
+      imgSrc: ["'self'", 'data:', 'https:']
+    }
+  },
+  // Prevent clickjacking
+  frameguard: { action: 'deny' },
+  // Hide X-Powered-By header
+  hidePoweredBy: true,
+  // Prevent MIME type sniffing
+  noSniff: true,
+  // Enable HSTS
+  hsts: {
+    maxAge: 31536000,
+    includeSubDomains: true,
+    preload: true
+  }
+}));
+\`\`\`
+
+### Rate Limit Response Headers
+
+\`\`\`
+X-RateLimit-Limit: 100
+X-RateLimit-Remaining: 87
+X-RateLimit-Reset: 1640000000
+Retry-After: 900
+\`\`\`
+```
+
+## Best Practices
+
+### ✅ Do This
+
+- **Use HTTPS Everywhere** - Never send sensitive data over HTTP
+- **Implement Authentication** - Require authentication for protected endpoints
+- **Validate All Inputs** - Never trust user input
+- **Use Parameterized Queries** - Prevent SQL injection
+- **Implement Rate Limiting** - Protect against brute force and DDoS
+- **Hash Passwords** - Use bcrypt with salt rounds >= 10
+- **Use Short-Lived Tokens** - JWT access tokens should expire quickly
+- **Implement CORS Properly** - Only allow trusted origins
+- **Log Security Events** - Monitor for suspicious activity
+- **Keep Dependencies Updated** - Regularly update packages
+- **Use Security Headers** - Implement Helmet.js
+- **Sanitize Error Messages** - Don't leak sensitive information
+
+### ❌ Don't Do This
+
+- **Don't Store Passwords in Plain Text** - Always hash passwords
+- **Don't Use Weak Secrets** - Use strong, random JWT secrets
+- **Don't Trust User Input** - Always validate and sanitize
+- **Don't Expose Stack Traces** - Hide error details in production
+- **Don't Use String Concatenation for SQL** - Use parameterized queries
+- **Don't Store Sensitive Data in JWT** - JWTs are not encrypted
+- **Don't Ignore Security Updates** - Update dependencies regularly
+- **Don't Use Default Credentials** - Change all default passwords
+- **Don't Disable CORS Completely** - Configure it properly instead
+- **Don't Log Sensitive Data** - Sanitize logs
+
+## Common Pitfalls
+
+### Problem: JWT Secret Exposed in Code
+**Symptoms:** JWT secret hardcoded or committed to Git
+**Solution:**
+\`\`\`javascript
+// ❌ Bad
+const JWT_SECRET = 'my-secret-key';
+
+// ✅ Good
+const JWT_SECRET = process.env.JWT_SECRET;
+if (!JWT_SECRET) {
+  throw new Error('JWT_SECRET environment variable is required');
+}
+
+// Generate strong secret
+// node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"
+\`\`\`
+
+### Problem: Weak Password Requirements
+**Symptoms:** Users can set weak passwords like "password123"
+**Solution:**
+\`\`\`javascript
+const passwordSchema = z.string()
+  .min(12, 'Password must be at least 12 characters')
+  .regex(/[A-Z]/, 'Must contain uppercase letter')
+  .regex(/[a-z]/, 'Must contain lowercase letter')
+  .regex(/[0-9]/, 'Must contain number')
+  .regex(/[^A-Za-z0-9]/, 'Must contain special character');
+
+// Or use a password strength library
+const zxcvbn = require('zxcvbn');
+const result = zxcvbn(password);
+if (result.score < 3) {
+  return res.status(400).json({
+    error: 'Password too weak',
+    suggestions: result.feedback.suggestions
+  });
+}
+\`\`\`
+
+### Problem: Missing Authorization Checks
+**Symptoms:** Users can access resources they shouldn't
+**Solution:**
+\`\`\`javascript
+// ❌ Bad: Only checks authentication
+app.delete('/api/posts/:id', authenticateToken, async (req, res) => {
+  await prisma.post.delete({ where: { id: req.params.id } });
+  res.json({ success: true });
+});
+
+// ✅ Good: Checks both authentication and authorization
+app.delete('/api/posts/:id', authenticateToken, async (req, res) => {
+  const post = await prisma.post.findUnique({
+    where: { id: req.params.id }
+  });
+  
+  if (!post) {
+    return res.status(404).json({ error: 'Post not found' });
+  }
+  
+  // Check if user owns the post or is admin
+  if (post.userId !== req.user.userId && req.user.role !== 'admin') {
+    return res.status(403).json({ 
+      error: 'Not authorized to delete this post' 
+    });
+  }
+  
+  await prisma.post.delete({ where: { id: req.params.id } });
+  res.json({ success: true });
+});
+\`\`\`
+
+### Problem: Verbose Error Messages
+**Symptoms:** Error messages reveal system details
+**Solution:**
+\`\`\`javascript
+// ❌ Bad: Exposes database details
+app.post('/api/users', async (req, res) => {
+  try {
+    const user = await prisma.user.create({ data: req.body });
+    res.json(user);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+    // Error: "Unique constraint failed on the fields: (`email`)"
+  }
+});
+
+// ✅ Good: Generic error message
+app.post('/api/users', async (req, res) => {
+  try {
+    const user = await prisma.user.create({ data: req.body });
+    res.json(user);
+  } catch (error) {
+    console.error('User creation error:', error); // Log full error
+    
+    if (error.code === 'P2002') {
+      return res.status(400).json({ 
+        error: 'Email already exists' 
+      });
+    }
+    
+    res.status(500).json({ 
+      error: 'An error occurred while creating user' 
+    });
+  }
+});
+\`\`\`
+
+## Security Checklist
+
+### Authentication & Authorization
+- [ ] Implement strong authentication (JWT, OAuth 2.0)
+- [ ] Use HTTPS for all endpoints
+- [ ] Hash passwords with bcrypt (salt rounds >= 10)
+- [ ] Implement token expiration
+- [ ] Add refresh token mechanism
+- [ ] Verify user authorization for each request
+- [ ] Implement role-based access control (RBAC)
+
+### Input Validation
+- [ ] Validate all user inputs
+- [ ] Use parameterized queries or ORM
+- [ ] Sanitize HTML content
+- [ ] Validate file uploads
+- [ ] Implement request schema validation
+- [ ] Use allowlists, not blocklists
+
+### Rate Limiting & DDoS Protection
+- [ ] Implement rate limiting per user/IP
+- [ ] Add stricter limits for auth endpoints
+- [ ] Use Redis for distributed rate limiting
+- [ ] Return proper rate limit headers
+- [ ] Implement request throttling
+
+### Data Protection
+- [ ] Use HTTPS/TLS for all traffic
+- [ ] Encrypt sensitive data at rest
+- [ ] Don't store sensitive data in JWT
+- [ ] Sanitize error messages
+- [ ] Implement proper CORS configuration
+- [ ] Use security headers (Helmet.js)
+
+### Monitoring & Logging
+- [ ] Log security events
+- [ ] Monitor for suspicious activity
+- [ ] Set up alerts for failed auth attempts
+- [ ] Track API usage patterns
+- [ ] Don't log sensitive data
+
+## OWASP API Security Top 10
+
+1. **Broken Object Level Authorization** - Always verify user can access resource
+2. **Broken Authentication** - Implement strong authentication mechanisms
+3. **Broken Object Property Level Authorization** - Validate which properties user can access
+4. **Unrestricted Resource Consumption** - Implement rate limiting and quotas
+5. **Broken Function Level Authorization** - Verify user role for each function
+6. **Unrestricted Access to Sensitive Business Flows** - Protect critical workflows
+7. **Server Side Request Forgery (SSRF)** - Validate and sanitize URLs
+8. **Security Misconfiguration** - Use security best practices and headers
+9. **Improper Inventory Management** - Document and secure all API endpoints
+10. **Unsafe Consumption of APIs** - Validate data from third-party APIs
+
+## Related Skills
+
+- `@ethical-hacking-methodology` - Security testing perspective
+- `@sql-injection-testing` - Testing for SQL injection
+- `@xss-html-injection` - Testing for XSS vulnerabilities
+- `@broken-authentication` - Authentication vulnerabilities
+- `@backend-dev-guidelines` - Backend development standards
+- `@systematic-debugging` - Debug security issues
+
+## Additional Resources
+
+- [OWASP API Security Top 10](https://owasp.org/www-project-api-security/)
+- [JWT Best Practices](https://tools.ietf.org/html/rfc8725)
+- [Express Security Best Practices](https://expressjs.com/en/advanced/best-practice-security.html)
+- [Node.js Security Checklist](https://blog.risingstack.com/node-js-security-checklist/)
+- [API Security Checklist](https://github.com/shieldfy/API-Security-Checklist)
+
+---
+
+**Pro Tip:** Security is not a one-time task - regularly audit your APIs, keep dependencies updated, and stay informed about new vulnerabilities!
--- a/skills/web-performance-optimization/SKILL.md
+++ b/skills/web-performance-optimization/SKILL.md
@@ -0,0 +1,646 @@
+---
+name: web-performance-optimization
+description: "Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance"
+---
+
+# Web Performance Optimization
+
+## Overview
+
+Help developers optimize website and web application performance to improve user experience, SEO rankings, and conversion rates. This skill provides systematic approaches to measure, analyze, and improve loading speed, runtime performance, and Core Web Vitals metrics.
+
+## When to Use This Skill
+
+- Use when website or app is loading slowly
+- Use when optimizing for Core Web Vitals (LCP, FID, CLS)
+- Use when reducing JavaScript bundle size
+- Use when improving Time to Interactive (TTI)
+- Use when optimizing images and assets
+- Use when implementing caching strategies
+- Use when debugging performance bottlenecks
+- Use when preparing for performance audits
+
+## How It Works
+
+### Step 1: Measure Current Performance
+
+I'll help you establish baseline metrics:
+- Run Lighthouse audits
+- Measure Core Web Vitals (LCP, FID, CLS)
+- Check bundle sizes
+- Analyze network waterfall
+- Identify performance bottlenecks
+
+### Step 2: Identify Issues
+
+Analyze performance problems:
+- Large JavaScript bundles
+- Unoptimized images
+- Render-blocking resources
+- Slow server response times
+- Missing caching headers
+- Layout shifts
+- Long tasks blocking main thread
+
+### Step 3: Prioritize Optimizations
+
+Focus on high-impact improvements:
+- Critical rendering path optimization
+- Code splitting and lazy loading
+- Image optimization
+- Caching strategies
+- Third-party script optimization
+
+### Step 4: Implement Optimizations
+
+Apply performance improvements:
+- Optimize assets (images, fonts, CSS, JS)
+- Implement code splitting
+- Add caching headers
+- Lazy load non-critical resources
+- Optimize critical rendering path
+
+### Step 5: Verify Improvements
+
+Measure impact of changes:
+- Re-run Lighthouse audits
+- Compare before/after metrics
+- Monitor real user metrics (RUM)
+- Test on different devices and networks
+
+## Examples
+
+### Example 1: Optimizing Core Web Vitals
+
+```markdown
+## Performance Audit Results
+
+### Current Metrics (Before Optimization)
+- **LCP (Largest Contentful Paint):** 4.2s ❌ (should be < 2.5s)
+- **FID (First Input Delay):** 180ms ❌ (should be < 100ms)
+- **CLS (Cumulative Layout Shift):** 0.25 ❌ (should be < 0.1)
+- **Lighthouse Score:** 62/100
+
+### Issues Identified
+
+1. **LCP Issue:** Hero image (2.5MB) loads slowly
+2. **FID Issue:** Large JavaScript bundle (850KB) blocks main thread
+3. **CLS Issue:** Images without dimensions cause layout shifts
+
+### Optimization Plan
+
+#### Fix LCP (Largest Contentful Paint)
+
+**Problem:** Hero image is 2.5MB and loads slowly
+
+**Solutions:**
+\`\`\`html
+<!-- Before: Unoptimized image -->
+<img src="/hero.jpg" alt="Hero">
+
+<!-- After: Optimized with modern formats -->
+<picture>
+  <source srcset="/hero.avif" type="image/avif">
+  <source srcset="/hero.webp" type="image/webp">
+  <img 
+    src="/hero.jpg" 
+    alt="Hero"
+    width="1200" 
+    height="600"
+    loading="eager"
+    fetchpriority="high"
+  >
+</picture>
+\`\`\`
+
+**Additional optimizations:**
+- Compress image to < 200KB
+- Use CDN for faster delivery
+- Preload hero image: `<link rel="preload" as="image" href="/hero.avif">`
+
+#### Fix FID (First Input Delay)
+
+**Problem:** 850KB JavaScript bundle blocks main thread
+
+**Solutions:**
+
+1. **Code Splitting:**
+\`\`\`javascript
+// Before: Everything in one bundle
+import { HeavyComponent } from './HeavyComponent';
+import { Analytics } from './analytics';
+import { ChatWidget } from './chat';
+
+// After: Lazy load non-critical code
+const HeavyComponent = lazy(() => import('./HeavyComponent'));
+const ChatWidget = lazy(() => import('./chat'));
+
+// Load analytics after page interactive
+if (typeof window !== 'undefined') {
+  window.addEventListener('load', () => {
+    import('./analytics').then(({ Analytics }) => {
+      Analytics.init();
+    });
+  });
+}
+\`\`\`
+
+2. **Remove Unused Dependencies:**
+\`\`\`bash
+# Analyze bundle
+npx webpack-bundle-analyzer
+
+# Remove unused packages
+npm uninstall moment  # Use date-fns instead (smaller)
+npm install date-fns
+\`\`\`
+
+3. **Defer Non-Critical Scripts:**
+\`\`\`html
+<!-- Before: Blocks rendering -->
+<script src="/analytics.js"></script>
+
+<!-- After: Deferred -->
+<script src="/analytics.js" defer></script>
+\`\`\`
+
+#### Fix CLS (Cumulative Layout Shift)
+
+**Problem:** Images without dimensions cause layout shifts
+
+**Solutions:**
+\`\`\`html
+<!-- Before: No dimensions -->
+<img src="/product.jpg" alt="Product">
+
+<!-- After: With dimensions -->
+<img 
+  src="/product.jpg" 
+  alt="Product"
+  width="400" 
+  height="300"
+  style="aspect-ratio: 4/3;"
+>
+\`\`\`
+
+**For dynamic content:**
+\`\`\`css
+/* Reserve space for content that loads later */
+.skeleton-loader {
+  min-height: 200px;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+\`\`\`
+
+### Results After Optimization
+
+- **LCP:** 1.8s ✅ (improved by 57%)
+- **FID:** 45ms ✅ (improved by 75%)
+- **CLS:** 0.05 ✅ (improved by 80%)
+- **Lighthouse Score:** 94/100 ✅
+```
+
+### Example 2: Reducing JavaScript Bundle Size
+
+```markdown
+## Bundle Size Optimization
+
+### Current State
+- **Total Bundle:** 850KB (gzipped: 280KB)
+- **Main Bundle:** 650KB
+- **Vendor Bundle:** 200KB
+- **Load Time (3G):** 8.2s
+
+### Analysis
+
+\`\`\`bash
+# Analyze bundle composition
+npx webpack-bundle-analyzer dist/stats.json
+\`\`\`
+
+**Findings:**
+1. Moment.js: 67KB (can replace with date-fns: 12KB)
+2. Lodash: 72KB (using entire library, only need 5 functions)
+3. Unused code: ~150KB of dead code
+4. No code splitting: Everything in one bundle
+
+### Optimization Steps
+
+#### 1. Replace Heavy Dependencies
+
+\`\`\`bash
+# Remove moment.js (67KB) → Use date-fns (12KB)
+npm uninstall moment
+npm install date-fns
+
+# Before
+import moment from 'moment';
+const formatted = moment(date).format('YYYY-MM-DD');
+
+# After
+import { format } from 'date-fns';
+const formatted = format(date, 'yyyy-MM-dd');
+\`\`\`
+
+**Savings:** 55KB
+
+#### 2. Use Lodash Selectively
+
+\`\`\`javascript
+// Before: Import entire library (72KB)
+import _ from 'lodash';
+const unique = _.uniq(array);
+
+// After: Import only what you need (5KB)
+import uniq from 'lodash/uniq';
+const unique = uniq(array);
+
+// Or use native methods
+const unique = [...new Set(array)];
+\`\`\`
+
+**Savings:** 67KB
+
+#### 3. Implement Code Splitting
+
+\`\`\`javascript
+// Next.js example
+import dynamic from 'next/dynamic';
+
+// Lazy load heavy components
+const Chart = dynamic(() => import('./Chart'), {
+  loading: () => <div>Loading chart...</div>,
+  ssr: false
+});
+
+const AdminPanel = dynamic(() => import('./AdminPanel'), {
+  loading: () => <div>Loading...</div>
+});
+
+// Route-based code splitting (automatic in Next.js)
+// pages/admin.js - Only loaded when visiting /admin
+// pages/dashboard.js - Only loaded when visiting /dashboard
+\`\`\`
+
+#### 4. Remove Dead Code
+
+\`\`\`javascript
+// Enable tree shaking in webpack.config.js
+module.exports = {
+  mode: 'production',
+  optimization: {
+    usedExports: true,
+    sideEffects: false
+  }
+};
+
+// In package.json
+{
+  "sideEffects": false
+}
+\`\`\`
+
+#### 5. Optimize Third-Party Scripts
+
+\`\`\`html
+<!-- Before: Loads immediately -->
+<script src="https://analytics.com/script.js"></script>
+
+<!-- After: Load after page interactive -->
+<script>
+  window.addEventListener('load', () => {
+    const script = document.createElement('script');
+    script.src = 'https://analytics.com/script.js';
+    script.async = true;
+    document.body.appendChild(script);
+  });
+</script>
+\`\`\`
+
+### Results
+
+- **Total Bundle:** 380KB ✅ (reduced by 55%)
+- **Main Bundle:** 180KB ✅
+- **Vendor Bundle:** 80KB ✅
+- **Load Time (3G):** 3.1s ✅ (improved by 62%)
+```
+
+### Example 3: Image Optimization Strategy
+
+```markdown
+## Image Optimization
+
+### Current Issues
+- 15 images totaling 12MB
+- No modern formats (WebP, AVIF)
+- No responsive images
+- No lazy loading
+
+### Optimization Strategy
+
+#### 1. Convert to Modern Formats
+
+\`\`\`bash
+# Install image optimization tools
+npm install sharp
+
+# Conversion script (optimize-images.js)
+const sharp = require('sharp');
+const fs = require('fs');
+const path = require('path');
+
+async function optimizeImage(inputPath, outputDir) {
+  const filename = path.basename(inputPath, path.extname(inputPath));
+  
+  // Generate WebP
+  await sharp(inputPath)
+    .webp({ quality: 80 })
+    .toFile(path.join(outputDir, \`\${filename}.webp\`));
+  
+  // Generate AVIF (best compression)
+  await sharp(inputPath)
+    .avif({ quality: 70 })
+    .toFile(path.join(outputDir, \`\${filename}.avif\`));
+  
+  // Generate optimized JPEG fallback
+  await sharp(inputPath)
+    .jpeg({ quality: 80, progressive: true })
+    .toFile(path.join(outputDir, \`\${filename}.jpg\`));
+}
+
+// Process all images
+const images = fs.readdirSync('./images');
+images.forEach(img => {
+  optimizeImage(\`./images/\${img}\`, './images/optimized');
+});
+\`\`\`
+
+#### 2. Implement Responsive Images
+
+\`\`\`html
+<!-- Responsive images with modern formats -->
+<picture>
+  <!-- AVIF for browsers that support it (best compression) -->
+  <source 
+    srcset="
+      /images/hero-400.avif 400w,
+      /images/hero-800.avif 800w,
+      /images/hero-1200.avif 1200w
+    "
+    type="image/avif"
+    sizes="(max-width: 768px) 100vw, 50vw"
+  >
+  
+  <!-- WebP for browsers that support it -->
+  <source 
+    srcset="
+      /images/hero-400.webp 400w,
+      /images/hero-800.webp 800w,
+      /images/hero-1200.webp 1200w
+    "
+    type="image/webp"
+    sizes="(max-width: 768px) 100vw, 50vw"
+  >
+  
+  <!-- JPEG fallback -->
+  <img 
+    src="/images/hero-800.jpg"
+    srcset="
+      /images/hero-400.jpg 400w,
+      /images/hero-800.jpg 800w,
+      /images/hero-1200.jpg 1200w
+    "
+    sizes="(max-width: 768px) 100vw, 50vw"
+    alt="Hero image"
+    width="1200"
+    height="600"
+    loading="lazy"
+  >
+</picture>
+\`\`\`
+
+#### 3. Lazy Loading
+
+\`\`\`html
+<!-- Native lazy loading -->
+<img 
+  src="/image.jpg" 
+  alt="Description"
+  loading="lazy"
+  width="800"
+  height="600"
+>
+
+<!-- Eager loading for above-the-fold images -->
+<img 
+  src="/hero.jpg" 
+  alt="Hero"
+  loading="eager"
+  fetchpriority="high"
+>
+\`\`\`
+
+#### 4. Next.js Image Component
+
+\`\`\`javascript
+import Image from 'next/image';
+
+// Automatic optimization
+<Image
+  src="/hero.jpg"
+  alt="Hero"
+  width={1200}
+  height={600}
+  priority  // For above-the-fold images
+  quality={80}
+/>
+
+// Lazy loaded
+<Image
+  src="/product.jpg"
+  alt="Product"
+  width={400}
+  height={300}
+  loading="lazy"
+/>
+\`\`\`
+
+### Results
+
+| Metric | Before | After | Improvement |
+|--------|--------|-------|-------------|
+| Total Image Size | 12MB | 1.8MB | 85% reduction |
+| LCP | 4.5s | 1.6s | 64% faster |
+| Page Load (3G) | 18s | 4.2s | 77% faster |
+```
+
+## Best Practices
+
+### ✅ Do This
+
+- **Measure First** - Always establish baseline metrics before optimizing
+- **Use Lighthouse** - Run audits regularly to track progress
+- **Optimize Images** - Use modern formats (WebP, AVIF) and responsive images
+- **Code Split** - Break large bundles into smaller chunks
+- **Lazy Load** - Defer non-critical resources
+- **Cache Aggressively** - Set proper cache headers for static assets
+- **Minimize Main Thread Work** - Keep JavaScript execution under 50ms chunks
+- **Preload Critical Resources** - Use `<link rel="preload">` for critical assets
+- **Use CDN** - Serve static assets from CDN for faster delivery
+- **Monitor Real Users** - Track Core Web Vitals from real users
+
+### ❌ Don't Do This
+
+- **Don't Optimize Blindly** - Measure first, then optimize
+- **Don't Ignore Mobile** - Test on real mobile devices and slow networks
+- **Don't Block Rendering** - Avoid render-blocking CSS and JavaScript
+- **Don't Load Everything Upfront** - Lazy load non-critical resources
+- **Don't Forget Dimensions** - Always specify image width/height
+- **Don't Use Synchronous Scripts** - Use async or defer attributes
+- **Don't Ignore Third-Party Scripts** - They often cause performance issues
+- **Don't Skip Compression** - Always compress and minify assets
+
+## Common Pitfalls
+
+### Problem: Optimized for Desktop but Slow on Mobile
+**Symptoms:** Good Lighthouse score on desktop, poor on mobile
+**Solution:**
+- Test on real mobile devices
+- Use Chrome DevTools mobile throttling
+- Optimize for 3G/4G networks
+- Reduce JavaScript execution time
+```bash
+# Test with throttling
+lighthouse https://yoursite.com --throttling.cpuSlowdownMultiplier=4
+```
+
+### Problem: Large JavaScript Bundle
+**Symptoms:** Long Time to Interactive (TTI), high FID
+**Solution:**
+- Analyze bundle with webpack-bundle-analyzer
+- Remove unused dependencies
+- Implement code splitting
+- Lazy load non-critical code
+```bash
+# Analyze bundle
+npx webpack-bundle-analyzer dist/stats.json
+```
+
+### Problem: Images Causing Layout Shifts
+**Symptoms:** High CLS score, content jumping
+**Solution:**
+- Always specify width and height
+- Use aspect-ratio CSS property
+- Reserve space with skeleton loaders
+```css
+img {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  height: auto;
+}
+```
+
+### Problem: Slow Server Response Time
+**Symptoms:** High TTFB (Time to First Byte)
+**Solution:**
+- Implement server-side caching
+- Use CDN for static assets
+- Optimize database queries
+- Consider static site generation (SSG)
+```javascript
+// Next.js: Static generation
+export async function getStaticProps() {
+  const data = await fetchData();
+  return {
+    props: { data },
+    revalidate: 60 // Regenerate every 60 seconds
+  };
+}
+```
+
+## Performance Checklist
+
+### Images
+- [ ] Convert to modern formats (WebP, AVIF)
+- [ ] Implement responsive images
+- [ ] Add lazy loading
+- [ ] Specify dimensions (width/height)
+- [ ] Compress images (< 200KB each)
+- [ ] Use CDN for delivery
+
+### JavaScript
+- [ ] Bundle size < 200KB (gzipped)
+- [ ] Implement code splitting
+- [ ] Lazy load non-critical code
+- [ ] Remove unused dependencies
+- [ ] Minify and compress
+- [ ] Use async/defer for scripts
+
+### CSS
+- [ ] Inline critical CSS
+- [ ] Defer non-critical CSS
+- [ ] Remove unused CSS
+- [ ] Minify CSS files
+- [ ] Use CSS containment
+
+### Caching
+- [ ] Set cache headers for static assets
+- [ ] Implement service worker
+- [ ] Use CDN caching
+- [ ] Cache API responses
+- [ ] Version static assets
+
+### Core Web Vitals
+- [ ] LCP < 2.5s
+- [ ] FID < 100ms
+- [ ] CLS < 0.1
+- [ ] TTFB < 600ms
+- [ ] TTI < 3.8s
+
+## Performance Tools
+
+### Measurement Tools
+- **Lighthouse** - Comprehensive performance audit
+- **WebPageTest** - Detailed waterfall analysis
+- **Chrome DevTools** - Performance profiling
+- **PageSpeed Insights** - Real user metrics
+- **Web Vitals Extension** - Monitor Core Web Vitals
+
+### Analysis Tools
+- **webpack-bundle-analyzer** - Visualize bundle composition
+- **source-map-explorer** - Analyze bundle size
+- **Bundlephobia** - Check package sizes before installing
+- **ImageOptim** - Image compression tool
+
+### Monitoring Tools
+- **Google Analytics** - Track Core Web Vitals
+- **Sentry** - Performance monitoring
+- **New Relic** - Application performance monitoring
+- **Datadog** - Real user monitoring
+
+## Related Skills
+
+- `@react-best-practices` - React performance patterns
+- `@frontend-dev-guidelines` - Frontend development standards
+- `@systematic-debugging` - Debug performance issues
+- `@senior-architect` - Architecture for performance
+
+## Additional Resources
+
+- [Web.dev Performance](https://web.dev/performance/)
+- [Core Web Vitals](https://web.dev/vitals/)
+- [Lighthouse Documentation](https://developers.google.com/web/tools/lighthouse)
+- [MDN Performance Guide](https://developer.mozilla.org/en-US/docs/Web/Performance)
+- [Next.js Performance](https://nextjs.org/docs/advanced-features/measuring-performance)
+- [Image Optimization Guide](https://web.dev/fast/#optimize-your-images)
+
+---
+
+**Pro Tip:** Focus on Core Web Vitals (LCP, FID, CLS) first - they have the biggest impact on user experience and SEO rankings!