Question

I decided to use knockout.js for my web application and have some concerns regarding security.

The flow of data is as follows:

• user requests controller via url
• controller gathers together required information, sends to view as json string
• json string is saved to dom to allow my javascript code to access it
• json is loaded into knockout view model inside the $(document).ready

My issue is that the json string is clearly viewable by users by just clicking ‘View Source’
and this worries me because I’m aware this can easily be changed client-side but I’m not
fully sure of the implications.

Here is some example code to illustrate my point. First, the controller:

 function view($id = null)
 {
    //other processing...

    $data = array();
    $data['json'] = $this->get_profile_json($id);
    $this->load->view('profile_page',$data);
 }

The profile page view

<script type="text/javascript">
    window.profile_json = "<?php echo $json; ?>";
</script>
<script type="text/javascript" src="<?php echo site_url('assets/js/profile_page.js'); ?>"></script>
<!-- The profile page below... -->

The profile page javascript

var vm = new ViewModel(profile_json); //load the json into view model
ko.applyBindings(vm);

Now I understand I can achieve the same goal by loading the json from the javascript code just before
creating the view model, using $.getJSON for example.

However, someone with a developer tools extension on their browser could also see (and possibly edit?)
this data too. This is a particular problem is some of that data contains things like permissions flags
and so on.

My question is, how do you ensure data passed down to your view model is unable to be tampered with?

Answer 1

There is no way to ever guarantee the safety of your information from the client side. This is why it is always important to do server side checks on the information, and then send back your response on whether the information is usable or not.

For some security checks you should use the following:

1) Strip_tags($_POST['key'])
2) Check to see if the value is numeric (if its a number)
3) Check to see if it only has alphabet and numbers (if this is all that's allowed)
...and so on

The client side information to be passed to your back-end can always be tampered with, which is why it is important to lock it down as much as possible and if any information does not appear to be valid then you should immediately throw an error to the client and ask them to try again 🙂

Assuming the back-end data is safe, then the front-end data should never have a problem.

Hope this helps!