How to hide or remove ajax api calls from Network section of a browser? - ajax

I am working on a website which is developed in react js and I am fetching all data through the API calls. That API calls are visible in the network section of a browser and that API call contains JWT token in the header part of all API call, So it can cause security issue due to that anyone can do that API call with the same header and same URL through other platforms like postman n all.
So my question is that how can I control that no one else is able to access it or how can I hide that API calls from the network section of the browser?
Is there any other solution to solve this security issue?

You have to assign a token to each user. The token will be given to the user upon authentication.
You have to manage access to the page based on the userId and token.
Yo should not use generic tokens for all the users.
Destroy the token upon user logout.
If the user see the token on the network they can only have access to the portion that he is suppose to have access.
This is how I do it, hope it helps.

Related

Laravel 8: AJAX Athentication in non-SPA app

I'm writing a non-SPA app that needs to use an internal API. The API is called via AJAX requests. This is to provide the user with suggestions as they are typing, so I don't want the page to be reloading. The user must be logged in to access the API. The API doesn't need to be called from any other origin.
I have successfully got it working using Sanctum and API tokens. When the user logs in, I generate a token and store it in the browser session, and then send it with the Bearer header. This seems to work but is it the right approach? Should I just using the built in or web auth? I've been reading the docs but have just been getting kind of confused with all of the options.

How to invalidate mobile personal access token after backend deletion?

I am using Laravel as my backend together with Sanctum which generates personal access token for mobile users. For my mobile application I am using flutter.
To authenticate users they login with their username/password and get a personal access token in return. This works but requires a user to login every time they open the application again so I did what most tutorials suggest which is saving the token on the mobile device using shared preferences/secure storage.
Now comes the question how do you invalidate a user when you remove their token from the backend? On initial login it appears everything is still fine because like in most tutorial I check for the existence of a token. After that whenever I want to make a request which uses the token I obviously run into problems because it not longer exists on the backend.
Most tutorials/guide suggest saving the token and using that a reference to see if the user is logged in or not but this seems flawed because it gives the false impression you actually have a valid token.
My guess is this can be solved by always performing a heartbeat/ping action to check if the current token is valid and if not send them to the login screen instead of simply checking for the existence of the token.
Thoughts on this?
I can suggest a hack or trick here in every launch of the app you can send a request to an API to check if the user's token is valid or not and if it is valid then you can continue the app otherwise force the user to login and generate new token this way your app will be secure via server / API.
For this, you can store the user's secret token in the database and check it via HTTP API call and send a response from the API accordingly and check the response in app and do the next operation according to the response you get.
I don't know if this is a great way of doing this job but it is a kind of hack/trick to achieve what is needed.
Thanks

How to provide login authentication for Web API in Xamarin App?

I am working on Xamarin Forms application and new to providing login authentication of the application. I have completed the design part of the application with using Entries for user id and password and button for Submit. Also, i am having web API and for authentication. Now how to connect that Web API in xamarin forms application for login.
Please guide or provide some use full samples...
Thanks in advance...!
I assume you've built out your authentication API already, and that you can make Fiddler or Postman calls directly to your controller, pass in a set of credentials, and return back a JWT / bearer token that you can then use for authenticated calls?
At this point, it's relatively simple then as you'll want to use build a proxy layer / API layer to make calls out to your API. These calls will simply mirror the ones you've made in Fiddler/Postman/your proxy of choice.
I used Refit to achieve this:
https://github.com/reactiveui/refit
Specifically, you can see on the "Setting request headers" section how they easily encapsulate it for you to pass your token.
Of course, your initial call should be to login, and then once logged in, take the JWT response back from your controller, set the token in your Keychain, and then pull it out of Keychain to set in the header.
Let me know specific questions you have? For example, which of the following do you need more info on?
Sending and parsing a response (serializing the response) from your Login action to set/assign a token in keychain?
Saving the token, and setting it in a header for subsequent calls?
Building a proxy layer using a framework like Refit to make generic outbound calls?

How to attach jwt token on every page after successful authentication?

I followed this code and implemented the jwt authentication successfully. I am using this authentication in my web application. I am able to get the token on the login page. After that how to attach that token to the header of all the subsequent requests. I stored the token in local storage, but when I navigate to next page after successful login before js loads, the page getting loaded with 401 error.
How should I achieve this?
The problem is you're trying to use token based security with the Web MVC architecture. I did a quick search for any tutorials on how to do it that way and all I was able to find is examples of REST APIs that use token based security.
The reason is that with Spring MVC, each link you click is going to redirect you to a controller endpoint that is going to render the HTML and send it back to the browser. Unless you somehow made every link on your site include the token in a header or perhaps used a cookie to store the token, you'll get a 401 error because the token isn't present in the request.
If you were to use Angular JS (or your favorite front end framework) with a REST backend, you'll be able to use the JS to put whatever you need in the header to make sure the user is authenticated and has access to the resource. There a lot of example projects out there that demonstrate how to do this.
Disclaimer I haven't been able to find a reliable source that definitively says that token based security is for REST only. I'm basing this on experience and readily what I see out there in terms of tutorials and how to articles.
Ich totally agree to the answer from blur0224, you have to set the token in the request header of every link on your pages. I don't know how to achieve this. Furthermore I think that JWT token based authentication is not the right way for MVC based app. I would use it in SPAs build with frameworks like Angularjs.
Why don't you use the 'standard' Spring authentication?

Google OAuth2 - tokens, on-line, offline, adding scopes incrementally

Trying to organize this question into something clear. We are integrating Google for Work into our application, to use login, Google+, and eventually Contacts, Calendar, etc. As is recommended by Google and everything I have read, we are going to use incremental access, only adding scopes when they are needed. We are a PHP shop.
But, we will also be needing offline access, as our Contacts (and eventually Calendar) access will be synchronizing with our internal database.
We currently capture the Access and Refresh Tokens when doing the initial link, and store them locally, so that we can re-authorize at any time by using the Refresh token whenever the Access token expires. This is working correctly.
Questions:
a) when adding the incremental scopes for Contacts, the documentation says we need to call the gapi.auth.signIn() function in the page javascript with the new scopes. This is working on the page where we are allowing folks to manage settings. In the original login function callback, I save the Access Token and scopes with an Ajax call that uses the access code passed into the callback, and calls the Google_Client authenticate() function to get the access code and scopes... but at that point, the information I get back does not have the new scopes. Why? Do I have to re-extend the scopes every time the page is drawn?
b) since we are going to have a batch process do the contact synchronization, do I need to get an entirely different access token with access_type=offline, or can I use the current access token (properly extended with the new scopes). Can an off-line access token be used for on-line access as well as off-line? Or vice-versa?
For your questions:
a) have you used the parameter "include_granted_scopes"? as mentioned here:
https://developers.google.com/accounts/docs/OAuth2WebServer#incrementalAuth
b) When you request an offline access token, the response contains the access token and refresh token. so you can refresh the access token after it expires without having the user grant the permissions again.
online access token and offline access token work for the same.
the difference between both its the capability to refresh the access token when it expires without involving the user. Which is the functionality for the offline type.
The online access token doesn't mean that it works for your client-side authentication (done in the browser) and the offline works for the server-side.
You mentioned that you can get an access token, refresh token and authorization code from the client-side of your app. You could send that information to your server and make api calls from there, although this is not a good practice.
I would suggest that you do the OAuth Flow in the server side and from there manage the users information and API calls.
Here you can find the documentation on both Web server applications and Client Side applications.
Hope it's clearer.

Resources