🔐 Security Mastery: Protecting Your React + WordPress Application

// auth.service.js - Secure Authentication Implementation
import axios from 'axios';
import CryptoJS from 'crypto-js';

class AuthService {
  constructor() {
    this.baseURL = process.env.REACT_APP_API_URL;
    this.tokenKey = 'auth_token';
    this.refreshKey = 'refresh_token';
    
    // Set up axios interceptors
    this.setupInterceptors();
  }

  setupInterceptors() {
    // Request interceptor to add token
    axios.interceptors.request.use(
      config => {
        const token = this.getToken();
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
      },
      error => Promise.reject(error)
    );

    // Response interceptor for token refresh
    axios.interceptors.response.use(
      response => response,
      async error => {
        const originalRequest = error.config;
        
        if (error.response?.status === 401 && !originalRequest._retry) {
          originalRequest._retry = true;
          
          try {
            await this.refreshToken();
            return axios(originalRequest);
          } catch (refreshError) {
            this.logout();
            window.location.href = '/login';
            return Promise.reject(refreshError);
          }
        }
        
        return Promise.reject(error);
      }
    );
  }

  async login(username, password) {
    try {
      // Hash password before sending (additional layer)
      const hashedPassword = CryptoJS.SHA256(password).toString();
      
      const response = await axios.post(`${this.baseURL}/jwt-auth/v1/token`, {
        username,
        password: hashedPassword
      });
      
      const { token, refresh_token, user } = response.data;
      
      // Store tokens securely
      this.setToken(token);
      this.setRefreshToken(refresh_token);
      
      // Store user info (excluding sensitive data)
      const sanitizedUser = {
        id: user.id,
        email: user.email,
        displayName: user.displayName,
        role: user.role
      };
      localStorage.setItem('user', JSON.stringify(sanitizedUser));
      
      return { success: true, user: sanitizedUser };
    } catch (error) {
      console.error('Login failed:', error);
      return { 
        success: false, 
        error: this.sanitizeError(error.response?.data?.message) 
      };
    }
  }

  async refreshToken() {
    const refreshToken = this.getRefreshToken();
    if (!refreshToken) throw new Error('No refresh token');
    
    const response = await axios.post(`${this.baseURL}/jwt-auth/v1/token/refresh`, {
      refresh_token: refreshToken
    });
    
    this.setToken(response.data.token);
    return response.data.token;
  }

  // Secure token storage
  setToken(token) {
    // Use httpOnly cookie in production
    if (process.env.NODE_ENV === 'production') {
      document.cookie = `${this.tokenKey}=${token}; Secure; SameSite=Strict; Path=/`;
    } else {
      sessionStorage.setItem(this.tokenKey, token);
    }
  }

  getToken() {
    if (process.env.NODE_ENV === 'production') {
      return this.getCookie(this.tokenKey);
    }
    return sessionStorage.getItem(this.tokenKey);
  }

