Sécurisation des échanges entre Angular et Symfony2

Publié le par jeremie

Un des points importants quand nous faisons un projet qui mixe Angular et Symfony2 est la sécurité.

En effet, les webservices  développés avec Symfony2 doivent être accessible uniquement par les requêtes émises par le projet Angular et suffisament sécurisés pour ne pas être interceptés.

Un moyen possible est la mise en place du LexikJWTAuthentificationBundle et du NelmioCorsBundle.

Dans un premier temps, suivez la doc pour installer le LexikJWTAuthenticationBundle. Notre configuration ressemble à celle-ci :

main:
    pattern:   ^/
    provider:  fos_userbundle
    stateless: true
    anonymous: true
    lexik_jwt:
        authorization_header:
            enabled: true
            prefix:  Bearer
            name:    Authorization
        throw_exceptions:        false
        create_entry_point:      true
        authentication_provider: lexik_jwt_authentication.security.authentication.provider
        authentication_listener: lexik_jwt_authentication.security.authentication.listener

Une fois que vous aurez réussi à générer le token avec la commande

curl -X POST http://api.loadinbox.local/login_check -d username=johndoe -d password=test

Vous serez en mesure d’établir une communication sécurisée entre votre projet Angular et Symfony2.
Il est recommandé par la suite d’installer NelmioCorsBundle pour la gestion des CORS (Cross-Origin Resource Sharing).
Pour ce faire, rendez-vous sur la doc. Notre configuration ressemble à ceci :

nelmio_cors:
    defaults:
        allow_credentials: false
        allow_origin: []
        allow_headers: []
        allow_methods: []
        expose_headers: []
        max_age: 0
        hosts: []
        origin_regex: false
    paths:
        '^/':
            allow_origin: ['*']
            allow_headers: ['*']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600

Pour la partie Angular, vous devrez donc faire une requête POST sur le check_login pour récupérer le token, pour ensuite l’ajouter à votre headers pour les requêtes API.
Dans votre requête POST, vous pourrez y ajouter un retour de ce type pour gérer l’ajout du token.

if(result.status == 200 && result.data.token !== undefined){
    $sessionStorage.token = result.data.token;
    $http.defaults.headers.common = {Authorization : 'Bearer ' + result.data.token}; // push it before redirection
    $window.location.href = '...';
}
Cette entrée a été publiée dans Symfony 2 Utils. Vous pouvez la mettre en favoris avec ce permalien.



Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*


seven + 1 =

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>