- HTTPS Angular avec Let's Encrypt et Certbot

Pourquoi HTTPS est obligatoire pour Angular

HTTPS n'est plus une option en 2026, c'est un prerequis. Les navigateurs modernes affichent un avertissement explicite sur tout site servi en HTTP, plusieurs APIs (geolocalisation, service workers, notifications) sont desactivees hors HTTPS, et Google declasse fermement les sites non chiffres dans son index.

Pour une application Angular, la situation est encore plus stricte : sans HTTPS, vous ne pouvez pas activer le service worker (donc pas de PWA), ni utiliser des APIs comme `crypto.subtle`, ni faire fonctionner correctement OAuth/OpenID via les redirections. La quasi-totalite des SDK tiers (Stripe, Firebase, Auth0) refusent simplement de fonctionner en HTTP en production.

Bonne nouvelle : depuis Let's Encrypt, le certificat SSL coute zero euro et se renouvelle tout seul. La duree d'installation est de 5 minutes une fois Nginx pret, et le tout est officiellement supporte par tous les navigateurs depuis 2016. Cet article montre la sequence exacte qui marche en 2026 sur Ubuntu et Debian.

Prerequis : DNS et acces serveur

Avant de generer un certificat, deux conditions doivent etre reunies. Premiere condition : le domaine doit pointer correctement sur l'IP du serveur. Verifiez avec `dig` ou `host` :

# Verifier l'IP retournee par le DNS
dig +short votre-domaine.com
# 178.128.70.206 (votre IP serveur)

# Verifier que le serveur repond bien sur cette IP
curl -I http://votre-domaine.com

Si le DNS n'est pas a jour, attendez sa propagation (souvent 5 a 30 minutes apres modification chez le registrar). Tenter de generer un certificat avant que le DNS soit propage echouera systematiquement.

Deuxieme condition : Nginx doit deja servir le domaine en HTTP. Certbot a besoin d'ecrire un fichier temporaire dans `/.well-known/acme-challenge/` que Let's Encrypt verifie. Si Nginx n'est pas configure pour ce domaine, le challenge ACME echoue.

