Déployer une application Jamstack Vue.js sur Netlify avec les mises à jour de sécurité automatiques de Snyk

Envie de découvrir les concepts de sécurité front-end tout en apprenant à déployer un site statique sur Netlify ? Prêt à apprendre à détecter et corriger automatiquement les dépendances JavaScript vulnérables ?

C’est parti.

Dans cet article, nous allons utiliser les éléments suivants :

• Netlify : une plateforme qui vous permet de créer et de déployer instantanément vos sites sur un réseau mondial.

• Snyk.io : une plateforme de sécurité pensée pour les développeurs, qui protège les bibliothèques open source, les conteneurs et les applications cloud natives.

• Vue.js : un framework JavaScript évolutif.

• Vuetify : un framework de composants d’interface utilisateur Material Design pour les applications Vue.js.

L’interaction est un excellent moyen de découvrir de nouveaux concepts. Et quoi de mieux qu’une partie de Bingo pour apprendre quelques notions de sécurité front-end ?

Alors voilà : nous allons déployer un jeu de Bingo sur la sécurité front-end. Comment gagner ? Les règles sont simples : cochez toutes les cases correspondant aux pratiques que vous appliquez dans votre équipe ou vos projets open source. Vous les avez toutes cochées ? Vous avez gagné !

Voici une capture d’écran du Bingo sur la sécurité front-end en action.

Déployer sur Netlify

Pour héberger le site statique, nous allons le déployer sur Netlify, l’un des outils privilégiés et optimisés pour l’hébergement de sites Jamstack.

Avec Netlify, vous pouvez déployer un site de deux façons :

1. Connecter le dépôt d’un projet depuis l’interface Netlify. Cette méthode est pratique si vous souhaitez adopter un modèle de déploiement continu : Netlify reste synchronisé avec vos avancées dans le contrôle de version et déploie le site à chaque modification. Dans ce cas, la configuration Netlify exécute l’outil de build de votre choix pour créer le site statique, puis Netlify le déploie.

2. Utiliser la CLI Netlify pour déployer le site directement depuis votre CLI. C’est une méthode simple et très accessible pour débuter, car vous pouvez lancer rapidement un déploiement depuis l’espace de travail d’un projet sur votre machine de développement.

Nous allons utiliser la première option et déployer le jeu Bingo sur la sécurité front-end directement depuis un dépôt.

Pour commencer, connectez-vous à Netlify ou créez un compte :

Importez ensuite le dépôt de votre projet de site depuis GitHub, GitLab ou Bitbucket.

Dans mon cas, le dépôt est sur GitHub. Voici donc les étapes :

1. Cliquez sur GitHub

2. Autorisez l’application Netlify à accéder à votre compte GitHub

3. Sélectionnez le dépôt du site dans la liste

Si le message No repositories found s’affiche, cliquez sur Configure Netlify on GitHub et installez l’application Netlify pour le profil de compte GitHub concerné. Vous pourrez ensuite l’installer sur tous les dépôts ou sélectionner spécifiquement celui du site.

Une fois cette étape terminée, l’écran devrait ressembler à ceci. Nous sommes prêts à commencer les déploiements et à connecter des extensions de build :

Cliquez sur l’entrée du site appelée frontend-security-bingo pour terminer la configuration, puis cliquez sur le bouton Deploy :

Netlify commence par cloner le dépôt, installer les dépendances et créer le site. Une fois cette étape terminée, une URL temporaire vous est fournie. Vous pouvez la personnaliser.

En quelques secondes, notre jeu Bingo sur la sécurité front-end est disponible à l’adresse https://frontend-security-bingo.netlify.app.

On dirait que c’est terminé, non ?

Pas tout à fait. C’est plus complexe que cela.

Une vulnérabilité de sécurité JavaScript sur mon site

C’est un petit site statique. Comment ça, il pourrait contenir des vulnérabilités de sécurité JavaScript ?

Je n’utilise même pas beaucoup de dépendances. Mon projet n’en compte littéralement que deux en production. Voici le fichier package.json du site : il montre le squelette généré par défaut avec la CLI Vue.js lors de l’initialisation du projet :

On dirait que Vuln Cost (une extension VS Code que j’utilise) m’indique qu’à la ligne 12, une dépendance de mon projet présente une vulnérabilité de sécurité.

