Devoxx 2017 : Retour sur « Building Secure Angular Applications »

J’ai eu la chance de participer cette année à la 6ème édition du Devoxx France. Je vous propose dans cet article de revenir sur une des conférences que j’ai particulièrement appréciée dont le thème était "Building Secure Angular Applications" présentée par Philippe De Ryck. Philippe De Ryck est expert en sécurité, a un doctorat en sécurité web côté client et est l'auteur du livre "Primer on client-side web security". Il est par ailleurs membre de l'organisation SecAppDev.org.

De plus en plus d'applications utilisent aujourd'hui les frameworks AngularJS et Angular 2 pour le développement du front-end. Philippe De Ryck nous a donc présenté comment sécuriser ces applications en 4 parties :

  • Que faire contre le cross-site scripting (XSS)
  • Se protéger contre le code non-vérifié récupéré via d'autres serveurs
  • Reprendre le contrôle avec le Content Security Policy (CSP)
  • Sandboxer le code non-vérifié intégré dans une iframe

Best Practices AngularJS

AngularJS-large

 

Bien que la première version stable d’Angular2 soit sortie mi-septembre 2016, AngularJS reste très populaire parmi les développeurs front-end. Sa stabilité et sa puissance ne sont plus à démontrer et sont des alliés de poids dans la création d’applications à l’interface riche et aux nombreuses interactions avec l’utilisateur.

Néanmoins, la prise en main de cette technologie peut s’avérer longue et frustrante, notamment à cause de concepts tels que les directives ou encore le « two-way data binding ». Lorsque le framework n’est pas complètement maîtrisé, il en résulte une application peu optimisée voire trop lente dans certains cas, et dont le code n’est pas clair.

Nous allons donc voir dans cet article quelques best practices permettant d’optimiser les performances et la maintenabilité d’une application utilisant AngularJS.

Prévenir les attaques XSS avec AngularJS

Tout d'abord, définissons une attaque XSS (Cross-site scripting).

Le cross-site scripting est une faille de sécurité que l'on peut trouver sur les sites web.
Le principe est d'injecter du code côté client (JavaScript) dans une page qui sera vue et dont le code JS sera exécuté par d'autres utilisateurs.

Par exemple, un commentaire de blog pourrait contenir une balise <script>. Si le code HTML du commentaire n'est pas modifié de façon à retirer les balises permettant l'exécution de code, une faille XSS existe. Une telle faille pourrait permettre de voler la session d'un utilisateur en récupérant le cookie d'authentification d'un site.

AngularJS propose par défaut des mécanismes de protection contre les failles XSS.

DevFest Nantes 2015 !

gdg-devfest     

Le 6 novembre 2015 se déroulait la 4ème édition du DevFest à Nantes. Netapsys était de la partie bien sûr, en tant que partenaire de l’événement et spectateur attentif !

Retour sur cette journée 2.0  ! Ou le plus grand rassemblement de développeurs français autour des technologies Google. Avec plus de 600 participants de tout horizon, 28 conférences de pure technologie et plus de 30 speakers de France et d'ailleurs, 4 thèmes était abordés pour cette édition :

Mobile et Objets connectés, Web, Cloud & BigData et Découverte.

Mise en place de Angular Google Maps

angularjs_logo

Dans cet article, je vous démontrerai que l'intégration d'une Google Maps dans votre site web peut être facilitée grâce à l'utilisation d'AngularJS. En effet, intégrer une carte dans un site web peut avoir plusieurs intérêts : retracer un parcours, afficher les points de vente d'une enseigne... Cela implique donc que cette fonctionnalité est de plus en plus demandée, alors autant utiliser une méthode simple et efficace.

AngularJS : Le tutoriel pour bien démarrer

AngularJS, développé par Google depuis 2009, s'impose de plus en plus comme une référence dans le domaine des frameworks JavaScript. Une présentation détaillée est disponible sur ce blog : cliquez ici.

Avec AngularJS, la navigation, la récupération des données et leur traitement ont lieu côté client. Le serveur n'a plus qu'à valider et envoyer les données, ce qui fournit à l'utilisateur une navigation plus fluide. Cette déportation de la logique permet de développer aisément des Single Page Application, ces applications web à la mode, accessibles via une page web unique.

AngularJS apporte également de nombreux concepts importants :