I am trying to find out what the safest way to store data for use when the user clicks on a button.

I know that you can store data in attributes(either the value attribute or a data- attribute) of the button tag like so:

<button type="button" value="1" data-value="1">Click me!</button>

But the problem with this is that the user(probably really only advanced users) can manipulate the value with firebug or some other app and THEN click the button and send over different data. I fully understand that I need to check the input before I try to do anything with the sent data.

I also found out that I could use jQuery's .data() to attach data to dom elements, which seems a bit more useful. I'm not exactly sure how the data is stored, but I assume its harder to manipulate.

What got me really interested in this question was when I was looking through Soundcloud's code in firebug, I saw that none of the "like" buttons had data attached to the buttons. I tried deleting/manipulating elements/data and the buttons still worked. So it got me thinking that they are probably using a similar process to what jquerys data() is doing.

I just want to know if there is a safer way to store data or a way so that the user can't manipulate the data before clicking the button.

I am trying to find out what the safest way to store data for use when the user clicks on a button.

I know that you can store data in attributes(either the value attribute or a data- attribute) of the button tag like so:

<button type="button" value="1" data-value="1">Click me!</button>

But the problem with this is that the user(probably really only advanced users) can manipulate the value with firebug or some other app and THEN click the button and send over different data. I fully understand that I need to check the input before I try to do anything with the sent data.

I also found out that I could use jQuery's .data() to attach data to dom elements, which seems a bit more useful. I'm not exactly sure how the data is stored, but I assume its harder to manipulate.

What got me really interested in this question was when I was looking through Soundcloud's code in firebug, I saw that none of the "like" buttons had data attached to the buttons. I tried deleting/manipulating elements/data and the buttons still worked. So it got me thinking that they are probably using a similar process to what jquerys data() is doing.

I just want to know if there is a safer way to store data or a way so that the user can't manipulate the data before clicking the button.

• javascript
• jquery
• dom
• data-storage

• 1 I dont thing it is an issue storing data in data-value. Because in clientside where ever you store data there is a way to manipulate it. – abs Commented Jul 23, 2015 at 20:42
• @abs I see. I didn't know that. So I really only can just validate input before hand huh? – chasethesunnn Commented Jul 23, 2015 at 20:52
• 2 Better alternative: store it on back-end and use client-side a (hashed) id. Or, use more (encoded) data client-side, but validate always back-end side! – schellingerht Commented Jul 23, 2015 at 20:53

5 Answers 5

Consider this function:

function setupPrivateData(element) {
  var private = 1; 
  element.setPrivate = function ( d ) { private = d; }
  element.getPrivate = function ( ) { return private; }
}

When called with some DOM element it will add two methods to it: .setPrivate(val) and .getPrivate().

These are the only methods that will allow you to access and modify that private variable associated with the element.

The user can always manipulate data. Nothing stops an advanced user to access object properties or call a jquery.data() on their own.

Something you could do in vanilla js would be:

    var div = document.getElementById("test");
    div.something = "hidden value";
    
    div.addEventListener("click", function() {
        alert(this.something);
    });

<div id="test">click me</div>

The best way would to be a serverside verification if the sent data is valid or not.

Besides that, you could try to wrap your code in an anonymous function to deny the user access to the object:

(function() {
    var data = {};
    data.something = "test";
})()

But even that fails as soon as the user manipulates your files and adds for instance a debugger statement.

You can obfuscate your javascript but the only validation has to be done on your server. For example, I tried to get the weather from theweathernetwork. They have hidden their API call using multiple files and callbacks. In my opinion, it's just more challenging (funnier) if you want to reverse-engineer their site.

Javascript can't be secure. Never trust user input

If you are logging button clicks, the safest way to keep track is to save and validate on the server side.

For example, when you click a like button on Soundcloud, it makes an HTTP request to Soundcloud's server, records that you clicked the button, and marks it as a favorite. This way, if the same user clicks the button anytime in the future, it can check before incrementing the number of favorites.

The number displayed in the button is also pulled in from the database when the view is rendered.

This is a huge topic, and you have a lot to learn, far too much for a ment here. Anything "stored" in an attribute in the HTML source is absolutely not secure, it can be changed very very easily.

The most mon way of dealing with this would be to use a cookie, but even with some effort these can be manipulated.

If security is important, find some way of identifying your users (possibly by IP, but even that isn't fool proof!) and keep the data on your server, linked to a user ID which can be retrieved after the button is clicked.