Develop Reference

How to clear http basic Authorization credentials saved in the browser

In an angular application, I send an XHR login request to a stateless rest server with http auth header:
http
.get(`${site.url}/login`, {
headers: {
Authorization: `Basic ${btoa(`${username}:${password}`)}`,
},
withCredentials: true,
})
Anytime I request the same server then, I don't need to send the credentials again: they are saved automatically by the browser. This is nice, this way I don't have to save the credentials on the browser (the server is stateless, so there is no session nor token available).
However this introduces a security issue: when the user logouts (this is a simple boolean stored in the browser), his browser is still able to connect to the server: in case of XSS someone could connect again.
Is there any way, from Javascript, to clear these credentials? I saw some hacks (request the server with bad credentials...) but I am looking for a consistent & safe way.

Headers are immutable - they can't be changed. However you can use a technology called JWT (JSON Web Token).Here a link for JWT's website.

How to handle jsonwebtoken from front end

I'm working on a full stack project where users can create account, visit their profile, create blogs, read their blogs, delete their blogs etc. In order to perform all these tasks (except signup and login) the user has to be authenticated.
I'm done with the back end but i don't understand how do i send jsonwebtoken from the client side to the server side (i know how to send it from the server side). I know how to get tokens from the server and store them in browser's locaStorage but i don't know how to send them back to the server when i'm making request for reading blogs or deleting blogs or visiting back to my profile after reading all my blogs.
If i do this -
window.location.href = "/blogs";
then i won't be able to send authentication token or i should say i don't know how to send authentication token using this approach.
Here on stack overflow i read about this technique-
window.location.href = "/blogs?token=";
but i don't think developers uses this technique in their projects because as far as i know tokens are supposed to be sent through headers.
If i summarize my question i just want to know how do i send authentication token to the server as well as change the page for different routes for example a different page that shows all my blogs and another page that shows only my profile. If someone else who is not authenticated tries to visit profile route or blogs route, would get a 401 error.
It would be a great help if anyone could solve my confusion or suggest me a book or an article that solves my confusion.

I will try to make it simple. As an example, I will use code from one of my project.
First, you do not explain how you check and validate token on server-side. So to make explication more complete, I will provide some code.
On the server-side, I use a simple function to check each request received and depending on verification and validation process, I will update the request received before sending it to resolver.
NB: current code used Express
In my example, I store the token inside the request header Authorization field.
const isAuth = async (req, res, next) => {
const authHeader = req.get('Authorization');
// if is no authorization field in header, we call
if (!authHeader) {
req.isAuth = false;
return next();
}
const token = authHeader.split(' ')[1]; // `Bearer XXXXXXXXXXXXXXXXXXXXX...`
if (!token) {
req.isAuth = false;
return next();
}
// Here i decode the token
const decodedToken = jwt.verify(token, 'SomeSecretWord');
req.isAuth = true;
return next();
}
On each request received, we check if the header contain an authorization token, if yes, we validate and verify token. If validation is successfully completed, I update isAuth field inside request and set it to true.
app.use(isAuth);
Now you will be able to access the isAuth inside resolvers and return data based on its value (example: throw error if false);
So now, for the client-side, since we expect token to be store inside the headers Authorization field, we need to set it before sending request.
Be sure to already have the token save on client-side.
In my case, user need to login to receive a new token so he store the newly created token inside client-side storage.
Now before sending each request, access token from storage and updare request header with it.
const headers = {
Authorization: "Bearer XXXXXXXXXXXXXXXXXXXXXX",
};
const reqInit = {
method: 'GET',
headers: headers,
};
// send request using fetch
fetch('/someLocation', reqInit)
...
The problem I faced here, was to store the token between requests for a user session.
the easiest and secure way is to save it in the local or session cache (according to google after a small research) and access it on each request.
While creating the json web token on server-side you can specify a expirery so if token was not used for a certain time, it will be invalid and user will need to reauthenticating to receive an other token and save it in his client-side storage.
After some research, I decide to rewrite my backend with graphql (apollo-server
/ express) for server-side and apollo-client for client-side.
since apollo-client provides a library to manage local cache on client-side, it simplifies the task.
I hope I have answered your question and that can help you and sorry if I made a mistakes.

