Secure header or cookie with Angular 1.6 interceptor

Question

I have this $http request interceptor

app.config(function($httpProvider) {
  $httpProvider.interceptors.push(function() {
    return {
      request: function(req) {
        // Set the `Authorization` header for every outgoing HTTP request
        req.headers['cdt_app_header'] = 'tamales';
        return req;
      }
    };
  });
});

Is there any way we can add a header or cookie to every $http request, but keep the header value secure / not visible with JavaScript?

We can add an obfuscation layer with this header to prevent easy access to our API endpoints, but I am wondering about a more truly secure solution.

Cookies are used for secure sessions, and these are more secure because they cannot be accessed with JavaScript. Say we have a user who can do this request with front-end code:

GET /api/users

we don't really want them to be able to make a simple request with cURL or a browser without an extra piece of information. The cookie we give them will give them the ability to use the browser address bar to make a GET request to /api/users, but if we add the requirement to have another cookie or header in place, then we can prevent them from accessing endpoints that are authorized for, in a format that we don't really want them to use.

In other words, we want to do our best to give them access, but only in the context of a front-end Angular app.

Answer 1

I can't add a comment because of my rep but what are you doing on the back-end to authorize users? If the cookie is signed and contains user permissions it shouldn't matter that the header is visible in the client as it will also be verified on the back-end API call.

Answer 2

in this sample i used HttpRestService to get RESTful API, read this article

at first we create a service to get our configs in this sample is getConfigs

we use getConfigs in the app.run when application is started, after get the configs we set them all in the header as sample.

after that we can get userProfile with new header and also secure by call it from our controller as you see.

in this sample you need to define apiUrl, it's your api host url, remember after logout you can remove the header, also you can define your configs dynamically to make more secure for your application.

HttpRestService.js github link

app.js

var app = angular.module("app", ["HttpRestApp"]);

app.service

app.service("service", ["$http", "$q", "RestService", function (http, q, restService) {
    this.getConfigs = function () {
        var deferred = q.defer();

        http({
            method: "GET",
            async: true,
            headers: {
                "Content-Type": "application/json"
            },
            url: "you url to get configs"
        }).then(function (response) {
            deferred.resolve(response.data);
        }, function (error) {
            deferred.resolve(error);
        });

        return deferred.promise;
    }

    var api = {
        user: "User" //this mean UserController
    }

    //get user with new header
    //this hint to your api with this model "public Get(int id){ return data; }"
    //http://localhost:3000/api/users/123456
    this.getUserProfile= function(params, then) {
        restService.get(params, api.user, true).then(then);
    }
}]);

app.run

app.run(["RestService", "service", function (restService, service) {
   var header = {
      "Content-Type": "application/json"
   }

   //get your configs and set all in the header
   service.getConfigs().then(function (configs) {
      header["systemId"] = configs.systemId;
   });

   var apiUrl = "http://localhost:3000/";

   restService.setBaseUrl(apiUrl, header);
}]);

app.controller

app.controller("ctrl", ["$scope", "service", function ($scope, service) {

    $scope.getUserProfile = function () {
        //this is just sample
        service.getUserProfile({ id: 123456 }, function (data) {
            $scope.user = data;
        });
    }
   
    $scope.getUserProfile();

}]);