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

Utiliser fullcalendar avec Angular 2

logo

Fullcalendar est un plugin jQuery très célèbre pour la gestion des rendez-vous du côté client. Il peut interagir avec des frameworks Javascript. Avec les fonctionnalités fournis par AngularJs 1, nous pouvons facilement interagir avec fullcalendar, enregistrer des dates de rendez-vous via un Web Service en utilisant l’Ajax. Mais dans notre article, nous allons voir comment le faire avec Angular 2. (Télécharger ou cloner les exemples)

Il y a deux approches que nous allons étudier avec le plugin Fullcalendar de jQuery:

  • La séparation de la logique de jQuery et Angular 2
  • L’utilisation d’Angular 2 seulement. 

Introduction à Angular 2

angular2

C’est quoi Angular 2 ?

Si vous connaissez AngularJS (Angular 1.x), vous pensez peut-être qu’Angular2 est une upgrade d’AngularJS. En réalité, Angular2 a été totalement réécrit par Google, ce qui en fait un nouveau framework à part entière, avec une philosophie et des concepts propres à lui.

AngularJS nous a fourni beaucoup de fonctionnalités, comme la gestion des routes, interaction entre client et serveur, interpolation, directives, filtres, …, le tout sous une architecture MVW.

Certaines de ses fonctionnalités telles que le data-binding et les filters ont été reprises et modifiées dans Angular 2. Nous allons voir une liste de comparaisons, côté HTML et script.

Parcourir l'article