Angularjs csrf

19 mai 2013

Dans cet article, je vais vous montrer comment utiliser la protection CSRF pour les applications Express et AngularJS. Les deux frameworks intègrent une protection CSRF, mais ne se comprennent pas sans ajustements manuels.

Express est construit sur le framework connect qui dispose d’un middleware csrf natif. Il génère un jeton de chaîne aléatoire unique pour chaque utilisateur. Le jeton est enregistré dans la session de l’utilisateur sur le serveur. Pour chaque requête qui change d’état, généralement , et les requêtes, le middleware vérifie si le jeton CSRF envoyé par le client est le même que le jeton stocké dans la session de l’utilisateur sur le serveur. Si ce n’est pas le cas, le client obtient la réponse. Ce qui suit est tiré de la documentation et décrit l’endroit où le middleware recherche le jeton.

La fonction value par défaut vérifie req.body généré par le bodyParser(), req.query généré par query() et le champ d’en-tête « X-CSRF-Token ».

AngularJS intègre également des fonctionnalités CSRF dans son service $http.

Les deux frameworks offrent une protection CSRF. Pour qu’ils fonctionnent ensemble, nous devons faire quelques ajustements. Suivez les étapes ci-dessous pour que CSRF fonctionne pour votre prochaine application

1. Ajouter un middleware CSRF à votre application Express
2. Indiquez au middleware d’utiliser le bon jeton
4. Utilisez la bibliothèque de $http AngularJS pour les requêtes XHR

1. Ajout d’un middleware CSRF à une application Express

Dans un premier temps, nous devons ajouter le middleware CSRF à notre application. Comme cela nécessite des sessions, nous devons également ajouter un middleware de session supplémentaire. Vous n’avez rien à installer car ils sont livrés avec Express.

deux. Dire le middleware CSRF pour utiliser le bon jeton

Comme mentionné précédemment, le middleware CSRF par défaut recherche dans , et l’en-tête pour le jeton. AngularJS n’utilise aucune des méthodes mais son propre en-tête. Par conséquent, nous devons indiquer à Express où chercher le jeton livré par AngularJS. Créez une fonction qui renvoie ce jeton à partir de l’objet.

La fonction ci-dessus est la fonction par défaut extraite de connect. Je viens d’ajouter la dernière ligne. Il accepte toujours les autres méthodes, mais trouve également le jeton entrant à partir d’AngularJS. Passez maintenant cette fonction au middleware CSRF à partir de l’étape 1.

Cool, Express peut maintenant retrouver le token envoyé par AngularJS. Une chose qui manque est l’envoi du jeton de notre serveur Express à notre client AngularJS.

3. Accès

La bibliothèque $http d’AngularJS lit le jeton de la fonction. Le nom est évidemment . La valeur est lue à partir de la session de l’utilisateur. La clé est automatiquement Généré par le middleware CSRF.

4. Épisode 4 Utilisation de la bibliothèque $http AngularJS pour les requêtes XHR

Nous avons maintenant tout en place pour utiliser la bibliothèque $http d’AngularJS sans autres ajustements. Un contrôleur simple pourrait ressembler à ce qui suit

: Aucun ajustement n’est nécessaire sur le client et votre code doit fonctionner tel quel.

Conclusion

: Comme vous l’avez vu, l’ajout de la protection CSRF à une application construite avec Express et AngularJS est très simple. Il ne devrait y avoir aucune raison de ne pas utiliser cette technique pour votre prochaine application. Cela ajoute une autre couche de sécurité. Les principes sous-jacents peuvent également être appliqués aux applications créées avec une pile différente. La lecture de leur documentation est toujours un bon début.

Vous pouvez trouver le code sur GitHub zeMirco/csrf-express-angular et un exemple de course à pied sur Heroku http://arcane-headland-6078.herokuapp.com/.

TweetGooglecommentaires propulsé par