Secure Web Application Development

Expert guidance for building secure, robust web applications that protect user data and prevent common vulnerabilities.

Overview

This skill provides comprehensive security expertise covering OWASP Top 10 vulnerabilities, secure coding practices, authentication/authorization implementation, data protection, and modern threat prevention.

Core Security Principles

When writing code, always apply these fundamental principles:

1. **Security by Default**: Implement security measures from the start, not as an afterthought

2. **Least Privilege**: Grant minimum necessary permissions for all operations

3. **Defense in Depth**: Layer multiple security controls

4. **Input Validation**: Validate all inputs and sanitize all outputs

5. **Secure Error Handling**: Handle errors without leaking sensitive information

6. **Zero Trust**: Never trust, always verify

OWASP Top 10 Protection

A01 - Broken Access Control

Implement proper role-based access control:

Validate permissions on both client and server side

Use principle of least privilege for all operations

Implement proper session management and timeout

Validate user permissions for every protected resource

Create RBAC systems with clear role definitions

A02 - Cryptographic Failures

Protect data with strong encryption:

Use AES-256 for symmetric encryption, RSA-2048+ for asymmetric

Implement proper key management and rotation

Enforce HTTPS everywhere with TLS 1.3+

Hash passwords with bcrypt, scrypt, or Argon2

Protect sensitive data both in transit and at rest

A03 - Injection Attacks

Prevent SQL injection, XSS, and command injection:

Use parameterized queries and prepared statements

Validate and sanitize all user inputs with allow-lists

Implement proper input validation schemas (e.g., Zod)

Use ORM/ODM tools that prevent injection

Escape output data for the target context

A04 - Insecure Design

Build security into architecture:

Use threat modeling for critical features

Implement secure design patterns from the start

Create proper error handling that doesn't leak information

Use secure defaults and fail-safe mechanisms

Implement comprehensive logging and monitoring

A05 - Security Misconfiguration

Configure systems securely:

Implement security headers (CSP, HSTS, X-Frame-Options, X-Content-Type-Options)

Disable unnecessary features and services

Keep dependencies and frameworks updated

Configure CORS properly for your use case

Use environment-specific secure configurations

A06 - Vulnerable and Outdated Components

Maintain secure dependencies:

Regularly audit dependencies with npm audit, Snyk, or similar

Implement automated security patch updates

Remove unused dependencies and dead code

Monitor CVE databases for used components

Maintain an SBOM (Software Bill of Materials)

A07 - Identification and Authentication Failures

Implement robust authentication:

Enforce strong password policies (length, complexity)

Implement multi-factor authentication where appropriate

Create secure session management with proper timeouts

Build secure password recovery mechanisms

Protect against brute force and credential stuffing

A08 - Software and Data Integrity Failures

Ensure code and data integrity:

Implement code signing and verification

Use Subresource Integrity (SRI) for external resources

Validate data integrity with checksums and signatures

Secure CI/CD pipelines

Verify package integrity before installation

A09 - Security Logging and Monitoring Failures

Monitor and detect security events:

Log all security-relevant events (auth attempts, permission changes)

Implement real-time log analysis and alerting

Monitor for anomalies and suspicious patterns

Create incident response procedures

Protect logs from tampering with immutable storage

A10 - Server-Side Request Forgery (SSRF)

Prevent unauthorized internal requests:

Validate and sanitize URLs before making requests

Use allow-lists for permitted domains and IPs

Implement network segmentation

Validate response content and enforce size limits

Monitor outbound requests for suspicious patterns

Implementation Patterns

Input Validation and Sanitization

Use strong validation libraries:

```typescript

import { z } from 'zod';

import DOMPurify from 'dompurify';

// Schema-based validation

const userInputSchema = z.object({

email: z.string().email().max(254),

name: z.string().min(1).max(100).regex(/^[a-zA-Z\s]+$/),

message: z.string().min(1).max(1000),

});

// HTML sanitization

const sanitizeHtml = (dirty: string): string => {

return DOMPurify.sanitize(dirty, {

ALLOWED_TAGS: ['p', 'br', 'strong', 'em'],

ALLOWED_ATTR: [],

});

};

// File upload validation

const validateFileUpload = (file: File): boolean => {

const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];

const maxSize = 5 * 1024 * 1024; // 5MB

if (!allowedTypes.includes(file.type)) {

throw new Error('Invalid file type');

}

if (file.size > maxSize) {

throw new Error('File too large');

}

return true;

};

```

XSS Prevention

Escape output and implement CSP:

```typescript

// HTML escaping

const escapeHtml = (unsafe: string): string => {

return unsafe

.replace(/&/g, "&")

.replace(/</g, "<")

.replace(/>/g, ">")

.replace(/"/g, """)

.replace(/'/g, "'");

};

// CSP configuration

const CSP_POLICY = {

"default-src": "'self'",

"script-src": "'self' 'nonce-{NONCE}'",

"style-src": "'self' 'unsafe-inline'",

"img-src": "'self' data: https:",

"connect-src": "'self' https://api.example.com",

"frame-src": "'none'",

"object-src": "'none'",

};

```

CSRF Protection

Implement token-based CSRF protection:

```typescript

// Token management

const useCSRFToken = () => {

const [csrfToken, setCSRFToken] = useState<string>('');

useEffect(() => {

fetch('/api/csrf-token', { credentials: 'include' })

.then(res => res.json())

.then(data => setCSRFToken(data.token));

}, []);

return csrfToken;

};

// Include in forms

</form>

```

Authentication and Token Management

Secure token storage and validation:

