feat: solution SSL 100% locale avec mkcert pour HTTPS de confiance
Problème résolu : certificats self-signed bloqués par navigateurs Solution : mkcert génère certificats automatiquement approuvés - CA locale installée sur système - Certificats signés par cette CA - Navigateurs font confiance automatiquement - Pas de warnings SSL - 100% local, pas de cloud/domaine Nouveau script : setup-certificates.sh - Installe mkcert (Homebrew/apt) - Installe CA locale (mkcert -install) - Détecte IP réseau automatiquement - Génère certificats localhost + IP + *.local - Configure server/.env (SSL_CERT, SSL_KEY) - Configure client/.env (VITE_SERVER_URL) - Met à jour vite.config.js avec HTTPS Serveur modifié : server/index.js - Lit certificats depuis process.env.SSL_CERT/SSL_KEY - Fallback : ../certs/localhost.pem - Message erreur si certificats introuvables Documentation : - SSL-SETUP.md : guide complet installation manuelle/auto - SSL-SOLUTION.md : résumé technique - README.md : ajout étape setup-certificates.sh Résultat : - Cadenas vert sur desktop (Chrome/Safari/Firefox) - WebRTC fonctionne en HTTPS - Smartphones : accepter certificat une fois (normal) - Valable 10 ans, pas de renouvellement Usage : ./setup-certificates.sh (2 minutes) Ensuite : ./start.sh --dev ou ./start-desktop.sh
This commit is contained in:
+295
@@ -0,0 +1,295 @@
|
||||
# 🔐 Solution SSL 100% Locale - Résumé
|
||||
|
||||
## ✅ Problème Résolu
|
||||
|
||||
**Avant** :
|
||||
- ❌ Certificats self-signed bloqués par navigateurs
|
||||
- ❌ Warnings "Connexion non sécurisée"
|
||||
- ❌ WebRTC refuse de fonctionner en HTTPS invalide
|
||||
- ❌ Configuration complexe manuelle
|
||||
|
||||
**Après** :
|
||||
- ✅ Certificats **automatiquement approuvés** par système et navigateurs
|
||||
- ✅ Cadenas vert 🔒 sans warnings
|
||||
- ✅ WebRTC fonctionne parfaitement
|
||||
- ✅ Installation automatique en 2 minutes
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Solution : mkcert
|
||||
|
||||
**mkcert** = générateur de certificats SSL locaux **de confiance**
|
||||
|
||||
### Principe
|
||||
|
||||
1. Installe une **Certificate Authority (CA) locale** sur votre machine
|
||||
2. Génère des certificats signés par cette CA
|
||||
3. Système et navigateurs font **automatiquement confiance** à cette CA
|
||||
4. Résultat : certificats locaux = certificats valides ✅
|
||||
|
||||
### Avantages
|
||||
|
||||
- ✅ **100% local** : pas de cloud, pas de domaine requis
|
||||
- ✅ **Automatique** : script d'installation complet
|
||||
- ✅ **Multi-plateforme** : macOS, Linux, Windows
|
||||
- ✅ **Multi-navigateurs** : Chrome, Safari, Edge, Firefox
|
||||
- ✅ **Valable 10 ans** : pas de renouvellement
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Installation
|
||||
|
||||
### Un Seul Script
|
||||
|
||||
```bash
|
||||
# Depuis la racine du projet
|
||||
./setup-certificates.sh
|
||||
```
|
||||
|
||||
Ce script fait **automatiquement** :
|
||||
|
||||
1. ✅ Installe `mkcert` (via Homebrew sur macOS, apt sur Linux)
|
||||
2. ✅ Installe la CA locale dans le système
|
||||
3. ✅ Détecte votre **IP réseau** (ex: 192.168.1.10)
|
||||
4. ✅ Génère certificats pour :
|
||||
- `localhost`
|
||||
- `127.0.0.1`
|
||||
- Votre IP réseau
|
||||
- `*.local`
|
||||
5. ✅ Configure automatiquement :
|
||||
- `server/.env` (chemins certificats)
|
||||
- `client/.env` (URL HTTPS serveur)
|
||||
- `client/vite.config.js` (HTTPS Vite)
|
||||
- `server/index.js` (déjà compatible)
|
||||
|
||||
**Temps : ~2 minutes**
|
||||
|
||||
---
|
||||
|
||||
## 📁 Fichiers Créés
|
||||
|
||||
```
|
||||
PTT Live/
|
||||
├── certs/ # NOUVEAU
|
||||
│ ├── localhost.pem # Certificat public
|
||||
│ └── localhost-key.pem # Clé privée
|
||||
│
|
||||
├── server/.env # MIS À JOUR
|
||||
│ ENABLE_HTTPS=true
|
||||
│ SSL_CERT=/path/to/localhost.pem
|
||||
│ SSL_KEY=/path/to/localhost-key.pem
|
||||
│ NETWORK_IP=192.168.1.10
|
||||
│
|
||||
└── client/
|
||||
├── .env # CRÉÉ
|
||||
│ VITE_SERVER_URL=https://192.168.1.10:3000
|
||||
│
|
||||
└── vite.config.js # MIS À JOUR
|
||||
server: {
|
||||
https: { key, cert }
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌐 Utilisation
|
||||
|
||||
### Démarrage
|
||||
|
||||
```bash
|
||||
# Mode développement (2 terminaux)
|
||||
./start.sh --dev
|
||||
|
||||
# OU Mode desktop (1 terminal)
|
||||
./start-desktop.sh
|
||||
```
|
||||
|
||||
### URLs d'Accès
|
||||
|
||||
**Depuis l'ordinateur serveur** :
|
||||
```
|
||||
https://localhost:3000 (serveur)
|
||||
https://localhost:5173 (client dev)
|
||||
```
|
||||
|
||||
**Depuis smartphone (même WiFi)** :
|
||||
```
|
||||
https://192.168.1.10:3000 (serveur)
|
||||
https://192.168.1.10:5173 (client dev)
|
||||
|
||||
OU scanner le QR Code affiché au démarrage
|
||||
```
|
||||
|
||||
### Première Connexion Smartphone
|
||||
|
||||
1. Scanner QR Code
|
||||
2. Le navigateur ouvre l'URL HTTPS
|
||||
3. **Accepter le certificat** (une seule fois)
|
||||
- iOS : "Continuer" → "Visiter ce site web"
|
||||
- Android : "Avancé" → "Continuer"
|
||||
4. La PWA se charge normalement
|
||||
5. Installer sur écran d'accueil
|
||||
|
||||
**Pourquoi accepter manuellement ?**
|
||||
La CA locale est installée sur le **serveur**, pas sur chaque smartphone.
|
||||
C'est normal et **sécurisé** sur réseau local privé.
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Code Modifié
|
||||
|
||||
### server/index.js
|
||||
|
||||
```javascript
|
||||
// Avant (chemins hardcodés)
|
||||
const httpsOptions = {
|
||||
key: readFileSync(join(certPath, 'localhost+3-key.pem')),
|
||||
cert: readFileSync(join(certPath, 'localhost+3.pem'))
|
||||
};
|
||||
|
||||
// Après (depuis .env avec fallback)
|
||||
const certPath = process.env.SSL_CERT || join(__dirname, '..', 'certs', 'localhost.pem');
|
||||
const keyPath = process.env.SSL_KEY || join(__dirname, '..', 'certs', 'localhost-key.pem');
|
||||
|
||||
if (!existsSync(certPath) || !existsSync(keyPath)) {
|
||||
log('error', '❌ Certificats SSL introuvables');
|
||||
log('info', '💡 Exécutez : ./setup-certificates.sh');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const httpsOptions = {
|
||||
key: readFileSync(keyPath),
|
||||
cert: readFileSync(certPath)
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Avantages vs Autres Solutions
|
||||
|
||||
| Solution | Local | Auto-approuvé | Setup | Renouvellement |
|
||||
|----------|-------|---------------|-------|----------------|
|
||||
| **mkcert** | ✅ | ✅ | 2 min | 10 ans |
|
||||
| Self-signed manuel | ✅ | ❌ | 30 min | Annuel |
|
||||
| Let's Encrypt | ❌ | ✅ | 1h+ | 90 jours |
|
||||
| Certificat commercial | ❌ | ✅ | Payant | Annuel |
|
||||
|
||||
**Verdict** : mkcert = solution idéale pour développement et déploiement local
|
||||
|
||||
---
|
||||
|
||||
## 📱 Mobile : Pourquoi Accepter Manuellement ?
|
||||
|
||||
### Explication Technique
|
||||
|
||||
1. **CA locale installée sur serveur** :
|
||||
- Système macOS/Linux fait confiance à la CA
|
||||
- Navigateurs desktop (Chrome/Safari/Firefox) font confiance
|
||||
|
||||
2. **Smartphones non configurés** :
|
||||
- La CA locale n'est pas sur iOS/Android
|
||||
- Les mobiles ne connaissent pas cette CA
|
||||
- Normal et **sécurisé** sur réseau privé
|
||||
|
||||
### Options
|
||||
|
||||
**A) Accepter manuellement (recommandé)**
|
||||
- 2 clics par appareil
|
||||
- Une seule fois
|
||||
- Simple et rapide
|
||||
|
||||
**B) Installer CA sur chaque mobile (optionnel)**
|
||||
- iOS : Réglages → VPN → Profils
|
||||
- Android : Sécurité → Certificats
|
||||
- Plus complexe, pas nécessaire
|
||||
|
||||
💡 **Recommandation** : Option A, largement suffisant
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Dépannage
|
||||
|
||||
### Serveur refuse de démarrer
|
||||
|
||||
**Erreur** : "Certificats SSL introuvables"
|
||||
|
||||
**Solution** :
|
||||
```bash
|
||||
# Vérifier
|
||||
ls certs/
|
||||
|
||||
# Régénérer
|
||||
./setup-certificates.sh
|
||||
```
|
||||
|
||||
### Warning SSL sur Desktop
|
||||
|
||||
**Problème** : Cadenas rouge sur Chrome
|
||||
|
||||
**Solution** :
|
||||
```bash
|
||||
# Réinstaller CA
|
||||
mkcert -install
|
||||
|
||||
# Redémarrer navigateur
|
||||
```
|
||||
|
||||
### Firefox : Certificat non approuvé
|
||||
|
||||
**Problème** : Firefox affiche warning (Chrome OK)
|
||||
|
||||
**Solution** :
|
||||
```bash
|
||||
# Installer NSS
|
||||
brew install nss # macOS
|
||||
sudo apt install libnss3-tools # Linux
|
||||
|
||||
# Réinstaller CA
|
||||
mkcert -install
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Pourquoi Cette Solution ?
|
||||
|
||||
### Contraintes du Projet
|
||||
|
||||
1. ✅ **100% local** : pas de dépendance cloud/internet
|
||||
2. ✅ **Pas de domaine** : fonctionne sur IP locale
|
||||
3. ✅ **HTTPS requis** : WebRTC + Service Workers
|
||||
4. ✅ **Multi-devices** : desktop + smartphones
|
||||
5. ✅ **Événementiel** : WiFi privé, changement IP fréquent
|
||||
|
||||
### mkcert Répond à Tout
|
||||
|
||||
- Local ✅
|
||||
- Pas de domaine ✅
|
||||
- HTTPS valide ✅
|
||||
- Multi-devices (avec acceptation manuelle) ✅
|
||||
- Re-génération rapide si IP change ✅
|
||||
|
||||
---
|
||||
|
||||
## 📚 Documentation
|
||||
|
||||
- **[SSL-SETUP.md](SSL-SETUP.md)** : Guide complet détaillé
|
||||
- **[setup-certificates.sh](setup-certificates.sh)** : Script d'installation
|
||||
- **[README.md](README.md)** : Mis à jour avec étape certificats
|
||||
|
||||
---
|
||||
|
||||
## 🏆 Résultat
|
||||
|
||||
**HTTPS 100% local fonctionnel** :
|
||||
- ✅ Certificats approuvés automatiquement
|
||||
- ✅ Cadenas vert sur desktop
|
||||
- ✅ WebRTC fonctionne
|
||||
- ✅ PWA installable
|
||||
- ✅ Pas de cloud, pas de domaine
|
||||
- ✅ Installation en 2 minutes
|
||||
|
||||
**Production ready** pour déploiement événementiel WiFi local ! 🎉
|
||||
|
||||
---
|
||||
|
||||
**Commande magique** : `./setup-certificates.sh`
|
||||
Reference in New Issue
Block a user