Replace ProfileHeader banner image with video element

.env.example

@@ -1,11 +1,26 @@
 # Example environment variables file
-# Copy this file to .env and fill in your values
+# Copy this file to .env and fill in your actual values
+# IMPORTANT: Never commit the .env file to version control
 
-# Admin credentials
-VITE_ADMIN_EMAIL=admin@example.com
-VITE_ADMIN_PASSWORD=adminpassword
+# ============================================================
+# SECURITY WARNING
+# ============================================================
+# These environment variables are bundled into the client-side
+# JavaScript and are NOT secure from inspection via browser
+# DevTools. DO NOT use this for production authentication.
+#
+# For production, implement proper server-side authentication
+# with JWT tokens or session management.
+# ============================================================
+
+# Admin credentials (DEVELOPMENT/DEMO ONLY)
+# WARNING: These are visible in the browser and should not be
+# used for real authentication in production
+VITE_ADMIN_EMAIL=your-admin-email@example.com
+VITE_ADMIN_PASSWORD=your-secure-password
 
 # EmailJS configuration
+# Get your credentials from https://www.emailjs.com/
 VITE_EMAILJS_SERVICE_ID=your_service_id
 VITE_EMAILJS_TEMPLATE_ID=your_template_id
-VITE_EMAILJS_USER_ID=your_user_id
+VITE_EMAILJS_USER_ID=your_public_key

PR_DESCRIPTION.md

@@ -0,0 +1,84 @@
+# Security Audit: Fix Vulnerabilities and Remove Hardcoded Credentials
+
+## Summary
+
+This PR addresses critical security vulnerabilities and implements comprehensive security improvements across the codebase. All security issues identified in the audit have been resolved.
+
+### 🔴 Critical Security Fixes
+
+- **Removed hardcoded admin credentials** from `AdminLogin.tsx` (admin@example.com / adminpassword)
+- **Removed hardcoded EmailJS credentials** from `useChatState.ts` (service/template/user IDs)
+- **Fixed Vite path traversal vulnerability** (GHSA-93m4-6634-74q7) by updating to v6.4.1
+
+### 📦 Package Updates
+
+- **vite**: 6.3.6 → 6.4.1 (security patch)
+- **lucide-react**: 0.344.0 → 0.546.0 (latest)
+- **@emailjs/browser**: Updated to latest version
+- **browserslist database**: Updated to latest version
+
+### 🔒 Security Improvements
+
+1. **Environment Variable Migration**
+   - All credentials now use environment variables exclusively
+   - Added validation to prevent undefined credential usage
+   - Graceful fallback when EmailJS credentials are not configured
+
+2. **Enhanced Documentation**
+   - Created comprehensive `SECURITY.md` with:
+     - Security policy and audit history
+     - Known limitations (client-side auth)
+     - Production recommendations
+     - Best practices implemented
+   - Updated `.env.example` with security warnings
+   - Clear documentation about Vite environment variable exposure
+
+3. **Code Quality**
+   - All changes pass ESLint with 0 errors
+   - Production build successful
+   - `npm audit` reports 0 vulnerabilities
+
+### ⚠️ Important Notes
+
+**Client-Side Authentication Limitation:**
+The admin chat feature uses client-side authentication, which is inherently insecure for production use. Environment variables prefixed with `VITE_` are bundled into the JavaScript and visible in browser DevTools.
+
+**Recommendations:**
+- For development/demo: Use the current implementation with secure credentials in `.env`
+- For production: Implement proper server-side authentication (see SECURITY.md)
+
+### 📋 Files Changed
+
+- `package.json` & `package-lock.json` - Dependency updates
+- `src/components/chat/AdminLogin.tsx` - Environment variable usage
+- `src/components/chat/useChatState.ts` - Removed hardcoded credentials
+- `.env.example` - Added security warnings and documentation
+- `SECURITY.md` - NEW: Comprehensive security documentation
+
+### ✅ Verification
+
+- [x] Build successful
+- [x] Linter passed (0 errors)
+- [x] Security audit clean (0 vulnerabilities)
+- [x] All environment variables documented
+- [x] Security documentation complete
+
+### 🧪 Test Plan
+
+1. Copy `.env.example` to `.env` and fill in values
+2. Run `npm install` to ensure dependencies are correct
+3. Run `npm run build` to verify production build
+4. Run `npm run lint` to verify code quality
+5. Run `npm audit` to confirm 0 vulnerabilities
+6. Test admin login with environment variables
+7. Test chat functionality with EmailJS credentials
+
+### 📚 Related Issues
+
+- Fixes security vulnerabilities identified in security audit
+- Addresses hardcoded credential concerns
+- Implements security best practices for production readiness
+
+---
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)

