mkcert SSL local sur Mac : certificat HTTPS

Vous développez une PWA et les Service Workers refusent de s'activer ? Votre application utilise la Geolocation API et elle ne fonctionne qu'en production ? Le coupable : l'absence de HTTPS en local. Ce guide vous montre comment résoudre ça définitivement avec mkcert.

Comment configurer le HTTPS local sur Mac avec mkcert

Pour configurer un certificat SSL local sur Mac, installez mkcert, faites confiance à son autorité de certification locale, puis générez un certificat pour vos domaines :

1. Installez mkcert avec Homebrew : brew install mkcert. 2. Lancez mkcert -install une fois pour faire confiance à la CA locale. 3. Générez les certificats pour localhost, 127.0.0.1, ::1 et vos domaines .test. 4. Pointez votre serveur de dev vers les fichiers .pem générés. 5. Redémarrez le navigateur s'il affiche encore un avertissement de certificat.

brew install mkcert
mkcert -install
mkcert -cert-file certs/local-cert.pem -key-file certs/local-key.pem localhost 127.0.0.1 ::1 monprojet.test "*.monprojet.test"

Pourquoi HTTPS en local ?

APIs qui requièrent HTTPS

De nombreuses APIs web modernes ne fonctionnent qu'en contexte sécurisé (HTTPS) :

• Service Workers : Requis pour les PWA
• Geolocation API : Position GPS
• Clipboard API : Copier/coller
• WebRTC : Vidéo/audio
• Web Bluetooth : Appareils Bluetooth
• Notifications Push : Push API

Autres avantages

• Parité dev/prod : Même comportement partout
• Cookies sécurisés : Test des attributs Secure et SameSite
• HTTP/2 : Requiert HTTPS
• Crédibilité : Pas d'avertissement navigateur

Installation de mkcert

Qu'est-ce que mkcert ?

mkcert est un outil créé par Filippo Valsorda qui : 1. Crée une autorité de certification (CA) locale 2. Installe cette CA dans votre système et navigateurs 3. Génère des certificats signés par cette CA

Résultat : vos certificats locaux sont reconnus comme valides.

Installation sur Mac

# Avec Homebrew
brew install mkcert

# Installer les certificats racine
mkcert -install

Vous verrez un message demandant votre mot de passe pour installer la CA dans le trousseau système.

Vérifier l'installation

mkcert -CAROOT

Affiche le dossier contenant votre CA locale.

Créer des certificats

Pour localhost

mkcert localhost 127.0.0.1 ::1

Crée deux fichiers :

• localhost+2.pem : Le certificat
• localhost+2-key.pem : La clé privée

Pour un domaine personnalisé

mkcert monprojet.test

Avec wildcard (sous-domaines)

mkcert monprojet.test "*.monprojet.test"

Permet d'utiliser api.monprojet.test, admin.monprojet.test, etc.

Certificat tout-en-un

mkcert localhost 127.0.0.1 ::1 monprojet.test "*.monprojet.test"

Configurer votre serveur

Node.js / Express

const https = require('https');
const fs = require('fs');
const express = require('express');

const app = express();

const options = {
    key: fs.readFileSync('./localhost+2-key.pem'),
    cert: fs.readFileSync('./localhost+2.pem')
};

https.createServer(options, app).listen(3000, () => {
    console.log('HTTPS server running on https://localhost:3000');
});

Vite

// vite.config.js
import { defineConfig } from 'vite';
import fs from 'fs';

export default defineConfig({
    server: {
        https: {
            key: fs.readFileSync('./localhost+2-key.pem'),
            cert: fs.readFileSync('./localhost+2.pem')
        }
    }
});

Next.js

// next.config.js avec serveur custom
const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const httpsOptions = {
    key: fs.readFileSync('./localhost+2-key.pem'),
    cert: fs.readFileSync('./localhost+2.pem')
};

app.prepare().then(() => {
    createServer(httpsOptions, (req, res) => {
        const parsedUrl = parse(req.url, true);
        handle(req, res, parsedUrl);
    }).listen(3000);
});