  logout() {
    // Clear all auth data
    sessionStorage.clear();
    localStorage.removeItem('user');
    document.cookie = `${this.tokenKey}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
  }

  // Sanitize error messages to prevent information leakage
  sanitizeError(message) {
    const genericError = 'Authentication failed. Please try again.';
    const safeMessages = {
      'invalid_username': 'Invalid credentials',
      'incorrect_password': 'Invalid credentials',
      'jwt_auth_failed': 'Authentication failed'
    };
    
    return safeMessages[message] || genericError;
  }

  getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
  }
}

export default new AuthService();

# Security Testing Commands

# npm audit - Check for vulnerable dependencies
npm audit
npm audit fix

# OWASP Dependency Check
npm install -g @owasp/dependency-check
dependency-check --project "MyApp" --scan ./

# Security Headers Test
curl -I https://yourdomain.com

# SSL/TLS Test
nmap --script ssl-enum-ciphers -p 443 yourdomain.com

# WordPress Security Scan
wpscan --url https://yourdomain.com --enumerate vp,vt,u

# React Bundle Analysis
npm run build
npm install -g source-map-explorer
source-map-explorer build/static/js/*.js

# Penetration Testing Tools
# - Burp Suite
# - OWASP ZAP
# - Nikto
# - SQLMap

# Code Analysis
npm install -g eslint-plugin-security
eslint --ext .js,.jsx src/

// services/IncidentResponse.js
class IncidentResponseSystem {
  constructor() {
    this.incidentLevels = {
      CRITICAL: 'critical',
      HIGH: 'high',
      MEDIUM: 'medium',
      LOW: 'low'
    };
    
    this.responseTeam = {
      critical: ['security@company.com', 'cto@company.com'],
      high: ['security@company.com'],
      medium: ['devops@company.com'],
      low: ['logs@company.com']
    };
  }

  async handleIncident(incident) {
    // 1. Log the incident
    const incidentId = this.logIncident(incident);
    
    // 2. Assess severity
    const severity = this.assessSeverity(incident);
    
    // 3. Notify appropriate team
    await this.notifyTeam(severity, incident, incidentId);
    
    // 4. Take immediate action
    const actions = this.getImmediateActions(incident);
    await this.executeActions(actions);
    
    // 5. Create incident report
    const report = this.generateReport(incident, incidentId, actions);
    
    return { incidentId, severity, report };
  }

  assessSeverity(incident) {
    // Critical: Data breach, system compromise
    if (incident.type === 'DATA_BREACH' || 
        incident.type === 'SYSTEM_COMPROMISE' ||
        incident.type === 'RANSOMWARE') {
      return this.incidentLevels.CRITICAL;
    }
    
    // High: Authentication bypass, XSS/CSRF in production
    if (incident.type === 'AUTH_BYPASS' || 
        incident.type === 'XSS_PRODUCTION' ||
        incident.type === 'SQL_INJECTION') {
      return this.incidentLevels.HIGH;
    }
    
    // Medium: Suspicious activity, failed attacks
    if (incident.type === 'BRUTE_FORCE' || 
        incident.type === 'SUSPICIOUS_ACTIVITY') {
      return this.incidentLevels.MEDIUM;
    }
    
    // Low: Policy violations, minor issues
    return this.incidentLevels.LOW;
  }

  getImmediateActions(incident) {
    const actions = [];
    
    switch (incident.type) {
      case 'DATA_BREACH':
        actions.push('ISOLATE_SYSTEM');
        actions.push('PRESERVE_EVIDENCE');
        actions.push('NOTIFY_LEGAL');
        actions.push('PREPARE_DISCLOSURE');
        break;
        
      case 'BRUTE_FORCE':
        actions.push('BLOCK_IP');
        actions.push('LOCK_ACCOUNT');
        actions.push('FORCE_PASSWORD_RESET');
        break;
        
      case 'XSS_PRODUCTION':
        actions.push('PATCH_VULNERABILITY');
        actions.push('CLEAR_CACHE');
        actions.push('NOTIFY_USERS');
        break;
        
      case 'SQL_INJECTION':
        actions.push('BLOCK_REQUEST_PATTERN');
        actions.push('AUDIT_DATABASE');
        actions.push('PATCH_CODE');
        break;
    }
    
    return actions;
  }

  async executeActions(actions) {
    for (const action of actions) {
      try {
        await this.executeAction(action);
        console.log(`Action executed: ${action}`);
      } catch (error) {
        console.error(`Failed to execute action ${action}:`, error);
      }
    }
  }

  generateReport(incident, incidentId, actions) {
    return {
      id: incidentId,
      timestamp: new Date().toISOString(),
      type: incident.type,
      severity: this.assessSeverity(incident),
      description: incident.description,
      affectedSystems: incident.systems,
      actionsT taken: actions,
      status: 'IN_PROGRESS',
      recommendations: this.getRecommendations(incident)
    };
  }
}

// WordPress Incident Logging
add_action('rest_api_init', function() {
    register_rest_route('security/v1', '/incident', array(
        'methods' => 'POST',
        'callback' => 'handle_security_incident',
        'permission_callback' => '__return_true'
    ));
});

function handle_security_incident($request) {
    $incident = $request->get_json_params();
    
    // Log to database
    global $wpdb;
    $table = $wpdb->prefix . 'security_incidents';
    
    $wpdb->insert($table, array(
        'incident_time' => current_time('mysql'),
        'incident_type' => $incident['type'],
        'severity' => $incident['severity'],
        'description' => $incident['description'],
        'ip_address' => $_SERVER['REMOTE_ADDR'],
        'user_agent' => $_SERVER['HTTP_USER_AGENT'],
        'affected_user' => get_current_user_id()
    ));
    
    // Critical incidents - immediate notification
    if ($incident['severity'] === 'critical') {
        wp_mail(
            get_option('admin_email'),
            'CRITICAL SECURITY INCIDENT',
            'Immediate action required: ' . json_encode($incident),
            array('Content-Type: text/html; charset=UTF-8')
        );
        
        // Trigger emergency response
        do_action('security_critical_incident', $incident);
    }
    
    return new WP_REST_Response(array(
        'incident_id' => $wpdb->insert_id,
        'status' => 'logged'
    ), 200);
}