Security in JavaScript Code

Question

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.

You can't be really secure only with client side security code, you need to make some kind of auth token mecanism (get one from server) and check it on the server when you request secure ressources. — Guillaume86
– Guillaume86, Commented Sep 5, 2012 at 13:12
Saying this without reading your question - just food for thought - security and javascript typically don't go hand in hand. It's equivalent to you putting a Do Not Disturb tag on your door hoping that no one walks in, but they can still do that. — Duniyadnd
– Duniyadnd, Commented Sep 5, 2012 at 13:13
The only way to keep a login secure is to do it server side. Correct me if I am wrong. — starbeamrainbowlabs
– starbeamrainbowlabs, Commented Sep 5, 2012 at 13:16

Joachim Sauer · Accepted Answer · 2012-09-05 13:13:23Z

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).

Nathan Hughes · Accepted Answer · 2012-09-05 13:24:40Z

2

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!

edited Sep 5, 2012 at 13:24

Nathan Hughes

96.7k21 gold badges192 silver badges288 bronze badges

answered Sep 5, 2012 at 13:14

Willem Mulder

14.1k4 gold badges42 silver badges64 bronze badges

Comments

gpvos · Accepted Answer · 2012-09-05 13:39:15Z

0

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.

answered Sep 5, 2012 at 13:39

gpvos

2,8021 gold badge18 silver badges24 bronze badges

Collectives™ on Stack Overflow

Security in JavaScript Code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related