CODEWITHSUNDEEP
javascriptsecurity
ryanzec
ryanzec

Reputation: 28030

Security in JavaScript Code

I am starting to build/design a new single page web application and really wanted to primarily use client-side technology (HTML, CSS, JavaScript/CoffeScript) for the front-end while having a thin REST API back-end to serve data to the front-end. An issue that has come up is about the security of JavaScript. For example, there are going to be certain links and UI elements that will only be displayed depending on the roles and resources the user has attached to them. When the user logs in, it will make a REST call that will validate the credentials and then return back a json object that has all the permissions for that user which will be stored in a JavaScript object.

Lets take this piece of javascript:

// Generated by CoffeeScript 1.3.3
(function() {
  var acl, permissions, root;

  root = typeof exports !== "undefined" && exports !== null ? exports : this;

  permissions = {
    //data…
  };

  acl = {
    hasPermission: function(resource, permission, instanceId) {
      //code….
    }
  };

  root.acl = acl;

}).call(this);

Now this code setup make sure even through the console, no one can modify the variable permissions. The issue here is that since this is a single page application, I might want to update the permissions without having to refresh the page (maybe they add a record that then needs to be added to thier permissions). The only way I can think of doing this is by adding something like

setPermission: function(resource, permission, instanceId){
  //code…
}

to the acl object however if I do that, that mean someone in the browser console could also use that to add permissions to themself that they should not have. Is there any way to add code that can not be accessed from the browser console however can be accessed from code in the JavaScript files?

Now even if I could prevent the issue described above, I still have a bigger one. No matter what I am going to need to have the hasPermission functionality however when it is declared this way, I can in the browser console overwrite that method by just doing:

acl.hasPermission(resource, permission, instanceId){return true;}

and now I would be able to see everything. Is there anyway to define this method is such a way that a user can not override it (like marking it as final or something)?

Something to note is that every REST API call is also going to check the permissions too so even if they were to see something they should not, they would still not be able to do anything and the REST API would regret the request because of permissions issue. One suggestion has been made to generate the template on the server side however I really don't like that idea as it is creating a very strong coupling between the front-end and back-end technology stacks. If for example for whatever reason we need to move form PHP to Python or Ruby, if the templates are built on the client-side in JavaScript, I only have to re-build the REST API and all the front-end code can stay the same but that is not the case if I am generating templates on the server side.

Upvotes: 1

Views: 347

Answers (3)

gpvos
gpvos

Reputation: 2802

In modern browsers, you can use Object.freeze or Object.defineProperty to make sure the hasPermission method cannot be redefined.

I don't know yet how to overcome the problem with setPermission. Maybe it's best to just rely on the server-side security there, which as you said you have anyway.

Upvotes: 0

Willem Mulder
Willem Mulder

Reputation: 13994

Don't ever trust Javascript code or the front-end in general. People can even modify the code before it reaches your browser (sniffers etc) and most variables are accessible and modifiable anyways... Trust me: you are never going to be safe on the front-end :)

Always check credentials on the server-side, never only on the front-end!

Upvotes: 2

Joachim Sauer
Joachim Sauer

Reputation: 308001

Whatever you do: you have to check all the permissions on the server-side as well (in your REST backend, as you noted). No matter what hoops you jump through, someone will be able to make a REST call that they are not supposed to make.

This effectively makes your client-side security system an optimization: you try to display only allowed operations to the user and you try to avoid round-trips to the server to fetch what is allowed.

As such you don't really need to care if a user can "hack" it: if they break your application, they can keep both parts. Nothing wrong can happen, because the server won't let them execute an action that they are not authorized to.

However, I'd still write the client-side code in a way that it expect an "access denied" as a valid answer (and not necessary an exception). There are many reasons why that response might come: If the permissions of the logged-in user are changed while he has a browser open, then the security descriptions of the client no longer match the server and that situation should be handled gracefully (display "Sorry, this operation is not permitted" and reload the security descriptions, for example).

Upvotes: 4

Related Questions