Remove cookie from $http header in angular - angularjs

We use token authentication and send the token in Authorization header for each request.
But we store the token in cookie because it is used for multiple subdomains.
Angular $http will send cookie in request automatically. So I have duplicated string in Authorization and Cookie in the request header.
Is there a way to remove cookie for all $http request?
(We use Restangular. So perhaps this is possible by configuring restuangular?)

var cookies = $cookies.getAll();
angular.forEach($cookies, function (v, k) {
cookies.remove(k);
});
try like this.

Related

API call with JWT token and an ID in URL

I am working on an angular application, where a request is being sent to the express backend. With the request, I am attaching a JWT token in the header using an auth-interceptor. The API request URL is as follows:
http://localhost:3000/api/:userID/askQuestion
I am sending the userId in the URL and the JWT token in the header from Frontend.
But when I am sending any request the backend is not authorizing the route. NOTE: I am authorizing routes in the backend with the JWT token in the header. So when I am sending the request the auth-interceptor is not setting the auth-token in the header for the routes which contains an URL parameter.
It is working perfectly fine The routes which don't contain any URL parameter
You can try add custom header using the config method to every requests.
angular.module('myApp', [])
.config(function($httpProvider) {
$httpProvider.defaults.headers
.common['X-Requested-Url-Header'] = 'http://localhost:3000/api/:userID/askQuestion';
});

CSRF & CORS with AngularJS + Laravel

I'm working on an AngularJS webapp with a Laravel backend.
I want to enable CSRF protection with cross-domain requests. Is it possible?
$http reference in "Cross Site Request Forgery" says "The header will not be set for cross-domain requests"
Looking the Developer Tools logs I see that after the $http.post call the preflight request is sent (OPTION verb) and it has the XSRF-TOKEN cookies set, but the POST request has no cookies so I can't do:
$http.defaults.headers.post['X-CSRFToken'] = $cookies['XSRF-TOKEN'];
Any idea?
UPDATE:
#zeroflagL: I tried with
$http.defaults.headers.common.xsrfCookieName = 'XSRF-TOKEN';
$http.defaults.headers.common.xsrfHeaderName = 'X-XSRF-TOKEN';
And now in the Request headers of the POST I have:
xsrfCookieName:XSRF-TOKEN
xsrfHeaderName:X-XSRF-TOKEN
But the CSRF check is not passed (TokenMismatchException on the server).
I suppose that in the Request headers there should be the XSRF-TOKEN to work...
As zeroflagL said CSRF protection can't be applied to cross domain requests.
To reply to my question: no, it's not possible.

How to set $httpProvider default headers from my app config in AngularJS?

I'm trying to set my
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $cookie.auth_token;
in my .config section of my app, but it doesn't seem like I can access the document/cookies just yet? Is there a better place to set this?
I'm doing this because I'm storing my users auth_token in a cookie so they don't need to login every time they use my mobile app.
Thanks!
As described in $http docs:
... Angular provides a mechanism to counter XSRF. When performing XHR
requests, the $http service reads a token from a cookie called
XSRF-TOKEN and sets it as the HTTP header X-XSRF-TOKEN.
... To take advantage of this, your server needs to set a token in a
JavaScript readable session cookie called XSRF-TOKEN on the first HTTP
GET request
So if you set your CSRF token in cookie name XSRF-TOKEN then no adjustments are needed on Angular side. and your code should work as is.

AngularJS $http and cookies

I'm trying to implement authentication with ExpressJS' cookie sessions and AngularJS. The problem is that even I can get ExpressJS to send session cookies, Angular won't send them with subsequent requests.
I'm running backend server at 192.168.1.2:3000 and yeoman server at 192.168.1.2:3501 so is there a cross-domain issue here? I already did the normal CORS stuff with ExpressJS in order to get $http working correctly but I'm not sure how to get the cookies working.
Have you checked that your request is sent with the withCredentialsflag set to true?
In angular, this can be done by in the HTTP request configuration object, e.g
//...
$http.get(myUrl, {withCredentials: true})
//...
Or if you don't want to reconfigure it all the time, using $httpProvider:
myApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.withCredentials = true;
}]);
to get cookies working in angularJS you could follow this link
I maintain session variable in the backend (expressJS) and return it to the $cookies object in the frontend(angularJS).
So When i logout, it would delete the cookie in angularJS and the session variable in the backend.

Angular JS Verify CSRF Token in POST Request

I am using AngularJS with Rails. I have the following request which updates users in bulk.
$http{
method: 'POST',
url: $scope.update_url,
params: {selected_ids: userIds}
}
This cannot be a 'GET' request due to restrictions in the length of the URL (http://support.microsoft.com/kb/208427)
But for 'POST' request, we need to have a CSRF authenticity token in the header.
How can we set the CSRF Token to the post request header?
You can set http headers as explained in the $http service.
You can set it up globally:
$httpProvider.defaults.headers.post['My-Header']='value' (or)
$http.defaults.headers.post['My-Header']='value';
or for a single request:
$http({
headers: {
'My-Header': 'value'
}
});
Here is an important quote from Angular:
Cross Site Request Forgery (XSRF) Protection XSRF is a technique by
which an unauthorized site can gain your user's private data. Angular
provides following mechanism to counter XSRF. When performing XHR
requests, the $http service reads a token from a cookie called
XSRF-TOKEN and sets it as the HTTP header X-XSRF-TOKEN. Since only
JavaScript that runs on your domain could read the cookie, your server
can be assured that the XHR came from JavaScript running on your
domain.
To take advantage of this, your server needs to set a token in a
JavaScript readable session cookie called XSRF-TOKEN on first HTTP GET
request. On subsequent non-GET requests the server can verify that the
cookie matches X-XSRF-TOKEN HTTP header, and therefore be sure that
only JavaScript running on your domain could have read the token. The
token must be unique for each user and must be verifiable by the
server (to prevent the JavaScript making up its own tokens). We
recommend that the token is a digest of your site's authentication
cookie with salt for added security.
If you're wondering how to actually set a XSRF-TOKEN cookie value in Rails this answer has an implementation Rails CSRF Protection + Angular.js: protect_from_forgery makes me to log out on POST
I recently faced the same issue and adding the gem angular_rails_js solved it. To my understanding it creates for every rails controller a cookie with the rails CSRF-TOKEN that will be catch (default $http behaviour) by angular $http.

Resources