How to process sensitive data in single page apps

Question

I need to understand and maybe ideas about single page apps.

I want to create a project, i'll do it with MVC. I also want to use AngularJS for client side programming.

I know that AngularJS is good for single page applications and when working with SPAs you send your data to API to process. But data sent from Angular is visible to user and open to be manipulated.

I don't want users to be able to see any data or access to the API from the internet. Witch way i should follow?

I'm thinking about keeping sensitive user data in MVC controller. For example let's say user Id is very sensitive for my project. If i keep user id in javascript variable, when i'm sending it to API with some command user will able to change the id and manipulate the system. But if i keep user-id in MVC controller, via user authentication, and send request to my MVC controller then the user won't be able to change it. But i know this is not the best way of doing things, there must be a more clever way.

I'll be glad if someone can explain how this things works in SPAs or when you use Angular and MVC together.

Answer 1

This won't work, you can't prevent user from tampering the data, crafting custom request and doing whatever she wants at her side.

What you should do is to never trust upcoming data - which means validate every incoming id twice, once when you produce it and then when it comes back. Either it comes plain and you verify if it's legal or you encrypt it so when it comes back you decrypt it.

Some data can be stored at the server side, the id you mention is such example. This way user never sees the data, what you pass is the session id which is a long random value, rather impossible to craft. This approach comes with the cost of server side resources that are used, the more users the more resources at the server stored between requests.