How to make API routes only accessible inside the app?
For example http://host.com/api/products returns the data as intended but it's really insecure since anyone could access it through postman or the browser.
Related
I'm trying to implement laravel's passport to protect my api routes and I have a case where the route should be inaccessible unless it is called by an authorized application. I am trying to use Client Credentials Grant Tokens and using postman I am able to generate an access token, which then I can use for access authorization.
The problem is - I don't understand how should I safely use this with Vue and axios. I have my component in which I need to call this api, I can of course set a form body including all the necessary fields (client_id, client_secret and grant_type) but that would mean that anyone could just open up chrome dev tools and search for client_secret in the source and they would get the hardcoded client secret, which would grant them access to the api. What is the right way to do this?
It depends on how you use your Vue frontend.
If it is a frontend mostly for your own site, but sometimes needs to access an external API, than you should have your backend make the API calls and store secrets there.
If you are developing a Vue frontend dedicated to the external API, but running on a different domain, you could go for the PKCE option: https://laravel.com/docs/8.x/passport#code-grant-pkce
If you have a frontend on the same domain as the API, use the CreateFreshApiToken option provided by Laravel passport.
I'm building the backend with laravel and then using Vue as front-end. Data is accessed over api calls using axios. Now I have this relatively simple task but I can't seem to find the proper solution. I want one of the routes to be easily consumable by Vue compoenents without the need to log in, however I don't want that route to be publicly available for anyone to use.
Things I have tried:
Using passport to protect my routes and then use passport's CreateFreshApiToken middleware. Protection works fine, unauthorized users are not able to access the routes, however I don't get laravel_token in my cookies and therefore I can't get access to that route if I'm not logged in.
Use passport's client credentials grant access. Works fine and the way I want it to work but doesn't really make sense because if I hardcode the client_secret - anyone can access it and then use it to access protected routes. If I make a proxy-like solution, to call a controller method, which would issue a valid token and thus not exposing client_secret to front-end but then anyone could just call that route which issues the token and it would be pointless once again.
Apparently the answer is pretty simple and I was overcomplicating things. I don't know if this is the right/elegant way to do this but basically. If you don't need your api to be accessible from other applications (which I didn't) we can just put routes in web.php instead of api.php. This will ensure that web middleware is used and so it will use the basic csrf token validation, which is totally sufficient for protection against outside requests. You can also leave the route in api.php and just use web middleware on that route. The outcome is exactly what I needed - application is getting data over a route without any need to login AND that route is not available over postman or anything else.
I have separate backend and frontend. However, they run on the same server (this may change in the future). The backend serves as an api and is powered by Laravel. Frontend by Nuxt (Vue).
I wish only my Nuxt application could access the api. How can I configure Laravel to only return data if the request comes from a Nuxt application?
I thought about adding a special token to requests, but the user will be able to check what request is coming out and capture the token. Can anyone give me ideas how this can be solved?
You must be knowing about CORS. So in your Laravel Server, allow requests from only the frontend server's domain like this:
Access-Control-Allow-Origin: https://www.example.com
Simplest solution would be to add serverMiddleware in the nuxt project and route all the requests to the "real" api through it. Clients will hit the internal nuxt api and they will not be able to see the actual request made to the real api. There you can also add the token you are talking about for extra layer of security.
We're currently developing a multipage app using VueJS as frontend javascript framework, Element.io as CSS framework.
We're not exposing any web services or some kind.
Our application is responsive - users can create records using desktop and mobile.
Do I need to create API routes or WEB routes is sufficient enough?
Are there any scenario you can think of that I need an API route?
Web routes are for frontend views where API routes would be for API calls, you would definitely need to separate them as your VueJS will make calls to your API with JSON and get a JSON response in return with error codes to handle your errors efficiently.
Web Controller:
return view('blade_file')->with(compact('var1', 'var2'));
If you set the error codes here, it will show you the blade file for that error code, eg. 404 will show you the blade view file at ./resources/views/errors/404.blade.php but your application will expect JSON response instead of HTML response.
API Controller:
return response()->json(compact('var1', 'var2'), 200); // success
return response()->json(['error' => 'bad request'], 400); // bad request
If you set error codes here, you will still get a JSON response, just with the error code specified.
Conclusion:
Separate your frontend and backend with API and Web routes as requests/responses are handled differently.
Notes:
Remember to add your CSRF token in your header when making ajax/axios requests to this API.
Make sure your middleware is api. If the API only allow authenticated users, you would need the middleware to be auth:api and you would need to use Laravel Passport.
Remember to add the namespace of Api to your API routes, either in routes/api.php file or app/Providers/RouteServiceProvider.php.
I have a react app that fetch datas from laravel api defined like so in routes/api.php:
// this is default route provided by laravel out of the box
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
// ItemController provides an index methods that list items with json
Route::resource('items', 'Api\ItemController', array('except' => array('create','edit')));
// this is to store new users
Route::resource('users', 'Api\UserController', array('only' => array('store')));
for example http://example.com/api/items returns the data as intended but it's really insecure since anyone could access it through postman.
How to make those routes only accessible inside the app?
As I'm new to it I don't understand if I need to set up api_token and how?
Do I need to setup Passport?
Is is related to auth:api middleware?
It may sounds really basic but any help or tutorial suggestions would be greatly appreciated
EDIT
End up with a classic session auth. Moved routes inside web.php. Pass csrf token in ajax request. Actually i didn't need a RESTful API. You only need token auth when your API is stateless.
As you are using Laravel 5.4 you can use Passport, but I haven't implemented yet, but i implemented lucadegasperi/oauth2-server-laravel for one of my laravel projects and it was developed in Laravel 5.1
Here is the link to github repository
lucadegasperi/oauth2-server-laravel
Here is the link to the documentation Exrensive Documentation
Just add the package to the composer json and run composer update,the package will get installed to your application , once installed add the providers array class and aliases array class as mentioned in the Laravel 5 installation part of the documentation,
you have to do a small tweak in order to work perfectly cut csrf from $middleware array and paste it into $routeMiddleware array and again run php artisan vendor:publish after publishing the migrations will be created and run the migration php artisan migrate
if you only want to secure api routes for each client like ios, android and web you can implement Client Credentials Grant, or if you need to every user with oauth the you can implement Authorization Server with the Password Grant or some other.,
Never use the client id or other credentials, generating access token in the form, but add it some where in helper and attach it in the request to the api,
Hope this answer helps you.
You could use JWT it's pretty easy to get it to work. You basically generate a token by requesting Username/Password and passing that token in every request that requires authentication, your URL would look like http://example.com/api/items?token=SOME-TOKEN. without a proper token, he doesn't have access do this endpoint.
As for
How to make those routes only accessible inside the app?
If you mean only your app can use these requests, you can't. Basically the API doesn't know who is sending these requests, he can only check if what you are giving is correct and proceed with it if everything is in order. I'd suggest you to have a look at this question