Question

I’m writing a web application where I need to pass some user data to the JS application on page load. I’ve identified 3 different approaches, and am wondering what is the best practice with regards to this. The data is not particularly sensitive, but it would be best it is somewhat more secure compare to others.

1. Asynchronously load the data

Using something like $.ajax(). I don’t like this approach because it usually leads to the whole “loading” phenomenon and I would like to avoid. Have the data ready than make a separate call.

2. Burn the data into the page.

This can be achieved by doing something like this

<script>
    var userdata = { somekey: somevalue }
</script>

3. Make a request using script tags

This can be achieved by doing something like this

<script src="server/getdata"></script>

I understand that this is somewhat like the 1st approach since it makes another get request to the server.

My question is, is any of the 3 approaches above different, or better in terms of security. I understand that all 3 methods are not particularly secure, especially since it can be easily sniffed either way, but is any of the above method a better practice than the other 2, and why?

Answer 1

Of the ones you’ve given, 2 is best, for just the reasons you said. However, I would not add a new global for it. Rather, I would do:

<script type="text/javascript" src="application.js"></script>

to create someGlobal (among other things) then:

<script>
    someGlobal.userdata = { somekey: somevalue }
</script>

Another couple methods with the same advantages are:

1. data attributes. These are the data- ones. You can put arbitrary data, associated with particular elements (sometimes particular elements make sense; otherwise, you can use body).
2. Hidden form fields.