Alors découvrez cette technologie au travers de 4 questions posées pour vous à notre expert Yoann GAUCHARD !

Qu’est-ce que Vue.js ?

Yoann GAUCHARD : Vue.js est un framework écrit en Javascript, par Evan YOU, un ancien de Google Labs. Ce framework est une boîte à outils qui va vous permettre de développer plus rapidement vos applications web.
Vue.js s’adresse à tout développeur qui a quelques notions de HTML et Javascript et qui souhaite développer le frontend d’applications web pour développer des interfaces fluides, dynamiques, riches, cela plus rapidement à l’aide d’un framework.

Pourquoi utiliser le framework Vue.js ?

Y.G. : Ce framework est léger, il est aussi modulable, flexible, et c’est surtout son aspect progressif qui est aussi intéressant, puisqu’on va pouvoir, autant l’utiliser pour prototyper rapidement des applications, mais aussi s’en servir sur des sites web existants, pour rendre plus riches certaines pages. Tout comme on peut aussi développer des applications web modernes, c’est-à-dire des applications monopages, ou aussi dites « single page applications » dans leur intégralité.

Organiser son code en composant : quelles sont les bonnes pratiques ?

Y.G. : Il y a plusieurs approches. On peut partir d’une approche « top down », c’est-à-dire, qu’on va essayer de décomposer visuellement notre page web. Par exemple on va faire un composant pour l’entête, un autre pour le pied de page, un pour la barre latérale et un pour le corps de la page.

Ensuite, on va regarder quels sont les blocs HTML qui peuvent se répéter, qui peuvent être réutilisables sur plusieurs pages, et si on en identifie, on peut les rassembler dans des composants.

L’approche « top down » est une approche plutôt naturelle, réservée à du prototypage d’application rapide. Si par contre après on passe sur un projet beaucoup plus conséquent, il existe l’approche inverse « bottom up », où on s’inspire un peu plus de l’atomic design. On va essayer de voir quels sont les éléments de notre page, du plus petit, au plus gros. On parle d’atomic design pour faire référence à la physique : atome, molécule, organisme… Puis on passe aux templates et aux pages.

Il est intéressant, lorsque l’on a besoin d’un même élément à plusieurs reprises, de décider d’en faire un composant et ainsi de suite.

Cela dépendra également de la complexité de votre code. Si vous vous rendez-compte que certains composants deviennent assez conséquents, il peut être recommandé de les sous diviser en plusieurs composants afin d’assurer une meilleure maintenabilité du code.

Quelles sont vos recommandations en termes de sécurité liés aux applications web ?

Y.G. : Il y a un principe de base, qui est de ne jamais faire confiance aux saisies de l’utilisateur, à ce qu’il va saisir dans votre application. Avec Vue.js, si vous utilisez les informations saisies dans votre interface et que vous voulez les réinjecter ailleurs dans vos pages, il faudra s’assurer d’échapper tous les caractères qui pourraient être interprétés dans le code HTML, pour éviter ainsi l’injection de code malveillant, qu’il soit CSS, Javascript ou HTML. Il y a notamment une directive dans Vue.js qui laisse la place à ce type de risque. Il s’agit de la directive VHTML, qui est injectée directement à un pavé HTML dans votre page. Il est primordial de s’assurer que les données que vous allez injecter soient sûres et de confiance, et d’avoir bien échappé tous les caractères interprétables par votre navigateur auparavant.

Il faut tout de même savoir, qu’initialement, si vous utilisez l’interpolation Vue.js, le framework échappe naturellement les caractères donc vous n’avez pas à vous soucier de ce problème.

Un autre point lié à la sécurité va être tout ce qui se rapporte à l’authentification. Si vous utilisez des API pour obtenir des sources de données externes pour votre application web, il est toujours préférable d’avoir un système d’authentification. Dans ce cas vous allez utiliser des clés API, avec des chaînes de caractères, des jetons, des tokens cryptés, que le fournisseur d’API vous fournit. L’un des principes de base avec ces clés est de ne jamais les garder dans votre code versionné sur votre gestionnaire de version. Github par exemple propose Git Secrets, qui permet de crypter les fichiers où vous stockez les clés pour que les personnes qui utiliseront votre code ensuite puissent accéder aux clés qui leur permettront de décrypter ces fichiers. Le mieux étant de les avoir ailleurs, à savoir, ni dans votre code, ni dans votre navigateur. Essayez également de ne pas stocker de secrets ou de clés dans le cache longue durée de votre navigateur car un pirate pourrait les subtiliser. L’idéal serait que ces clés soient stockées sur un serveur à part, sécurisé.

Vous appelez ensuite votre API. Elle passe par ce serveur, qui injecte la clé dont il a besoin pour appeler le fournisseur de données, puis qui récupère les données et les renvoie au navigateur. Utiliser un serveur proxy est ce qu’il y a de plus sur. Il existe également, toutes les Plateformes as a Service (PaaS), comme Netlify, Heroku etc. qui utilisent par exemple des systèmes de fonctions, comme Netlify Function, et qui permettent de produire un peu de code, sans nécessairement bien s’y connaître en code coté serveur, et qui permettent de faire ce code de bypass avec le serveur au milieu, entre le navigateur et le fournisseur de données.

D’autre part, pour tout ce qui est relatif à la soumission de formulaires, si vous utilisez Vue.js avec un rendu côté serveur via d’autres frameworks backend, il peut être intéressant de mettre en place des jetons CSRF, afin d’éviter les attaques d’hameçonnage que vous pouvez recevoir lorsque vous cliquez sur un lien ou une image dans un email malveillant.

En conclusion

En espérant que ces quelques lignes en compagnie de notre expert vous auront permis d’en apprendre plus sur Vue.js et vous auront convaincus de passer à ce framework progressif pour vos projets d’applications web !

Vous souhaitez aller plus loin ?