Vous arrive-t-il d’ignorer ces alertes ? Je sais que le triage des vulnérabilités peut sembler intimidant, mais en adoptant des outils et des workflows mieux adaptés à votre développement, cela devient plus facile. Voici quelques avantages de Snyk :

• Base de données des vulnérabilités : tous les utilisateurs de Snyk, qu’ils utilisent l’offre freemium ou une offre payante, ont accès à la base de données de renseignement sur les vulnérabilités de Snyk. Elle est organisée par une équipe expérimentée de chercheurs en sécurité de Snyk, qui veille à assurer une couverture étendue des vulnérabilités et à limiter les faux positifs. Elle comprend 370 % de vulnérabilités de plus que les jeux de données CVE.

• Surveillance : les analyses ponctuelles sont un excellent moyen de se lancer dans la sécurité open source, mais pour les applications en conditions réelles, vous devez surveiller vos projets en continu. Vous serez ainsi alerté en cas de nouvelle vulnérabilité de sécurité et, mieux encore, des correctifs de sécurité pourront être automatiquement créés sous forme de pull requests. Vous pourrez alors corriger vos vulnérabilités en fusionnant les modifications.

En développant l’erreur du linter en ligne de Vuln Cost, on constate qu’il s’agit d’une vulnérabilité de gravité moyenne qui affecte le framework d’interface utilisateur Vuetify pour Vue.js. Il ne vaut mieux pas l’ignorer.

Vous êtes prêt à relever un petit défi ?

Le site en ligne https://frontend-security-bingo.netlify.app/ contient cette vulnérabilité JavaScript non corrigée de Vuetify. Saurez-vous la trouver ?

Indice : il s’agit d’une vulnérabilité JavaScript de type Cross-Site Scripting (XSS), qui affecte les versions de Vuetify antérieures à la version 2.1.9. Vous trouverez plus d’informations dans la Snyk Vulnerability Database. Consultez les ressources de sécurité de Snyk pour en savoir plus sur les vulnérabilités de type Cross-Site Scripting et découvrir à quel point elles sont répandues, même dans les applications Web développées en 2020.

Je vais vous expliquer cette vulnérabilité.

En bas du site Bingo sur la sécurité front-end, vous trouverez une zone permettant de partager le site sur Twitter. Le champ de texte vous permet de personnaliser votre tweet avant de le publier :

Cette zone de texte utilise le slot **error-messages** de Vuetify pour afficher un message d’erreur

<template>
 <div>
   <v-text-field
     :counter="true"
     v-model="shareTwitterText"
     label="tweet"
     required
     :error-messages="tweetErrors"
   ></v-text-field>
   <v-btn
     color="blue"
     outlined
     large
     @click="shareTwitter"
     class="blue--text text--darken-1 font-weight-bold"
     full-width
   >Share on Twitter</v-btn>
 </div>
</template>

Dans le code du composant, nous implémentons la logique de gestion des erreurs à l’aide du tableau **tweetErrors** et de la méthode **shareTwitter()**.

<script>
export default {
 name: "SocialShare",
 data: () => {
   return {
     shareTwitterText:
       "Learn about Frontend Security Bingo: https://goo.gl #FrontendSecurity #WebDev",
     tweetErrors: []
   };
 },
 methods: {
   shareTwitter() {
     if (this.shareTwitterText.length > 280) {
       this.tweetErrors.push(
         `Your text is longer than 280 characters: ${this.shareTwitterText}`
       );
       return true;
     } else {
       this.tweetErrors = [];
       const tweetMsg = encodeURIComponent(this.shareTwitterText);
       const tweetUrl = `https://twitter.com/intent/tweet?text=${tweetMsg}&via=liran_tal`;
       window.open(tweetUrl, "_blank");
     }
   }
 }
};
</script>

Si le texte dépasse 280 caractères, nous définissons l’erreur. Voici ce que cela donne :

Que se passerait-il si le texte du tweet contenait des éléments HTML incluant du JavaScript ?

Ajoutez le texte suivant au tweet, puis cliquez sur le bouton de partage :

<img src=x onError=”alert(1)” />

Une fenêtre d’alerte s’est-elle affichée ?

Félicitations, vous êtes un hacker ! :-)

