How to use Symfony CSRF Tokens with React JS - reactjs

I'm doing a SPA with Symfony and React JS, and my ask is how can I use the Symfony CSRF Token generator with react to avoid CSRF Attacks?

If you develop an SPA, then you're also building an API on Symfony side. (that's usually what people do)
Since CSRF issue is only related to forms and not APIs (because they usually are stateless), then you just do not manage CSRF issue. If we usually do not have this problem, keep in mind that you still need to deal with it if you use cookies/sessions. If you do so, then I recommand you to read the documentation of the csrf component of Symfony.
More insights here: https://security.stackexchange.com/questions/166724/should-i-use-csrf-protection-on-rest-api-endpoints

Related

Laravel and React authentication setup

I apologize if this might not be the correct platform to ask this question.
I need to start a new project. Laravel backend, ReactJS frontend.
Im really struggling to find out which authentication system to use.
I did read that a good approach might be setting up Laravel Fortify as a back-end and using Laravel Sanctum as part of the front-end to facilitate CSRF tokens.
Do you know of any good tutorials or where I can find documentation on how to use it in this kind of combination?
PS - I will move the question if it is not the correct place for it.

AngularJS csrf token in development environment

I've an app with Django as server and Angular in front end.
I know both Django and Angular have in-build support for CSRF (Cross Site Request Forgery) protection.
So from these resources:
http://django-angular.readthedocs.org/en/latest/csrf-protection.html
Django csrf token + Angularjs
I could implement CSRF protection easily.
But unfortunaltely that solutions not working for me.
More digging showed that, it won't work for Cross domains. Well, my Django and Angular will be in same domain after the build, I want to test the CSRF in my development environment.
So my question is, how can I use CSRF in cross-domain (in this scenario)? At least in my dev environment? (http://localhost/)
Thanks in advance.
I think you could simulate domain name by modifying /etc/hosts file ,
please refer to the below link for more information, it will surely solve your problem
https://docs.acquia.com/article/using-etchosts-file-custom-domains-during-development

Node.js & AngularJS quickest and simplest way to implement authentication & authorization mechanism

I'm building a project using Node.js and AngularJS.
Some of the views and operations in my project require authorization.
In ASP.NET I used to simply save the user-id or user object in the Session when the user's credentials are correct, then in every Page and operation I would check if the user has permissions, and if not I would use Response.Redirect. So simple!
Now I use Node.js and AngularJS which are maybe the most popular combination for building websites nowadays and I would expect to have a very simple and quick way (even of a third party) to implement authorization, just like in ASP.NET.
Unfortunately I've only found a bunch of implementation examples that contain a myriad of code lines and turn me into an information security expert who knows about things like token and etc. Here are some of the articles I've found:
Best practices for authentication and authorization in Angular without breaking RESTful principles?
http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/
https://www.theodo.fr/blog/2015/08/handling-basic-route-authorization-in-angularjs/
http://code.tutsplus.com/tutorials/token-based-authentication-with-angularjs-nodejs--cms-22543
http://www.kdelemme.com/2014/03/09/authentication-with-angularjs-and-a-node-js-rest-api/
Is there any simple way to implement authentication+authorization+routing to unauthorized page without writing so many lines of code?
Any help will be profoundly appreciated!
MeteorJS is a node based framework with a drop-in authentication system. It also has first class support for AngularJS on the front-end.
You would first add the relevant accounts and UI packages on the command line.
meteor add accounts-password
meteor add dotansimha:accounts-ui-angular
You could also add OAuth provider packages such as accounts-facebook or accounts-google.
Then in your template you add a the login-buttons directive.
<login-buttons></login-buttons>
It then handles account creation, login, forgot passwords etc. It also provides hooks so you can add fields and values on account creation.
Here is a link to the authentication section of the Meteor/Angular ToDo tutorial.
nodejs modules and jsonwebtoken, passport, passport-local
passport local for local strategy and passport for authenticate and jsonwebtoken for create authentication token

Securing Symfony RESTful API consumed by angular front?

I have set up a Symfony based API which is being used by an Angular front end which is totally dependent of it (User registration included)
I have read multiple threads recommending using WSSE or FOSOAuthServerBundle but I'm not sure about the best method ?
If I understood correctly, WSSE has to send for each API request x-wsse headers which make me think it is not the best suited for performance.
About the FOSAuthServerBundle I have never used it and looks a bit complicated to me compared to WSSE, thus that's why I'm asking there before trying to implement it.
I have 2 simple groups of user (basic and admin), what would be the best way to secure my API, additionally providing an easy way to keep user persistence (I mean accesses through the different pages)?
How should it be in the Angular front side ?
Thanks for your help.
Refs: http://blog.tankist.de/blog/2013/07/16/oauth2-explained-part-1-principles-and-terminology/
http://obtao.com/blog/2013/06/configure-wsse-on-symfony-with-fosrestbundle/
It all depends on what your requirements are.
First of all, OAuth 2 is an authentication mechanism/spec which you can use in combination with sessions/bearer tokens/... This also applies for local accounts (since you want to do user registration).
FOSAuthServerBundle is a bundle to implement the server-side of the OAuth2 specification. This basically means you can expose your OAuth2 side of the API to other applications and allow them to use your accounts to authenticate. Think google login, twitter login, etc but for your own app.
This all has nothing to do with the way you validate / authorize your requests after the initial login has taken place.
Do you want to implement stateless authentication? Then I would recommend using the new JSON Web Token (JWT) specification.
See Symfony Bundle (LexikJWTAuthenticationBundle) and JWT description (JWT.io)
There are many resources on it from the angular side of things and the API part is pretty straightforward.
WSSE does not seem suited to implement in a RESTful API and I have no experience using/implementing it so I cannot comment on it too much.

Angularjs and SSO (SAML2)

I came across with this AngularJs thing, and I thing it is awesome, really solves many problems I confronted while working on my last WebApp with just a few lines of code.
Now, what I didn't find or was looking in bad places is the protection of AngularJs app with SSO (simpleSAMLphp Identity provider). How to deal with this?
What I am going to build will use Pyramid framework as a backend REST API, and AngularJs (I wish) for the frontend. But how to protect the app from unauthorized access, skipping the sso login. Any implementation example or lessons working on similar case would help (may be with php, ruby backends and SSO etc)
I doesn't seem like pyramid has any direct support for SAML authetication. I suggest using a third party application for SAML. For example Shibboleth. The SAML communication is done on the server side so Angular wont need any integration.
Google like 'Authentication in angular JS application' you can get lot to protect your angular app. To protect your REST API use Oauth whether its a php or ruby application.

Resources