How do I verify the user with AJAX after user logined?

Question

I'm totally new to make a website with javascript AJAX. I want to provide every experience on my website with one domain(like Facebook), thus I made every page-changing method with javascript AJAX. At first, when you visit my website, you have to log in, after that it turns to the main page and you can go to several menus with clicking button which triggers page-changing method.

The problem what I faced is.. I've recently seen someone typed javascript code into the console to delete all of his(or her) photos on Tumblr instead of clicking all of that. The idea hit my head.

Every page-changing method in my website also can be called without login. Someone can input page-changing javascript code in the console without login and see the contents of pages.

The first idea came to my head to prevent this situation was, to send id/pw every time when I make a post request to the server and everytime server gets the request, server checks the id/pw to assign the browser to change page. For instance, when a user wants to go to menu A, he(or she) has to send his(or her) id/pw to see the content of menu A.

I thought this is such a bad idea. As I guess it will result overload in server CPU when the server always has to check id and pw(sorry, I don't know well about server CPU and process, this is just my supposition). So I guess there is another way to verify the user and their requests without sending id/pw every time.

Does anyone know about that? Or should I check id/pw with every post requests?

Answer 1

Yes, on stateless scenarios you should send some client identification like a token and verify on the server. Don't worry about the performance :)

You could take a look to JWT: https://jwt.io/

Answer 2

To answer you, you are talking about Cross Site Scripting. Let me first point you to some documents in order to make you aware of what you are dealing with:-

Its called Cross Site Scripting using which a user on the client side inject script in your website and change the different stuff on it.

https://en.wikipedia.org/wiki/Cross-site_scripting

Now to deal with such things there are remedies as following:-

1. CSRF Token
2. JWT

Both of them work in somewhat identical way but there are data and payload carrying capacity and encryption involved in JWT and I recommend that. This is a very known problem in the community and is also pretty old.

On the other hand I will also recommend you to do a data sanitization before storing it into your database. Someone can easily input some JS in your site and you can be defaced in no time.

Have a look at this Sanitizing user input before adding it to the DOM in Javascript

Last but not the least. Stop exposing the functions in the Global level while writing JavaScript. Stop creating global variables and functions and rather use closures.

(function(){
 var a =10;
 var b = 20;
 
 function add(msg){
  console.log(msg)
  return a+b;
 }
 
 add("I am calling from Inside the self executing function");
})();

 add("I am calling from outside the self executing function");

Have a look at the code above and how it protects that add() method to be called from outside.

Hope this answers your questions.