Currently I am trying to build a website with slim as backend and angularJS as fronend. Therefore I took a look at several tutorials and demo projects. This was the most interesting one: https://github.com/alexdebril/slim-angular
Out of the box I have a problem with the CSRF implementation. In this project the CSRF protection is implemented in the middleware, in order to apply on every connection. Good or not is irrelevant.
But when I install all the dependencies with composer and npm, the project is not working well because every server connection gets a new CSRF token that will be stored in the PHP Session.
So on the main page of this project there is a angular form that will send a string secured with the csrf token to the server. The server then only replies with thw same string and the angular controller prints it out. WHen I trigger the form submit the first time, everything will be fine, but on the second submit, the server will respond with a error 400 because he has a new csrf token that angular does not have yet.
But the creator of this example project could not have made such an error, could he? Why does my apache creates a new csrf token for each connection with the same user? and how can I solve this problem?
My dependencies:
slim\slim v3.8.1
slim\csrf v0.7.0
angular v1.6.4 (route, aria, material, ui-bootstrap, cookie, http-auth-interceptor)
So how can I have only one CSRF token for each user?
Or how do I have to update the tokenizer service in angular in order to use always the newest CSRF token? Or do I need a watcher? to detect this?
It would appear they're using slim-csrf, which fortunately has a setting to disable regenerating the CSRF token on every request. According to the GitHub readme:
By default, Slim\Csrf\Guard will generate a fresh name/value pair after each request. This is an important security measure for certain situations. However, in many cases this is unnecessary, and a single token throughout the user's session will suffice. By using per-session requests it becomes easier, for example, to process AJAX requests without having to retrieve a new CSRF token (by reloading the page or making a separate request) after each request.
So, in /php/middleware.php, just set the 6th parameter to true, and leave the rest as null. For a list of what the other 5 options do, you can just take a look at the source.
I removed Slim's own CSRF Package (slim/csrf) because there are several problems with this in addition to angular.
Instead I now use XSRF Tokens that will be transmitted in the header. Angular can handle this just fine and completely out of the box.
Related
I am building a Vue app that uses pure PHP (no PHP framework) for its back-end. For my authentication system, I thought that using jwt(JSON Web Tokens) could help me. So I searched the web and found this article and also this one to help me build a login-register system with the help of jwt. I have no problem in implementing these articles in my front-part (Vue) and back-part (PHP) of my app. Currently I can send a request when the user register to the site and send back a jwt to the front-part with the help of firebase php-jwt library.
But the main question comes here. As I know from Vue ecosystem one of the reasons that we use Vuex is to store some data (state) globally in our apps and without calling a server we could use them anywhere (or in any route) in our Vue apps.
By reading one of that two articles, I noticed that finally the jwt is stored in Vuex and when the user wants to see an authorized page (a page that needs Authorization) the Vue app checks the Vuex to see if the token exists or not and if it exists, the app allows the user to see that page.
By reading the second one I noticed that jwt is useful when the user sends request to the back-part of site. In that case jwt is decoded and if it is valid (for example the expiration date is OK or ...), the user can access to an authorized page.
With the description above what is the benefit of using jwt in my Vue app? If I store just the id and user-name of user, it could do the same task for me. In other words, If I want to ask my question clearly, the problem is when I want to use Vuex and not send request every time to the server, I don't need and can't benefit from jwt (am I right?). Similarly when I want to use jwt, I could not benefit from Vuex. Because I must send request each time to find that the jwt is valid or not and after that decide about the user.
If I understood correctly and there is a contradiction for using both jwt and Vuex, why there are so many tutorials that speak about authentication a Vue app with jwt? Also if my understanding about jwt is correct, does that mean that when the jwt is expired I must ask the user to login again and again (regardless of using or not using Vuex)?
Could anyone please help me to have a better understanding about this problem to have better decision about my authentication system?
With the description above what is the benefit of using jwt in my Vue app?
JWT is used in authentication. You could use cookie sessions if you want.
I don't think it has an impact on your app. Probably save you some few round trips if your JWT happens to contain some data you need like user id.
the problem is when I want to use Vuex and not send request every time to the server.
I am not sure how these two are related.
If you need to make a request, then why would you use Vuex?
Vuex is a state management library.
If you need to do a request, then do a request.
Vuex does not relate to JWT in any way.
If you decided to put your JWT token in Vuex then that's your decision. Some put it in browser's localStorage or cookies.
Similarly when I want to use jwt, I could not benefit from Vuex. Because I must send request each time to find that the jwt is valid or not and after that decide about the user.
There's a lot of things you can store in Vuex that you don't need to do a request first:
Global component states e.g Login/Signup modals, NavMenu, Audio/Video player
Category filters like you see in Amazon or any shop-related apps
I am not sure what you are doing that you need to send request each time to find out if jwt is valid or not.
If something needs to be done on server-side then it has to be done on server-side whether you use jwt or cookies.
Also if my understanding about jwt is correct, does that mean that when the jwt is expired I must ask the user to login again and again (regardless of using or not using Vuex)?
JWT is a format. If you use OAuth2 for example, there's "access token" and "refresh token". You can get another "access token" automatically with "refresh token" and so that might mean you don't need to show login form again.
You could also just refresh your JWT token each time if you want. I'm not sure about the implications of that but there's a lot you can do.
These links might help you:
https://stackoverflow.com/a/36932032/10975709
https://stackoverflow.com/a/45214431/10975709
My question for you is:
If you were not to use JWT and instead just use cookies, how would things differ? (Aside from the technical aspects like needing to refresh tokens)
You are probably approaching/thinking/using JWT the wrong way.
I have one Laravel app with a GUI where the user logs in based on the data from a MySQL database.
When the user logs in, the server needs to make a request to a specific endpoint of a 3rd party API in order to get a token. This token comes in the response of that request and, since it's some kind of a session token, it renews from time to time (which implies that this same request which retrieves the token should be called if a particular error is thrown).
In some specific views / routes the associated logic in the controller implies a request to one or more endpoints of that 3rd party API with the previsouly acquired token in the body or in the headers - depending on the endpoint.
I'm mostly concerned if someone gets access to that particular token. If that happens, then they could interact with the 3rd party API and do an unwanted mess. So I'm ok if the pages or operations take a little longer as long as the implemented procedure is very secure (the risk of the previous scenario to happen be extremely low).
What's the procedure I should aim for? The desired answer would take advantage of Laravel "machineries" and refer where and how this token should be stored.
In Web Development this scenario usually handles with CSRF token, to ensure the Right user has sending The Request.
from your question i assumed that:
your front-end sends request to third-party Api.
if your third-party library supports CSRF Protection
My Recommendation is to use an Proxy Design Pattern:
Front-end invoke a route in our back-end.
your back-end route (plays proxy role) requests third-party library with session("third_party_session_token")
Third-party only Responses your back-end.
Back-end return response to front-end.
So in this way, The Third-lib Token Will remain only in Back-end.
Third-party Api-tokens are stored in users session space .
you can use laravel Encryption, if you are worry from session data leakage:
session->put("third_party_api_token",Crypt::encryptString($api_token));
and retrieve it when you want to whitin third-party:
$api_token = Crypt::decryptString(session()->get("third_party_api_token"));
before Encrypting anything you have to generate a key using:
php artisan key:generate
I created an API to login in my web app. After checking the parameters, use the Auth method: loginUsingId() with the id of the user to be logged in.
After that I get authenticated correctly, in fact doing an echo Auth::user() shows the user property correctly.
However, by making a redirect to another project page, I am no longer logged in the portal and shows me the login page.
It seems that the user's session does not remain or that is not created at all.
I use Laravel 5.6. I have no middleware for the route.
Each time your page accesses the API, it's essentially talking to a brand new instance of the API.
Think of it like this. Your "login" endpoint is not actually telling the API to log someone in. It's telling it to merely verify the caller's claim that the given password belongs to the given user, end of story. If you want to turn that authentication into actual "login" behavior from the UI perspective, there's other steps you need to take.
If Laravel is serving up Blade files for your site, then it's a different story. Out-of-the-box, it generates a Php session for you, and sends the session-key cookie to the browser for use in subsequent requests.
Similar to a session-key, for maintaining a session between a website and a separate API, you need each subsequent call to include a token. And you need the login endpoint to provide that token upon successful authentication.
Passport is one way to go, but it might be overkill for your situation. Passport is good for handling users, clients, and authorization permissions. But if all you want is authentication and you're not as concerned with controlling what they have access to beyond that, then I highly recommend Tymon JWT-Auth.
Both Passport and JWT-Auth use "bearer tokens" in the 'Authorization' header. There're other kinds though, like "basic tokens". A basic token is just an encoded concatenation of the username and password. Laravel supports this with a route middleware, but I do still recommend going with JWT.
One of the nice things about JWT is you can actually include extraneous data within the token itself. And it positions you better to lean into Passport (OAuth2) if/when you need it, by not requiring your client-side to change its authentication method.
How can i make post request from another server to my laravel server?
I have a website from another provider (lets say domainA.com) , they have CMS system, so I can make my custom pages - the question is, I want to make a form in domainA.com, and post it to domainB.com (my original Server), how can I make it in laravel? As far as I understand I should use api route file for this, is it secure to make such a POST request? because as far as I understand there is no token protection on api requests right?
sorry for my english - i am most interested in security side of such a action - if you show me an example, it would be appreciated.
Laravel 5.4 has 2 route groups: web and api
the web group is used for all requests that come from the current laravel application. Laravel uses a csrf token with every request to make sure every request is coming from the own page to prevent cross site scripting.
the api group is for requests that a fired from an external server. For this group the csrf protection is disabled.
Remember: csrf protection ONLY checks if the requests is from your site, it does not handle the authentication or authorization.
To secure your API you can use json web tokens (jwt). There is a package that will handle the authentication parts for APIs.
If you want to keep it really simple you can write a middleware for all api calls, that is checking if the requests has a special value (your personal token) to give access to the api.
It's possible to accept post request to a Laravel Route and you can define route any of web.php or api.php route file but below are the differences.
web.php
Routes in Web.php will prevent the form without CSRF Token.
to avoid that you can add the route in VerifyCsrfToken.php file in except Array.
api.php
Routes will work directly but the api URL will be Example.com/api/<route>.
But for security you can share an Access Token for the routes and in the controller you can verify the requests with the access token and allow post.
You are right is not sure about this communication.
What you can do is a chain token code
Start with a code and every time you contact the server b it will give you a new code that you will need to use for the next message.
I know it's not as beautiful as a solution but I do not think of anything else.
You could implement your api framework but you would spend a lot of time
While building my SPA with angularJS, i came to the point where i want to implement user authentication in my angularJS website. However, i have no idea where to start and what the best practices are.
Basically i have a sure that can have one or more roles. I've looked for examples so i could get a basic understanding of how to handle this properly, but so far i've only came across examples that are very simple or are not so secure (like this).
So my question is, how to I implement a authentication service using REST (or custom API urls) to authenticate a user, and then display the user information on the page using angularJS, while also ensuring best security coverage by using (for example) the csrf token from Laravel?
Thanks in advance,
Nick van der Meij
I'm making an AngularJS app and an API RESTful made with Laravel 5 for the backend, and my approach for the authentication was:
Installed jwt-auth. Basically extends the Auth model of Laravel adding authorization with tokens.
Added simple role package to laravel. I used permiso. Has multiple roles/user and permissions/role. Very simple.
Added jStorage to frontend. (you can use AngularJS module instead).
So the steps are:
Frontend send user credentials (email and pass).
Server checks, jwt-auth makes a token to that user and send it backs.
Frontend save the token on the browser storage (no csrf needed with this approach).
All next calls to the API are made with Authorization: Bearer header (or with ?token=... )
I like the same approach that #neoroger takes using JSON Web Tokens with jwt-auth. I used the Satellizer package for storing the token on the front end and to send it along with each request to the API afterwards.
I put together a couple tutorials that show how to implement the two packages if you are interested:
https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps
http://ryanchenkie.com/token-based-authentication-for-angularjs-and-laravel-apps/