Webpack Dev Server

// webpack.config.js
const fs = require('fs');

module.exports = {
    devServer: {
        https: {
            key: fs.readFileSync('./localhost+2-key.pem'),
            cert: fs.readFileSync('./localhost+2.pem')
        }
    }
};

Utiliser avec des domaines personnalisés

Configurer le fichier hosts

Pour utiliser monprojet.test au lieu de localhost :

# /etc/hosts
127.0.0.1    monprojet.test
127.0.0.1    api.monprojet.test

Créer le certificat correspondant

mkcert monprojet.test "*.monprojet.test"

Configurer le serveur

Utilisez les nouveaux fichiers générés dans votre configuration serveur.

Cas d'usage avancés

Laravel Valet

Valet intègre mkcert nativement :

valet secure monprojet

C'est tout ! Valet génère et configure automatiquement les certificats.

Docker

# docker-compose.yml
services:
  web:
    volumes:
      - ./certs:/etc/nginx/certs:ro
    environment:
      - VIRTUAL_HOST=monprojet.test
      - CERT_NAME=monprojet.test

MAMP Pro

1. Préférences > Hosts 2. Sélectionnez votre host 3. SSL > Activer 4. Importez vos certificats mkcert

Dépannage

"NET::ERR_CERT_AUTHORITY_INVALID"

La CA n'est pas installée dans le navigateur.

mkcert -install

Puis redémarrez votre navigateur.

Chrome ignore toujours le certificat

Chrome peut nécessiter un redémarrage complet :

# Mac
killall "Google Chrome"
open -a "Google Chrome"

Firefox ne reconnaît pas la CA

Firefox utilise son propre magasin de certificats. Installez-la manuellement : 1. Préférences > Vie privée et sécurité > Certificats 2. Voir les certificats > Autorités > Importer 3. Sélectionnez rootCA.pem depuis mkcert -CAROOT

Bonnes pratiques

Organisation des certificats

~/certs/
├── localhost/
│   ├── localhost+2.pem
│   └── localhost+2-key.pem
├── monprojet.test/
│   ├── monprojet.test+1.pem
│   └── monprojet.test+1-key.pem
└── README.md

Ne jamais committer les clés

# .gitignore
*.pem
certs/

Script de setup projet

#!/bin/bash
# setup-certs.sh
mkdir -p certs
cd certs
mkcert localhost 127.0.0.1 ::1 monprojet.test "*.monprojet.test"
echo "Certificats créés dans ./certs/"

Dépannage rapide

Chrome affiche NET::ERR_CERT_AUTHORITY_INVALID

Relancez :

mkcert -install
killall "Google Chrome"
open -a "Google Chrome"

Si l'erreur persiste, vérifiez que le certificat couvre exactement le domaine ouvert dans la barre d'adresse.

Le certificat ne couvre pas le sous-domaine

Générez un wildcard :

mkcert monprojet.test "*.monprojet.test"

Le serveur utilise l'ancien certificat

Arrêtez le serveur, supprimez les anciens fichiers du projet, régénérez dans certs/, puis mettez à jour la configuration.

Le domaine pointe vers le mauvais serveur

Vérifiez hosts et DNS :

dscacheutil -q host -a name monprojet.test
sudo dscacheutil -flushcache && sudo killall -HUP mDNSResponder

Pour le guide complet de l'erreur, lisez corriger mkcert NET::ERR_CERT_AUTHORITY_INVALID.

Alternatives à mkcert

Certificats auto-signés (déconseillé)

Fonctionnent mais génèrent des avertissements navigateur constants.

Tunnels (ngrok, localtunnel)

Exposent votre localhost sur Internet avec HTTPS. Utile pour tests mobiles ou webhooks.

Caddy

Serveur web avec HTTPS automatique, même en local.

Conclusion

HTTPS en local n'est plus optionnel en 2026. Avec mkcert, l'installation prend 2 minutes et vous évite des heures de frustration avec les APIs modernes. Combinez-le avec des domaines .test gérés via Locahl pour un environnement de développement professionnel.