Implement Secure Communication Layer Documentation and Utilities

__test__/navBar_expect_result.json

@@ -1,4 +1,4 @@
 [
-    ["Home", "Albums", "Contact Me"],
+    ["Home", "Security", "Albums", "Contact Me"],
     ["Welcoming", "About Me", {"My Professional Self": ["Resume","Projects","Education","Work Experience","Skills"]}]
 ]

src/app/content/navMenu.json

@@ -6,6 +6,15 @@
             {"My Professional Self": ["Resume", "Projects", "Education", "Work Experience", "Skills"]}
         ]
     },
+    {
+        "Security": [
+            "Overview",
+            {"API Security": ["Authentication", "Authorization", "Rate Limiting", "Input Validation"]},
+            {"HTTPS Implementation": ["SSL/TLS Setup", "Certificate Management", "Security Headers"]},
+            {"Data Sanitization": ["Input Sanitization", "Output Encoding", "XSS Prevention"]},
+            {"Best Practices": ["Secure Coding", "Security Testing", "Common Vulnerabilities"]}
+        ]
+    },
     {
         "Albums": [
             {"Childhood": ["School", "Family"]}, 

src/app/security/README.md

@@ -0,0 +1,279 @@
+# Secure Communication Layer Documentation
+
+## Overview
+
+This comprehensive guide provides practical security implementations for developers with limited security experience. It covers essential practices for secure frontend-backend communication, including API security, HTTPS implementation, and data sanitization.
+
+## Quick Start
+
+### 1. Install Required Dependencies
+
+```bash
+# Frontend dependencies
+npm install isomorphic-dompurify xss
+
+# Backend dependencies (Express.js example)
+npm install express helmet express-rate-limit express-validator cors
+npm install jsonwebtoken bcryptjs joi
+```
+
+### 2. Basic Security Setup
+
+```javascript
+// Import security utilities
+import { InputSanitizer, SecureApiClient, ErrorHandler } from './security/utils/securityUtils';
+
+// Create secure API client
+const api = new SecureApiClient('https://api.yourdomain.com');
+
+// Sanitize user input
+const cleanInput = InputSanitizer.sanitizeString(userInput, {
+  removeHtml: true,
+  removeScripts: true,
+  maxLength: 1000
+});
+```
+
+## Security Components
+
+### 🔐 API Security
+- **Authentication & Authorization**: JWT tokens, OAuth 2.0, API keys
+- **Input Validation**: Server-side validation with Joi/express-validator
+- **Rate Limiting**: Prevent abuse and DDoS attacks
+- **Error Handling**: Secure error responses
+
+### 🔒 HTTPS Implementation
+- **SSL/TLS Setup**: Let's Encrypt, certificate management
+- **Security Headers**: HSTS, CSP, X-Frame-Options
+- **Certificate Monitoring**: Automated renewal and alerts
+
+### 🛡️ Data Sanitization
+- **Input Sanitization**: XSS prevention, HTML encoding
+- **Output Encoding**: Safe content rendering
+- **Content Security Policy**: Browser-level protection
+
+## File Structure
+
+```
+src/app/security/
+├── components/
+│   └── CodeBlock.js              # Reusable code display component
+├── docs/
+│   ├── api-security.js           # API security guidelines
+│   ├── https-implementation.js   # HTTPS setup guide
+│   └── data-sanitization.js      # Data sanitization guide
+├── utils/
+│   └── securityUtils.js          # Security utility functions
+├── examples/
+│   ├── secure-forms/             # Example secure form implementations
+│   ├── api-examples/             # API security examples
+│   └── testing/                  # Security testing examples
+└── page.js                       # Main security overview page
+```
+
+## Usage Examples
+
+### Secure Form Handling
+
+```javascript
+import { InputSanitizer, InputValidator } from './security/utils/securityUtils';
+
+const handleFormSubmit = async (formData) => {
+  // Validate input
+  if (!InputValidator.isEmail(formData.email)) {
+    throw new Error('Invalid email format');
+  }
+
+  // Sanitize input
+  const sanitizedData = {
+    name: InputSanitizer.sanitizeString(formData.name, { removeHtml: true }),
+    email: InputSanitizer.sanitizeEmail(formData.email),
+    message: InputSanitizer.sanitizeString(formData.message, { removeScripts: true })
+  };
+
+  // Send to API
+  const response = await api.post('/contact', sanitizedData);
+  return response;
+};
+```
+
+### Secure API Client Usage
+
+```javascript
+import { SecureApiClient } from './security/utils/securityUtils';
+
+const api = new SecureApiClient('https://api.example.com', {
+  timeout: 10000,
+  retryAttempts: 3
+});
+
+// Authenticated request
+api.setAuthToken('your-jwt-token');
+const userData = await api.get('/user/profile');
+
+// Handle errors
+try {
+  await api.post('/sensitive-data', data);
+} catch (error) {
+  const errorInfo = ErrorHandler.handleApiError(error);
+  console.log(errorInfo.userMessage);
+}
+```
+
+## Security Checklist
+
+### Frontend Security
+- [ ] Input validation on all forms
+- [ ] XSS prevention with proper encoding
+- [ ] HTTPS enforced for all requests
+- [ ] Content Security Policy implemented
+- [ ] Sensitive data not stored in localStorage
+- [ ] API rate limiting on client side
+
+### Backend Security
+- [ ] Input validation with schemas (Joi/Zod)
+- [ ] Authentication middleware on protected routes
+- [ ] Rate limiting implemented
+- [ ] CORS properly configured
+- [ ] Security headers configured
+- [ ] Parameterized database queries
+- [ ] Error handling without information disclosure
+
+### Infrastructure Security
+- [ ] SSL certificate installed and auto-renewing
+- [ ] Security headers configured (HSTS, CSP, etc.)
+- [ ] Regular security updates
+- [ ] Monitoring and alerting set up
+- [ ] Backup and recovery procedures
+
+## Common Vulnerabilities & Prevention
+
+### Cross-Site Scripting (XSS)
+```javascript
+// ❌ Dangerous - direct HTML insertion
+element.innerHTML = userInput;
+
+// ✅ Safe - use React's built-in escaping
+return <div>{userInput}</div>;
+
+// ✅ Safe - sanitize if HTML is needed
+import DOMPurify from 'dompurify';
+const clean = DOMPurify.sanitize(userInput);
+```
+
+### SQL Injection
+```javascript
+// ❌ Dangerous - string concatenation
+const query = `SELECT * FROM users WHERE id = ${userId}`;
+
+// ✅ Safe - parameterized queries
+const query = 'SELECT * FROM users WHERE id = $1';
+const result = await pool.query(query, [userId]);
+```
+
+### Cross-Site Request Forgery (CSRF)
+```javascript
+// ✅ CSRF protection with SameSite cookies
+app.use(session({
+  cookie: {
+    sameSite: 'strict',
+    secure: true, // HTTPS only
+    httpOnly: true
+  }
+}));
+```
+
+## Environment Configuration
+
+### Development
+```javascript
+// next.config.js (development)
+module.exports = {
+  async headers() {
+    return [{
+      source: '/(.*)',
+      headers: [
+        { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
+        // Relaxed CSP for development
+        { key: 'Content-Security-Policy', value: "default-src 'self' 'unsafe-inline'" }
+      ]
+    }];
+  }
+};
+```
+
+### Production
+```javascript
+// next.config.js (production)
+const strictCSP = "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'";
+
+module.exports = {
+  async headers() {
+    return [{
+      source: '/(.*)',
+      headers: [
+        { key: 'Strict-Transport-Security', value: 'max-age=31536000; includeSubDomains; preload' },
+        { key: 'X-Frame-Options', value: 'DENY' },
+        { key: 'Content-Security-Policy', value: strictCSP },
+        { key: 'X-Content-Type-Options', value: 'nosniff' }
+      ]
+    }];
+  }
+};
+```
+
+## Testing Security
+
+### Automated Security Testing
+```javascript
+// Example security test
+describe('Security Tests', () => {
+  test('should sanitize XSS attempts', () => {
+    const maliciousInput = '<script>alert("xss")</script>';
+    const sanitized = InputSanitizer.sanitizeString(maliciousInput, { removeScripts: true });
+    expect(sanitized).not.toContain('<script>');
+  });
+
+  test('should validate email format', () => {
+    expect(InputValidator.isEmail('invalid-email')).toBe(false);
+    expect(InputValidator.isEmail('user@example.com')).toBe(true);
+  });
+});
+```
+
+### Manual Security Testing
+1. **XSS Testing**: Try injecting `<script>alert('xss')</script>` in forms
+2. **SQL Injection**: Test with `'; DROP TABLE users; --`
+3. **CSRF Testing**: Make requests from different origins
+4. **Rate Limiting**: Send rapid requests to test limits
+
+## Resources & Further Reading
+
+### Standards & Guidelines
+- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
+- [OWASP Cheat Sheets](https://cheatsheetseries.owasp.org/)
+- [Mozilla Web Security Guidelines](https://infosec.mozilla.org/guidelines/web_security)
+
+### Tools for Security Testing
+- [OWASP ZAP](https://www.zaproxy.org/) - Security scanner
+- [Snyk](https://snyk.io/) - Vulnerability scanning
+- [SecurityHeaders.com](https://securityheaders.com/) - Header analysis
+- [SSL Labs](https://www.ssllabs.com/ssltest/) - SSL configuration testing
+
+### Libraries & Frameworks
+- [Helmet.js](https://helmetjs.github.io/) - Express security middleware
+- [DOMPurify](https://github.com/cure53/DOMPurify) - XSS sanitizer
+- [Joi](https://joi.dev/) - Input validation
+- [express-rate-limit](https://github.com/nfriedly/express-rate-limit) - Rate limiting
+
+## Contributing
+
+Found a security issue or want to improve the documentation? Please:
+
+1. **For security vulnerabilities**: Report privately to the maintainers
+2. **For improvements**: Submit a pull request with your changes
+3. **For questions**: Open an issue for discussion
+
+## License
+
+This security documentation and utilities are provided under the MIT License. Use at your own risk and always perform thorough security testing in your specific environment.

src/app/security/components/CodeBlock.js

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { Box, Typography, IconButton, Tooltip } from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+
+const CodeBlock = ({ code, language = 'javascript', title }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy code:', err);
+    }
+  };
+
+  return (
+    <Box sx={{ position: 'relative', mb: 2 }}>
+      {title && (
+        <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 'bold' }}>
+          {title}
+        </Typography>
+      )}
+      <Box
+        sx={{
+          position: 'relative',
+          bgcolor: '#1e1e1e',
+          color: '#d4d4d4',
+          fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+          fontSize: '0.875rem',
+          lineHeight: 1.5,
+          padding: 2,
+          borderRadius: 1,
+          overflow: 'auto',
+          maxHeight: '400px',
+          '& .keyword': { color: '#569cd6' },
+          '& .string': { color: '#ce9178' },
+          '& .comment': { color: '#6a9955' },
+          '& .function': { color: '#dcdcaa' },
+        }}
+      >
+        <Tooltip title={copied ? 'Copied!' : 'Copy code'}>
+          <IconButton
+            onClick={handleCopy}
+            sx={{
+              position: 'absolute',
+              top: 8,
+              right: 8,
+              color: 'white',
+              bgcolor: 'rgba(255, 255, 255, 0.1)',
+              '&:hover': {
+                bgcolor: 'rgba(255, 255, 255, 0.2)',
+              },
+            }}
+            size="small"
+          >
+            {copied ? <CheckIcon fontSize="small" /> : <ContentCopyIcon fontSize="small" />}
+          </IconButton>
+        </Tooltip>
+        <pre style={{ margin: 0, whiteSpace: 'pre-wrap', paddingRight: '40px' }}>
+          <code>{code}</code>
+        </pre>
+      </Box>
+    </Box>
+  );
+};
+
+export default CodeBlock;