Récemment, j’ai publié un article Mettre en place du CI/CD avec GitHub Actions et Netlify. Suite à cela et lors de mon dernier projet, j’avais besoin de protéger par mot de passe les sites en développement et en staging. Netlify a déjà des solutions pour le contrôle d’accès comme OAuth ou la restriction par mot de passe ou JWT, ou même via le fichier _headers avec une authentification basique (“Basic authentication”). Mais ce que je voulais, c’était protéger par mot de passe mes sites au début avec un accès unique puis ajouter d’autres accès au besoin et peut être uniquement pour certaines routes, toutes gérées via des actions GitHub et déployées pour chaque site.

access control netlify

La protection par mot de passe n’est disponible qu’avec les offres payantes de Netlify

La protection sélective avec une authentification basique répondait très bien à mes besoins. Le seul problème est qu’au début je devais pousser le fichier _headers sur GitHub avec des identifiants, ce qui ne me paraissait pas la meilleure des choses à faire même si repo était en privé. J’ai donc pensé qu’il serait préférable d’utiliser les variables d’environnement GitHub dans le fichier _headers. L’idée est de pousser ce fichier sans aucune information d’identification mais simplement une chaîne de caractères qui sera remplacée. Dans la même optique une autre solution aurait été de créer ce même fichier avec le contenu qu’il faut, directement via un script.

Comment faire ?

1- On pousse le fichier _headers sur GitHub contenant Basic-Auth suivi d’une chaîne de caractères qui sera ensuite remplacée.

/*
    Basic-Auth: SITE_ACCESS_USER:SITE_ACCESS_PASSWORD
    X-Frame-Options: DENY
    X-XSS-Protection: 1; mode=block
    Referrer-Policy: no-referrer
    X-Content-Type-Options: nosniff

Ce qui nous intéressera, c’est Basic-Auth: SITE_ACCESS_USER:SITE_ACCESS_PASSWORD. On peut également remarquer qu’avec /* nous protégerons toutes les routes de notre site. Nous pourrions également le définir uniquement pour certaines routes, avec un accès que pour certains utilisateurs et c’est l’avantage de cette solution.

2- Dans Github secrets, on ajoute SITE_ACCESS_USER et SITE_ACCESS_PASSWORD

github secrets

3- Dans le workflow, on ajoute une step d’accès à Netlify dans laquelle nous devons récupérer les variables SITE_ACCESS_USER et SITE_ACCESS_PASSWORD depuis GitHub secrets. Ensuite, nous essayons de trouver la chaîne de caractères correspondant à SITE_ACCESS_USER:SITE_ACCESS_PASSWORD et on le remplace par nos informations d’identification avec la commande sed

- name: Setup Netlify access
  env:
    SITE_ACCESS_USER: ${{ secrets.SITE_ACCESS_USER }}
    SITE_ACCESS_PASSWORD: ${{ secrets.SITE_ACCESS_PASSWORD }}
  shell: bash
  run: sed -i.bak "s/SITE_ACCESS_USER:SITE_ACCESS_PASSWORD/$SITE_ACCESS_USER:$SITE_ACCESS_PASSWORD/g" $(pwd)/public/_headers && rm $(pwd)/public/_headers.bak

Voilà 🎉

Le code complet du workflow est disponible sur https://gist.github.com/itsabdessalam/ee5dfe83d832bf5015b096016cc923f4

Aperçu des logs de déploiement

github actions logs

Test

password protect live

Liens utiles

Avant de partir…
Merci pour votre lecture ! 😊