Cela dit, cette vulnérabilité peut avoir de graves conséquences si vous n’en avez pas connaissance. Comme le décrit la page consacrée à la vulnérabilité XSS de Vuetify :

Les versions concernées de ce package sont vulnérables aux attaques de type Cross-Site Scripting (XSS) via le tableau error-messages. Remarque : si vous n’utilisez pas de HTML pour les props rules, messages, hint, success-messages ou error-messages, vous n’êtes pas concerné par ce problème.

Il s’agit d’une vulnérabilité de sécurité connue du public : les attaquants peuvent donc facilement en prendre connaissance et l’exploiter contre vous.

Comment déployer des sites tout en assurant leur sécurité ?

Excellente question !

Vous pouvez, et vous devriez, lancer des analyses de sécurité tierces avant de déployer votre site. Et quoi de plus simple que d’utiliser un plugin Snyk directement dans le processus de build Netlify ?

L’écosystème de plugins Netlify vous permet de connecter des plugins qui peuvent exécuter des actions supplémentaires et enrichir votre processus de build.

Recherchons et ajoutons le plugin Snyk à notre site :

Pour obtenir les résultats de sécurité, nous avons besoin d’un jeton API développeur. Rendez-vous donc sur Snyk.io pour en obtenir un. Sur la page d’accueil, cliquez sur le bouton QUICK START en haut à droite et connectez-vous avec le compte de votre choix. Je vous recommande vivement GitHub : Snyk pourra ainsi aussi vous envoyer automatiquement des pull requests pour corriger les problèmes de sécurité et mettre à niveau les dépendances obsolètes.

Vous trouverez ensuite votre jeton API sur la page des paramètres généraux de votre compte :

Une fois le jeton API Snyk récupéré, nous pouvons l’ajouter comme variable d’environnement au processus de build Netlify. Les paramètres de build se trouvent dans la page des paramètres généraux du site Netlify, dans le menu Build & deploy de la barre latérale gauche :

Cliquez sur Edit variables et ajoutez une variable appelée SNYK_TOKEN, puis saisissez le jeton API comme valeur.

Et voilà !

Désormais, toute vulnérabilité de sécurité détectée dans les dépendances de packages nécessaires au build de votre site entraînera l’échec du build, afin que vous puissiez la corriger rapidement. Snyk vous indiquera clairement comment corriger les vulnérabilités et quels packages mettre à niveau.

Voyons à quoi ressemble un build échoué dans mon projet. Tout d’abord, l’état général du déploiement indique que le build a échoué à cause du plugin et nous renseigne sur la cause de cet échec :

En faisant défiler la page jusqu’aux journaux, on voit clairement l’erreur signalée par le plugin Snyk : il nous empêche de déployer ce build du site en raison d’une vulnérabilité de sécurité de type Cross-Site Scripting dans vuetify :

Grâce au plugin Snyk, le processus de build Netlify s’est arrêté. Il a détecté la vulnérabilité de sécurité exacte dans Vuetify que nous avons exploitée pour injecter du code JavaScript malveillant via une vulnérabilité de type Cross-Site Scripting, due à la version vulnérable de Vuetify présente dans notre arbre de dépendances.

Que se passe-t-il si une nouvelle vulnérabilité de sécurité affecte une dépendance que vous utilisez, mais que vous n’avez pas lancé de build de votre site depuis longtemps ? Pas d’inquiétude, Snyk est là pour vous aider ! Snyk s’exécute à chaque build, et le plugin Snyk surveille également le projet sur la plateforme Snyk grâce à des tests quotidiens. Si une nouvelle vulnérabilité de sécurité affecte l’une de vos dépendances, vous recevrez une notification.

Et ensuite ?

• Si vous utilisez Vuetify, analysez vos dépendances à la recherche de vulnérabilités de sécurité et corrigez-les. Conseil : si vous connectez votre dépôt à Snyk, celui-ci ouvrira automatiquement des pull requests pour corriger les problèmes et surveillera l’apparition de nouvelles vulnérabilités, au cas où vous n’effectueriez pas vous-même des analyses ou des déploiements réguliers.

• Découvrez le plugin de build Netlify de Snyk

• Obtenez un jeton API sur Snyk et ajoutez vos dépôts pour commencer à les surveiller et à corriger leurs problèmes