Protecting a Phalcon + AngularJS web application against CSRF attacks

Hello to all! Not so long ago, I faced the problem of protecting a web application written in the Phalcon PHP Framework along with AngularJS. The problem was that the page has several forms that send AJAX requests to the server. How to make friends two security frameworks, I did not find a centralized solution, I had to assemble it piece by piece from various sources. And in this article I would like to offer everyone who faced, or will face such a problem, a ready-made working solution.

We generate a token in the meta-tag

Unfortunately, I don’t remember the source right now, but more than once I noticed that between the tags, often in the meta, there were tokens on large sites. If you look at the Phalcon documentation , you will see that the token generation takes place in the form. This is how the default token is generated in the form:

<input type="hidden" name="<?php echo $this->security->getTokenKey() ?>" value="<?php echo $this->security->getToken() ?>"/> 

What to do if there are two forms? There was a solution on the forum, but it was using a third-party library, which in my case was not a good solution, so having a little more searching on the forum, I found a solution to generate a token in the meta-tag.

 <meta name="token" title="<?= $this->security->getTokenKey() ?>" content="<?= $this->security->getToken() ?>"/> 

Fasten the token to all AJAX requests

After reading the documentation for working with AngularJS with tokens, it is proposed to transfer a token in the header with the name X-XSRF-TOKEN, but alas, Phalcon needed to write a separate library for processing such tokens. I do not have time for this, I am lazy, so I had to find another more simple solution.
')

 var app = angular.module('selfmd', [], function ($httpProvider) { $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'; $httpProvider.defaults.transformRequest = [function (data) { if (data === undefined) { data = {}; } var token = $('meta[name=token]'); data[token.attr('title')] = token.attr('content'); return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; }]; } 

In addition to simplicity, it is also flexible, because absolutely all AJAX requests sent using the $ http function are protected by a token that Phalcon easily and conveniently accepts by standard means.

  if ($this->security->checkToken()) { //  } 

Possible problems and solutions

1. If a person wants to view the source code of the page (not through firebug, but in a separate window), then when loading from, a new token is generated, and returning to the page, no request will be processed. Perhaps this is good, there is nothing to climb into the source code.
2. If suddenly there is no favicon on the page, or there is an empty background-image: url (""); then the browser, requesting this data, generates a new token imperceptibly for us. I spent two or three days trying to find the cause of the failure token, and the last thing I could suspect was a block with an empty background-image: url ("");
3. How to protect forms without AJAX, and without $ http? Very simple!
In the controller, add new scopes:

  var token = $('meta[name=token]'); $scope.token_id = token.attr('title'); $scope.token_val = token.attr('content'); 

And in the view we display them in a hidden field:

 <input type="hidden" name="{{token_id}}" value="{{token_val}}"/> 

Now all forms are protected, Phalcon is pleased with his usual data, and does not use extra libraries, and Angular without any problems we cling to all $ http token.

Afterword

I am far from being a security specialist, I am not a PHP guru, I just solve the problems that arise when I do what I like to do. I did not find the same convenient and understandable solution, which is why I wanted to share it. I use this solution in a real project until problems have been noticed. Most likely you will indicate mistakes in the comments and I will be grateful to you. I’ve been working with Phalcon and AngularJS since August of this year, before that I’ve worked with CodeIgniter and jQuery, so don’t judge much for such a solution if it turned out to be not as cool as it seemed to me.

Thanks for attention. If you are interested in reading about Phalcon, subscribe, I have a few more useful solutions to problems when working with him.