Comment héberger de manière sécurisée du contenu statique ?

Introduction

Je pars en voyage, tout est prêt : valises bouclées, papiers rangés, téléphone chargé. Mais une question me titille : que se passe-t-il si je perds mon téléphone ou que l'on me vole mes affaires ? Comment accéder à mes e-mails, mon compte Dropbox, mes codes de récupération pour les services protégés par une double authentification ?

Cette problématique, bien que rarement urgente, mérite d’être anticipée. Car si vos mots de passe suffisaient autrefois, la double authentification rend cette dépendance plus complexe. Alors, comment protéger efficacement ces informations sensibles tout en s'assurant qu'elles restent accessibles en cas de coup dur ?

Voyons ensemble comment créer une solution élégante et sécurisée pour répondre à ce besoin.

Une solution simple

Une première réponse pourrait consister à partager certains codes de récupération avec une personne de confiance. C'est simple, mais cela pose des défis :

• Multiplicité des codes : si vous avez de nombreux comptes, cette solution devient difficile à gérer ;
• Fiabilité en cas d’urgence : dans une situation stressante, il peut être compliqué de se souvenir à qui vous avez confié un code. De plus, les différences de fuseaux horaires peuvent rendre la communication difficile.

Une solution plus avancée

Une alternative serait de déployer une page HTML contenant tous vos codes de récupération. Vous pourriez l’héberger sur une plateforme gratuite comme GitHub Pages, Netlify ou Cloudflare. Mais cela soulève une question essentielle : comment sécuriser efficacement cette page ?

Chiffrer le contenu

La première idée est de chiffrer le contenu de la page HTML de manière symétrique (avec un mot de passe). Une fois stocké, le contenu serait accessible uniquement après avoir saisi le mot de passe.

C’est exactement ce que permet staticrypt. Cet outil en ligne de commande chiffre vos fichiers statiques en utilisant l’algorithme AES-256 via WebCrypto.

Le résultat est une page HTML qui :

• demande un mot de passe via un formulaire ;
• déchiffre le contenu directement dans le navigateur grâce à JavaScript.

Simple et robuste !

Héberger le contenu

Pour l’hébergement, GitHub Pages ou Netlify sont des choix évidents. Ces plateformes sont simples à utiliser et gratuites. Mais même si l’AES-256 est fiable, je reste inquiet à l’idée de stocker publiquement mes codes de récupération, même chiffrés. Est-ce que AES-256 sera toujours résistant aux attaques post-quantique ?

Pourquoi ? Parce qu’une faille découverte dans le futur pourrait compromettre la sécurité de ces données sensibles. Il faut donc ajouter une couche de protection supplémentaire : une authentification HTTP en amont de la page HTML chiffrée.

Sur GitHub Pages, cette fonctionnalité n’est pas disponible (surtout sur le plan gratuit). Heureusement, Cloudflare Workers offre une solution parfaite.

Cloudflare permet de déployer du code JavaScript à travers son CDN, ce qui rend facile l’ajout d’une authentification avant même de servir la page HTML. Ce code JavaScript n'est pas exécuté dans le navigateur, mais sur les serveurs de Cloudflare. Pour gagner du temps, je me suis inspiré de cet article de blog, qui détaille parfaitement le processus.

Automatisation avec Castor

Pour assembler ces briques, j’ai utilisé l’outil Castor :

1. Task castor build : génère les fichiers nécessaires grâce à Twig, ce qui facilite la gestion du HTML. Voici un extrait de la tâche castor :

   $recoveryCodes = $twig->render('recovery-codes.html.twig', [
       'recovery_codes' => yaml_parse(file_get_contents($recoveryCodesFilename)),
   ]);
   
   file_put_contents(__DIR__.'/var/tmp/recovery-codes.html', $recoveryCodes);
   
   run(
       command: [
           __DIR__.'/node_modules/.bin/staticrypt',
           '--template', __DIR__.'/var/tmp/staticrypt.html',
           '--template-title', 'Recovery codes',
           '--config', 'false', // No need to store the salt, remember me is disabled
           '--remember', 'false', // Since data are sensitive, we don't want to remember the password
           ...(variable('defaultPassword') ? ['--short'] : []),
           '-d', 'dist/public',
           __DIR__.'/var/tmp/recovery-codes.html',
       ],
       context: context()
           ->withEnvironment([
               'STATICRYPT_PASSWORD' => variable('PASSWORD'),
           ])
   );
   

2. Task castor deploy : déploie automatiquement le tout sur Cloudflare grâce à wrangler. Il vous faudra un compte au préalable et configurer deux variables d’environnement, ensuite castor s’occupe de tout.

En quelques commandes, tout est prêt !