CSRF protection when using AngularJS with Symfony2

v1.0.1 2016-11-07 06:37 UTC


This API Platform and Symfony bundle provides automatic Cross Site Request Forgery (CSRF or XSRF) protection for client-side AngularJS applications. It can also be used to secure any app using React, jQuery or raw JavaScript issuing XMLHttpRequest or using the Fetch API.

Build Status SensioLabsInsight Dependency Status HHVM Status StyleCI

How it works

AngularJS' ng.$http service has a built-in CSRF protection system. To enable it, the server-side application (the Symfony app) must set a cookie containing a XSRF token on the first HTTP request. Subsequent XHR requests made by AngularJS will provide a special HTTP header containing the value of the cookie.

To prevent CSRF attacks, the server-side application must check that the header's value match the cookie's value.

This bundle provides a Symfony's Event Listener that set the cookie and another one that checks the HTTP header to block CSRF attacks. Thanks to DunglasAngularCsrfBundle, you get CSRF security without modifying your code base.

This bundle works fine with FOSRestBundle.


Use Composer to install this bundle:

composer require dunglas/angular-csrf-bundle

Add the bundle in your application kernel:

// app/AppKernel.php

public function registerBundles()
    return array(
        // ...
        new Dunglas\AngularCsrfBundle\DunglasAngularCsrfBundle(),
        // ...

Configure URLs where the cookie must be set and that must be protected against CSRF attacks:

# app/config/security.yml

    # Collection of patterns where to set the cookie
            - { path: ^/$ }
            - { route: ^app_, methods: [GET, HEAD] }
            - { host: example.com }
    # Collection of patterns to secure
        - { path: ^/api, methods: [POST, PUT, PATCH, LINK] }
        - { route: ^api_v2_ }
        - { host: example.com, methods: [POST, PUT, PATCH, LINk] }

Your Symfony/AngularJS app is now secured.


  • DunglasTodoMVCBundle: an implementation of the TodoMVC app using Symfony, Backbone.js and Chaplin.js

Full configuration

        # The CSRF token id
        id: angular
        # The name of the HTTP header to check (default to the AngularJS default)
        name: X-XSRF-TOKEN
        # The name of the cookie to set (default to the AngularJS default)
        name: XSRF-TOKEN
        # Expiration time of the cookie
        expire: 0
        # Path of the cookie
        path: /
        # Domain of the cookie
        domain: ~
        # If true, set the cookie only on HTTPS connection
        secure: false
        # Patterns of URLs to set the cookie
            - { path: "^/url-pattern", route: "^route_name_pattern$", host: "example.com", methods: [GET, POST] }
    # Patterns of URLs to check for a valid CSRF token
        - { path: "^/url-pattern", route: "^route_name_pattern$", host: "example.com", methods: [GET, POST] }

Integration with the Symfony Form component

When using the Symfony Form Component together with DunglasAngularCsrfBundle, the bundle will automatically disable the built-in form CSRF protection: the CSRF token stored in the header will be validated by the bundle and no form token will be set.


This bundle has been written by Kévin Dunglas.