```typescript

// Token manager with encryption

const TokenManager = {

setToken: (token: string) => {

const encrypted = CryptoJS.AES.encrypt(token, SECRET_KEY).toString();

localStorage.setItem('auth_token', encrypted);

getToken: (): string | null => {

try {

const encrypted = localStorage.getItem('auth_token');

if (!encrypted) return null;

const decrypted = CryptoJS.AES.decrypt(encrypted, SECRET_KEY);

return decrypted.toString(CryptoJS.enc.Utf8);

} catch {

return null;

}

};

// JWT validation

const validateJWT = (token: string): boolean => {

const decoded = jwtDecode(token);

return decoded.exp > Date.now() / 1000;

};

```

Role-Based Access Control

Implement granular permission systems:

```typescript

interface Permission {

resource: string;

action: string;

}

const hasPermission = (user: User, permission: Permission): boolean => {

const permString = `${permission.resource}:${permission.action}`;

return user.permissions.includes(permString) ||

user.roles.some(role => ROLE_PERMISSIONS[role]?.includes(permString));

};

// Protected component wrapper

const ProtectedComponent = ({ permission, children }) => {

const { user } = useAuth();

if (!user || !hasPermission(user, permission)) {

return <UnauthorizedAccess />;

}

return <>{children}</>;

};

```

Data Protection

Mask and encrypt sensitive data:

```typescript

// Sensitive data masking

const maskSensitiveData = {

email: (email: string) => {

const [username, domain] = email.split('@');

return `${username.slice(0, 2)}${'*'.repeat(username.length - 2)}@${domain}`;

phone: (phone: string) => phone.replace(/(\d{3})\d{3}(\d{4})/, '$1***$2'),

creditCard: (card: string) => card.replace(/\d(?=\d{4})/g, '*'),

};

// Client-side encryption for storage

const encryptSensitiveData = (data: any): string => {

return CryptoJS.AES.encrypt(JSON.stringify(data), KEY).toString();

};

```

Secure API Communication

Configure secure HTTP clients:

```typescript

// Axios with security interceptors

const secureApiClient = axios.create({

timeout: 10000,

withCredentials: true,

});

secureApiClient.interceptors.request.use((config) => {

config.headers['X-Requested-With'] = 'XMLHttpRequest';

config.headers['X-Frame-Options'] = 'DENY';

config.headers['X-Content-Type-Options'] = 'nosniff';

config.headers['X-Timestamp'] = Date.now().toString();

const token = TokenManager.getToken();

if (token) config.headers.Authorization = `Bearer ${token}`;

return config;

});

```

Security Headers

Implement comprehensive security headers:

```typescript

const SECURITY_HEADERS = {

'Content-Security-Policy': "default-src 'self'; script-src 'self' 'nonce-{NONCE}'; object-src 'none'",

'Strict-Transport-Security': 'max-age=31536000; includeSubDomains; preload',

'X-Frame-Options': 'DENY',

'X-Content-Type-Options': 'nosniff',

'X-XSS-Protection': '1; mode=block',

'Referrer-Policy': 'strict-origin-when-cross-origin',

'Permissions-Policy': 'camera=(), microphone=(), geolocation=()',

};

```

Usage Examples

Securing a Login Form

1. Validate email and password with Zod schema

2. Implement CSRF token in hidden field

3. Hash password client-side before transmission

4. Use secure API client with HTTPS

5. Store token securely after authentication

6. Implement rate limiting for login attempts

Protecting Sensitive Data

1. Validate all inputs with allow-list validation

2. Encrypt sensitive data before storage

3. Mask data in UI where appropriate

4. Use secure headers for all responses

5. Log access to sensitive resources

6. Implement proper access controls

Building Secure APIs

1. Validate all request parameters

2. Implement authentication middleware

3. Check permissions for each endpoint

4. Sanitize response data

5. Add security headers

6. Rate limit requests

7. Log all security events

Important Notes

**Always validate on the server**: Client-side validation is for UX, not security

**Use environment variables**: Never hardcode secrets in code

**Keep dependencies updated**: Regularly audit and patch vulnerabilities

**Implement defense in depth**: Use multiple layers of security controls

**Follow least privilege**: Grant minimum necessary permissions

**Test security**: Conduct regular security audits and penetration testing

**Educate users**: Provide security best practices guidance

**Plan for incidents**: Have a response plan for security breaches

Security Checklist

Before deploying, verify:

[ ] All inputs are validated and sanitized

[ ] Authentication and authorization are properly implemented

[ ] Sensitive data is encrypted at rest and in transit

[ ] Security headers are configured

[ ] HTTPS is enforced everywhere

[ ] CSRF protection is enabled

[ ] XSS prevention measures are in place

[ ] Dependencies are up to date and audited

[ ] Logging and monitoring are configured

[ ] Rate limiting is implemented

[ ] Error messages don't leak sensitive information

[ ] Security tests are passing

Secure Web Application Development

Safety Concern

Secure Web Application Development

Overview

Core Security Principles

OWASP Top 10 Protection

A01 - Broken Access Control

A02 - Cryptographic Failures

A03 - Injection Attacks

A04 - Insecure Design

A05 - Security Misconfiguration

A06 - Vulnerable and Outdated Components

A07 - Identification and Authentication Failures

A08 - Software and Data Integrity Failures

A09 - Security Logging and Monitoring Failures

A10 - Server-Side Request Forgery (SSRF)

Implementation Patterns

Input Validation and Sanitization

XSS Prevention

CSRF Protection

Authentication and Token Management

Role-Based Access Control

Data Protection

Secure API Communication

Security Headers

Usage Examples

Securing a Login Form

Protecting Sensitive Data

Building Secure APIs

Important Notes

Security Checklist

Reviews (0)