🔒 Production Security Guide

// Client-side: Call your own backend
fetch('/api/avatar/chat', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${userToken}` // ✅ User token, not API key
    },
    body: JSON.stringify({ message: userInput })
});

// Backend (Node.js example):
app.post('/api/avatar/chat', authenticateUser, async (req, res) => {
    // ✅ API key stored securely on backend
    const response = await fetch('https://api.ttavatar.com/chat', {
        headers: {
            'Authorization': `Bearer ${process.env.TTAVATAR_API_KEY}`
        },
        body: JSON.stringify(req.body)
    });

    res.json(await response.json());
});
                            

function sanitizeInput(input) {
    // Remove potentially dangerous content
    return input
        .replace(/<script[^>]*>.*?<\/script>/gi, '') // Remove scripts
        .replace(/javascript:/gi, '') // Remove javascript: URLs
        .replace(/on\w+\s*=/gi, '') // Remove event handlers
        .trim()
        .substring(0, 1000); // Limit length
}

function validateMessage(message) {
    if (!message || typeof message !== 'string') {
        throw new Error('Invalid message format');
    }

    if (message.length > 1000) {
        throw new Error('Message too long');
    }

    // Check for inappropriate content
    const inappropriatePatterns = [
        /\b(hate|violence|illegal)\b/i
        // Add your content filters
    ];

    for (const pattern of inappropriatePatterns) {
        if (pattern.test(message)) {
            throw new Error('Inappropriate content detected');
        }
    }

    return sanitizeInput(message);
}

// Usage
try {
    const cleanMessage = validateMessage(userInput);
    // Send to avatar API
} catch (error) {
    console.error('Input validation failed:', error.message);
    // Show user-friendly error
}
                            

class RateLimiter {
    constructor(maxRequests = 10, timeWindow = 60000) {
        this.maxRequests = maxRequests;
        this.timeWindow = timeWindow;
        this.requests = [];
    }

    isAllowed() {
        const now = Date.now();

        // Remove old requests outside time window
        this.requests = this.requests.filter(
            time => now - time < this.timeWindow
        );

        // Check if limit exceeded
        if (this.requests.length >= this.maxRequests) {
            return false;
        }

        // Record this request
        this.requests.push(now);
        return true;
    }

    getRetryAfter() {
        if (this.requests.length === 0) return 0;

        const oldestRequest = Math.min(...this.requests);
        const waitTime = this.timeWindow - (Date.now() - oldestRequest);
        return Math.max(0, Math.ceil(waitTime / 1000));
    }
}

// Usage
const rateLimiter = new RateLimiter(10, 60000); // 10 requests per minute

function sendMessage(message) {
    if (!rateLimiter.isAllowed()) {
        const retryAfter = rateLimiter.getRetryAfter();
        showError(`Rate limit exceeded. Try again in ${retryAfter} seconds.`);
        return;
    }

    // Send message to avatar
    callAvatarAPI(message);
}
                            

// Express.js example
app.use((req, res, next) => {
    // Prevent clickjacking
    res.setHeader('X-Frame-Options', 'DENY');

    // XSS protection
    res.setHeader('X-XSS-Protection', '1; mode=block');

    // Prevent MIME sniffing
    res.setHeader('X-Content-Type-Options', 'nosniff');

    // Enforce HTTPS
    res.setHeader('Strict-Transport-Security',
        'max-age=31536000; includeSubDomains; preload');

    // Content Security Policy
    res.setHeader('Content-Security-Policy',
        "default-src 'self'; " +
        "script-src 'self' 'unsafe-inline'; " +
        "style-src 'self' 'unsafe-inline'; " +
        "connect-src 'self' https://api.ttavatar.com; " +
        "frame-ancestors 'none';"
    );

    next();
});

// HTML meta tags
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; connect-src 'self' https://api.ttavatar.com">
                            

class SecurityLogger {
    static log(event, data = {}) {
        const logEntry = {
            timestamp: new Date().toISOString(),
            event,
            ip: this.getClientIP(),
            userAgent: navigator.userAgent,
            ...data
        };

        // Send to your logging service
        fetch('/api/security/log', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(logEntry)
        });

        console.warn('Security event:', logEntry);
    }

    static getClientIP() {
        // This would typically be done on the server
        return 'client-side';
    }
}

// Usage examples
try {
    const response = await callAvatarAPI(message);
    if (!response.ok) {
        SecurityLogger.log('api_error', {
            status: response.status,
            endpoint: '/avatar/chat'
        });
    }
} catch (error) {
    SecurityLogger.log('api_failure', {
        error: error.message,
        endpoint: '/avatar/chat'
    });

    // Show user-friendly error
    showError('Sorry, the avatar is temporarily unavailable.');
}

// Rate limit violations
if (!rateLimiter.isAllowed()) {
    SecurityLogger.log('rate_limit_exceeded', {
        endpoint: '/avatar/chat',
        limit: rateLimiter.maxRequests
    });
}

// Suspicious input
if (isSuspiciousInput(userInput)) {
    SecurityLogger.log('suspicious_input', {
        input: userInput.substring(0, 100) // Log sample only
    });
}