Add authorization header to your request
headers: {
"authorization": "Bearer your_token"
}
Its and example for adding header to ajax request.

Nodejs authorization approaches

Before I have to say that I've found some post related this question but not fully answered.
So I implement a nodejs REST API server, DB with mongoDB, however about authentication i understand the idea, with jwt token it work perfect.
/api/login
you get response with token. now you can request resource with this token
for example.
api/posts/:user_id
get all your posts...No problem! query with mongoose findBy.. bla bla!
so for authorization in this case it's easy, check for query param user_id is equal to token (token parse with user_id). boom resources is secure.
but in case that I have some resources they're not reference by user_id, What is best practice to protect this resources?!
example
api/settings/:settings_id/emails
imagine that I know the setting_id of other user, and i authenticated with token. so how server will know this resources is not allowed for me?

First, you should do more to protect the token in the first place. When you issue a token after a user logs in you should store their token on either web storage like sessionStrorage if https is enforced or use an httpOnly cookie (You can add a user-agent/geoip fingerprint in addition to the user_id upon signing this token to add an additional layer of security). Then, when a user makes a request for a protected resource, you can match the fingerprint and user_id you signed the token with to the user they are making the request in behalf of.
You could use something like passport-jwt as a middleware in express to require authentication on routes. In passport, you define an extractor handler that basically tells it where to look to see if the user has a token and if they do and it validates it adds the req.user property that you can use on subsequent requests to determine the user_id of the token bearer. So basically with this approach, you know the user_id on every request which lets you compare that with the user information they are requesting.
app.post('/settings/:settings_id/emails', passport.authenticate('jwt', { session: false }),
function(req, res) {
res.send(req.user.id);
}
);

How do I edit the authorization header of an HTTP GET request originating from a hyperlink (<a href> tag)

I have an Angular application that stores JWT tokens in localstorage to provide authentication. What I want to do is figure out how to grab this JWT token and insert it into an HTTP GET request, that renders as a completely new web page (NOT a returned object from an XMLHTTP request that displays in the same page...).
Is this possible? The only way I've found to do something similar would be to use basic HTTP authorization, such as:
username:password#www.hypotheticalwebsite.com
And I'm assuming I could pass in my entire JWT there.
I'm using Express.js to handle routing on my Node.js backend.

Simply readout the JWT from your locale storage and then insert the JWT to the Authorization Header or you could add it as a GET parameter.
I would recommend the header.
On the next side simple read the JWT out.
If the processing is needed on all pages of the express instance, do it in the express-middleware.
Update
If you want to use a normal link you must use a parameter like ?auth_token=12345.
To add it was a header you can use $http and use a method in your controller.
For example:
Controller
$scope.openLink = function() {
var config = {
headers: {
'Authorization': '12345',
}
};
$http.get("<your url>", config);
}
View
Test
Shielding Admin Interface
To be secure you should add roles in your api and only allow the administration relevant calls for administrators and also check on angular side if the user is allowed to open the UI with the role the user has. For angular there are a few acl modules like: github.com/mikemclin/angular-acl

Token based authorization in nodejs/ExpressJs and Angular(Single Page Application)

In my application,while registering the users i am saving username,password and jwt generated token with these fields in MONGO DB.When user tries to login with correct credentials then i will send the response with stored token.Then at client side(In my controller) i am using the localstorage to store the token so that i can send the same token for each and every request sent by the client.But I found some issues regarding this procedure:
I am generating same token for one user every time.So if any third person is able to get the token then he can access the restricted page.
Am i wasting space in db by storing the generated token in MONGODB
Can Anyone access the token stored in localstorage other than the user.
for each and every request in my single page application,I am again querying mongodb to get the token for that user and validating.Here,I am checking both client side and server side.
I am using jwt to generate tokens,Node,Express,Mongoose in my application
Am i following the good procedure.If not,can you please provide the solution for my approach or any new approach.
I have searched many sites for token based authorization and session based authorization,But nothing worked for me.
Note:I am beginner for Nodejs,AngularjS