SECURITY.md

@@ -0,0 +1,168 @@
+# Security Policy
+
+## Current Security Status
+
+This project has been audited and all known vulnerabilities have been addressed. Latest audit date: 2025-10-22
+
+- **npm audit**: 0 vulnerabilities
+- **Dependencies**: Up to date with security patches
+- **Build**: Production-ready
+
+## Known Security Limitations
+
+### Client-Side Authentication (IMPORTANT)
+
+The admin chat feature in this application uses client-side authentication, which has inherent security limitations:
+
+#### What This Means:
+- Environment variables (`VITE_*`) are bundled into the JavaScript sent to browsers
+- Admin credentials are visible to anyone who inspects the browser DevTools
+- This implementation is suitable for **DEVELOPMENT/DEMO ONLY**
+
+#### Why It Exists:
+This is a static site (Vite + React) without a backend server. The admin login is a demonstration feature and should not be used for production authentication.
+
+#### Production Recommendations:
+For production use, implement proper security:
+
+1. **Backend Authentication Server**
+   - Set up a Node.js/Express, Python/Flask, or similar backend
+   - Use JWT (JSON Web Tokens) for session management
+   - Keep credentials server-side only
+
+2. **Third-Party Authentication**
+   - Implement OAuth 2.0 (Google, GitHub, etc.)
+   - Use services like Auth0, Firebase Auth, or Supabase
+   - Leverage established security protocols
+
+3. **Remove Client-Side Auth**
+   - If you don't need admin features, remove the AdminLogin component
+   - Simplify the chat interface to user-only mode
+
+## Environment Variables
+
+### Required Setup:
+1. Copy `.env.example` to `.env`
+2. Fill in your actual values
+3. Never commit `.env` to version control (already in `.gitignore`)
+
+### Variable Security Levels:
+
+| Variable | Sensitivity | Notes |
+|----------|-------------|-------|
+| `VITE_ADMIN_EMAIL` | ⚠️ LOW (Public) | Visible in browser, demo only |
+| `VITE_ADMIN_PASSWORD` | ⚠️ LOW (Public) | Visible in browser, demo only |
+| `VITE_EMAILJS_SERVICE_ID` | ✅ PUBLIC | Safe to expose, public key |
+| `VITE_EMAILJS_TEMPLATE_ID` | ✅ PUBLIC | Safe to expose, template ID |
+| `VITE_EMAILJS_USER_ID` | ✅ PUBLIC | Safe to expose, public key |
+
+Note: All `VITE_*` environment variables are embedded in the client-side bundle and are publicly accessible.
+
+## Security Best Practices Implemented
+
+### ✅ Implemented Security Headers (`vite.config.ts`)
+
+#### Cross-Origin Policies
+- **Cross-Origin-Embedder-Policy**: `credentialless` - Allows loading cross-origin resources without CORS
+- **Cross-Origin-Opener-Policy**: `same-origin` - Prevents cross-origin documents from opening this page
+- **Cross-Origin-Resource-Policy**: `cross-origin` - Allows resources to be loaded cross-origin
+
+#### XSS Protection
+- **Content-Security-Policy (CSP)**: Comprehensive policy that:
+  - Restricts script sources to self, Tempo Labs, and Google APIs
+  - Allows inline styles (required for Vite/React)
+  - Restricts image sources to self, data URIs, and HTTPS
+  - Limits API connections to EmailJS and Tempo Labs
+  - Blocks iframe embedding with `frame-ancestors 'none'`
+  - Upgrades insecure requests to HTTPS
+- **X-XSS-Protection**: `1; mode=block` - Legacy XSS protection for older browsers
+
+#### Clickjacking Protection
+- **X-Frame-Options**: `DENY` - Prevents page from being loaded in iframes
+
+#### MIME-Type Protection
+- **X-Content-Type-Options**: `nosniff` - Prevents MIME-type sniffing attacks
+
+#### Privacy & Information Control
+- **Referrer-Policy**: `strict-origin-when-cross-origin` - Limits referrer information sent with requests
+
+#### Browser Feature Restrictions
+- **Permissions-Policy**: Restricts access to:
+  - Camera: Disabled
+  - Microphone: Disabled
+  - Geolocation: Disabled
+  - Interest-cohort (FLoC): Disabled for privacy
+
+#### HTTPS Enforcement (Production Only)
+- **Strict-Transport-Security (HSTS)**: `max-age=31536000; includeSubDomains; preload`
+  - Enforces HTTPS connections for 1 year
+  - Applies to all subdomains
+  - Ready for browser preload lists
+  - Only enabled in production builds
+
+### ✅ Other Security Measures:
+- Proper `window.open()` usage with `noopener,noreferrer`
+- Environment variables for configuration
+- No use of dangerous patterns (`eval`, `innerHTML`, `dangerouslySetInnerHTML`)
+- Dependencies kept up to date
+- Proper `.gitignore` for sensitive files
+- Environment-aware security configuration (dev vs production)
+
+### 🔄 Recommended for Production:
+- [ ] Implement server-side authentication
+- [x] ~~Add Content Security Policy (CSP) headers~~ ✅ Implemented
+- [ ] Set up rate limiting for API calls
+- [x] ~~Implement HTTPS only~~ ✅ HSTS header enforces HTTPS in production
+- [x] ~~Add security headers middleware~~ ✅ Comprehensive headers implemented
+- [ ] Set up automated dependency scanning (Dependabot, Snyk)
+- [ ] Implement proper session management
+- [ ] Add request/response validation
+- [ ] Set up logging and monitoring
+- [ ] Implement CSRF protection (if adding forms with state-changing actions)
+
+## Reporting Security Issues
+
+If you discover a security vulnerability, please:
+
+1. **DO NOT** open a public issue
+2. Email the maintainer directly with details
+3. Include steps to reproduce if possible
+4. Allow time for a fix before public disclosure
+
+## Update Policy
+
+- Security patches are applied immediately
+- Dependencies are reviewed monthly
+- Major version updates are tested before deployment
+- `npm audit` is run before each release
+
+## Audit History
+
+| Date | Action | Result |
+|------|--------|--------|
+| 2025-10-22 | Comprehensive security audit | Fixed Vite vulnerability, removed hardcoded credentials |
+| 2025-10-22 | Package updates | Updated to latest secure versions |
+| 2025-10-22 | Security headers implementation | Added CSP, XSS protection, clickjacking prevention, HSTS |
+| 2025-10-22 | Build verification | All tests passed, 0 vulnerabilities |
+
+## Additional Resources
+
+### Security Standards & Guidelines
+- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
+- [OWASP Secure Headers Project](https://owasp.org/www-project-secure-headers/)
+- [Mozilla Web Security Guidelines](https://infosec.mozilla.org/guidelines/web_security)
+
+### Technology-Specific Security
+- [Vite Security](https://vitejs.dev/guide/env-and-mode.html#security-notes)
+- [React Security Best Practices](https://react.dev/learn/security)
+- [EmailJS Security](https://www.emailjs.com/docs/security/)
+
+### Security Headers Documentation
+- [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
+- [HTTP Strict Transport Security (HSTS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security)
+- [Security Headers Quick Reference](https://securityheaders.com/)
+- [Test Your Security Headers](https://securityheaders.com/)
+
+---
+
+**Last Updated**: 2025-10-22

dist/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

dist/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Carte de visite numérique de Hubert Larose-Surprenant - Technicien Informatique"
+    />
+    <meta name="theme-color" content="#1d4ed8" />
+    <title>Hubert Larose-Surprenant | Technicien Informatique</title>
+    <script type="module" crossorigin src="/assets/index-CZJxCog6.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/react-vendor-DStWELKi.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-kl3yef-D.css">
+  </head>
+  <body class="overflow-hidden">
+    <div id="root"></div>
+    <script src="https://api.tempolabs.ai/proxy-asset?url=https://storage.googleapis.com/tempo-public-assets/error-handling.js"></script>
+  </body>
+</html>

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@emailjs/browser": "^4.1.0",
-    "lucide-react": "^0.344.0",
+    "lucide-react": "^0.546.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.5.0",

public/README.md

@@ -0,0 +1,11 @@
+# Public Assets
+
+This folder contains static assets served by Vite.
+
+## Video File Required
+
+**Important:** Place the video file `Video_Generation_From_Image.mp4` in this directory for the ProfileHeader banner to display correctly.
+
+The ProfileHeader component expects this video at: `/Video_Generation_From_Image.mp4`
+
+If the video file is not present, the component will fall back to the static background image.