# Configuration Nginx HTTP minimale (avant HTTPS)
# /etc/nginx/sites-available/angular-app
server {
    listen 80;
    server_name votre-domaine.com www.votre-domaine.com;

    root /home/angularapp/mon-app/dist/mon-app/browser;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Activez et rechargez :

sudo ln -s /etc/nginx/sites-available/angular-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

# Verification
curl -I http://votre-domaine.com

Installer Certbot sur Linux

Certbot est disponible via plusieurs canaux. La methode officielle recommandee en 2026 utilise snap, qui garantit une version a jour automatiquement (les versions du depot Ubuntu sont souvent en retard).

# Installation snap (si pas deja present)
sudo apt update
sudo apt install -y snapd
sudo snap install core
sudo snap refresh core

# Installation Certbot
sudo snap install --classic certbot

# Lien symbolique pour la commande
sudo ln -sf /snap/bin/certbot /usr/bin/certbot

# Verification
certbot --version

Si vous preferez le paquet apt classique (acceptable sur des serveurs internes), la commande est :

# Methode apt (versions plus anciennes)
sudo apt install -y certbot python3-certbot-nginx

Le plugin `python3-certbot-nginx` permet a Certbot de modifier automatiquement la configuration Nginx pour ajouter le SSL. C'est l'option la plus rapide pour debuter.

Generer le certificat Let's Encrypt

La commande qui fait tout en une etape :

# Generation + configuration Nginx automatique
sudo certbot --nginx -d votre-domaine.com -d www.votre-domaine.com

# Output attendu
# - Demande votre email (pour les alertes d'expiration)
# - Demande l'acceptation des CGU
# - Demande si vous souhaitez recevoir des actus EFF (non par defaut)
# - Test du challenge HTTP-01
# - Edition automatique de la conf Nginx
# - Reload de Nginx
# - Confirmation : Successfully received certificate

Apres execution, Certbot a fait trois choses : telecharge les fichiers de certificat dans `/etc/letsencrypt/live/votre-domaine.com/`, modifie le virtual host Nginx pour ecouter en HTTPS, et ajoute une redirection HTTP → HTTPS automatique.

# Verification des fichiers
sudo ls -la /etc/letsencrypt/live/votre-domaine.com/
# cert.pem  chain.pem  fullchain.pem  privkey.pem  README

# Verification de la nouvelle config Nginx
sudo cat /etc/nginx/sites-available/angular-app

Si Certbot a bien fait son travail, votre fichier Nginx contient maintenant :

server {
    listen 443 ssl http2;
    server_name votre-domaine.com www.votre-domaine.com;

    ssl_certificate /etc/letsencrypt/live/votre-domaine.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/votre-domaine.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # ... votre configuration originale
}

# Redirection HTTP -> HTTPS
server {
    listen 80;
    server_name votre-domaine.com www.votre-domaine.com;
    return 301 https://$host$request_uri;
}

Testez immediatement : `https://votre-domaine.com` doit afficher le cadenas vert. Le mode `--nginx` est tres fiable, mais si vous preferez un controle manuel, utilisez `--certonly` qui ne touche pas a votre configuration.

Configurer le renouvellement automatique

Les certificats Let's Encrypt durent 90 jours. Certbot installe automatiquement un timer systemd qui tente le renouvellement deux fois par jour, mais ne renouvelle reellement qu'a 30 jours de l'expiration.

# Verification du timer systemd
sudo systemctl list-timers certbot.timer

# Test du renouvellement (sans modifier les certificats)
sudo certbot renew --dry-run

Si le `--dry-run` reussit, vous etes tranquille pour les annees a venir. Pour etre prevenu en cas d'echec, ajoutez un hook qui relance Nginx et envoie un mail :

# /etc/letsencrypt/renewal-hooks/deploy/reload-nginx.sh
#!/usr/bin/env bash
set -euo pipefail
systemctl reload nginx
echo "$(date) - Certificat renouvele avec succes" >> /var/log/certbot-renewal.log

# Rendre executable
sudo chmod +x /etc/letsencrypt/renewal-hooks/deploy/reload-nginx.sh

Pour aller plus loin, ajoutez une alerte mail via une commande `mail` ou un webhook Slack :

# /etc/letsencrypt/renewal-hooks/deploy/notify-slack.sh
#!/usr/bin/env bash
WEBHOOK_URL="https://hooks.slack.com/services/XXX/YYY/ZZZ"
curl -X POST -H 'Content-type: application/json' \
  --data "{\"text\":\":lock: Certificat SSL renouvele sur $(hostname)\"}" \
  "$WEBHOOK_URL"

Ajouter les headers de securite Angular

Avoir un certificat valide est necessaire mais pas suffisant. Les headers HTTP de securite verrouillent la facon dont les navigateurs traitent votre site. Pour une SPA Angular, voici la configuration minimale a ajouter dans le bloc `server` HTTPS :

# /etc/nginx/snippets/security-headers.conf

# Forcer HTTPS pendant 1 an (HSTS)
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

# Bloquer le clickjacking
add_header X-Frame-Options "DENY" always;

# Empecher le sniffing du content-type
add_header X-Content-Type-Options "nosniff" always;

# Limiter les informations envoyees aux sites externes
add_header Referrer-Policy "strict-origin-when-cross-origin" always;

# Desactiver des APIs sensibles par defaut
add_header Permissions-Policy "geolocation=(), microphone=(), camera=()" always;

Incluez ce snippet dans le virtual host HTTPS :

server {
    listen 443 ssl http2;
    server_name votre-domaine.com;

    # ... certificats SSL

    include /etc/nginx/snippets/security-headers.conf;

    # ... reste de la configuration
}

Apres `sudo systemctl reload nginx`, validez les headers via curl :

curl -I https://votre-domaine.com/

# HTTP/2 200
# strict-transport-security: max-age=31536000; includeSubDomains; preload
# x-frame-options: DENY
# x-content-type-options: nosniff
# referrer-policy: strict-origin-when-cross-origin

Pour une evaluation externe complete, le service securityheaders.com note votre site sur ces criteres avec un grade de A+ a F.

Construire une CSP adaptee a Angular

Le header `Content-Security-Policy` (CSP) est le plus puissant... et le plus delicat a configurer pour une app Angular. Angular injecte des styles inline a l'execution (CDK Overlay, animations) et certaines bibliotheques tierces utilisent `eval` ou des images externes. Une CSP trop stricte casse l'application.

Pour une SPA Angular standard sans tracking externe, voici une base qui marche en production :

# CSP de base pour Angular
add_header Content-Security-Policy "
    default-src 'self';
    script-src 'self';
    style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com;
    font-src 'self' https://fonts.gstatic.com;
    img-src 'self' data: https:;
    connect-src 'self' https://api.votre-domaine.com;
    frame-ancestors 'none';
    base-uri 'self';
    form-action 'self';
" always;

Quelques notes importantes sur cette configuration :

• `'unsafe-inline'` dans `style-src` : obligatoire pour Angular CDK et Material. Pas evitable sans gros refactor.
• `script-src 'self'` : n'autorisez JAMAIS `'unsafe-inline'` ni `'unsafe-eval'` sur les scripts. Si une lib le demande, changez de lib.
• `connect-src` : liste vos APIs. Sans ca, les appels HTTP echouent silencieusement.
• `img-src 'self' data:` : autorise les data URIs souvent utilises pour les SVG inline.

Pour debugger une CSP, demarrez en mode `Report-Only` qui n'applique pas les regles mais remonte les violations dans la console DevTools :

# Mode test (n'applique rien, signale uniquement)
add_header Content-Security-Policy-Report-Only "..." always;

Tester le certificat et la configuration

Plusieurs outils permettent de valider rapidement votre setup HTTPS. Le plus connu reste SSL Labs (Qualys), qui teste les chiffrements, la chaine de certificats, le HSTS et donne un grade global.

# Test rapide via curl
curl -I https://votre-domaine.com

# Affichage du certificat
echo | openssl s_client -servername votre-domaine.com -connect votre-domaine.com:443 2>/dev/null | openssl x509 -noout -dates -subject -issuer

Le test SSL Labs complet est accessible sur `https://www.ssllabs.com/ssltest/analyze.html?d=votre-domaine.com`. Pour un site standard, viser un grade A est realiste. A+ demande HSTS preload.

Pour valider la chaine cote ligne de commande :

# Verification complete
openssl s_client -servername votre-domaine.com -connect votre-domaine.com:443 -showcerts

# Date d'expiration
openssl x509 -in /etc/letsencrypt/live/votre-domaine.com/cert.pem -noout -dates

Cote application Angular, ouvrez les DevTools (F12) > onglet Security : Chrome doit afficher "Connection is secure" avec le detail de la chaine de certificats.