You should store token in advanced key-value cache tool like: Redis
That would improve performance remarkably.
You will get token from database for 1st time then it should be stored in Redis. I used to set token as key and username as value. Next request , the token will be given from cache. with Redis you can set expire for token.

When a user registers, you would need to generate a JWT like you're doing now. That's OK. You don't need to save it to the database however. You didn't ask but I assume that the password should not be stored in clear text. You can use something bcrypt to encrypt before saving it to the database.
When user tries to login with correct credentials then i will send the response with stored token
Yes, that's correct way to do.
Then at client side(In my controller) i am using the localstorage to store the token so that i can send the same token for each and every request sent by the client.
Yes, on the client side, you can save the JWT to local storage and send it in subsequent requests to the server.
Now your bullet points:
So that you won't have the same JWT each time, you can include an "exp" claim in the payload (I'm assuming you're using something like jwt-simple to generate a JWT). Something like:
var payload = {
sub: account.username,
exp: moment().add(10, 'days').unix()
};
var token = jwt.encode(payload, "secret");
You don't need to store the JWTs in the database. In some cases, the token issuers (the authorization servers) are not the same as the resource servers. The resource servers only receives the JWTs in a request but there's no way for the resource servers to touch the database used by the authorization servers. Side note: If you eventually need to support refresh tokens, i.e. the JWTs that you hand to the clients will need to eventually expire, then you can store the refresh token in a database. Refresh tokens are not the same as JWTs (access tokens). The complexity to support refresh tokens will increase.
Local storage is not where you store passwords, but it can be used to store JWTs. For that very reason, a JWT must and should expire after a certain time.
Not sure what you mean by saying you check both client side and server side. When the client needs to access a resource (again it's fair to assume that the resource server might not be the same as the authorization server), the only thing that the resource server is passed is the JWT. Anyone can decode a JWT. For example, try to paste your JWT on this site http://jwt.io/. That's why a JWT should not contain any sensitive data. But if the resource server knows the secret that the authorization server uses when it encode the JWT, the resource server can verify the signature. Back to your third bullet, that's why it's OK to store the JWT in local storage of the client.
Update I'm updating this to answer to some of your questions in the comment box.
User clicks on 'Login' button triggers the Angular controller to post a request to the server, something like:
$http.post(url, {
username: $scope.username,
password: $scope.password
}).success(function(res) { ... })
Server receives the POST request, it checks username/password, then it generates a JWT, and sends back to the browser. Note that it does not have to save the JWT to the database. The code would be something like
var payload = {
sub: account.username,
exp: moment().add(10, 'days').unix()
};
var token = jwt.encode(payload, "secret");
res.status(200).json({
token: token
});
Back on the client side, in the success() callback above, now you can save the JWT in local storage:
.success(function(res) { $window.localStorage.setItem('accessJWT', res.token) })
The user is now authenticated. Now when user wants to access a protected resource, user don't have to provide username/password. With the JWT which can be retrieved from local storage, the client can now put the JWT in the Authorization header of the request using the bearer scheme, and sends the request to the server. In code, it would like:
headers.Authorization = 'Bearer ' + token;
The server receives the request. Again, this server receiving this request does not have to be the same as the server which generates the JWT above. The 2 servers can be in 2 different continents. Even if you save the JWT above, that does not do any good to this server which can not access the database where the JWT is stored. But this server can pull out the bearer token from the header of the request, validates the token and carries on with the normal tasks.
Hope this helps.

You do not want to store the JWT in mongoose because it appears in headers when logging in. You first generate a token then hash it using a module like crypto.
There are different ways to do this and they all use Passport which handles the tokens. Here's an example project Satellizer
I would recommend you generate the angular-fullstack project. Then go through the server/auth folder and the client/account folder. You will see how to securely handle authentication in a MEAN based app.