embedded JavaScript on the client side security

Question

1) One way to put javascript on the client side is EJS eg

    <h1> <%= title  %> </h1>

where title is a variable.

2) Another way is to use back ticks and insert html or append etc using a library like jQuery

    $('h1').html(`{obj.title}`);

3) A third way is to use react js esx, so import all the files on the client side if you are going down that route and add an variable as follows:

     <div id="holder1"></diV>

     var title = React.createClass({
                      render: function(){
                         return(
                             <h1 className="title1">{this.props.title1}<h1>
                        )
                      } 
                 });
     ReactDOM.render(<title
             title1: "Hello World"  />,
             document.getElementById("holder1")
     );

My question is how does react.js handle security so that the javascript cannot be manipulated such as a password on the client side (Not server side) and for 1-2 how can you enforce data hiding and prevent someone from changing the values. Can this only be done using server side react.js using node.

Let me clarify: How does React.js and other javascript libraries make the front end more secure... not just passwords... that can be handled with bcrypt hashes and https.

Answer 1

It's not entirely clear what you are asking, but as a very general rule, anything in the client can't be trusted.

Input posted to the server from the client can't be trusted, and should not be later displayed without proper precautions.

Web security is a huge topic. So I suggest you break your question down into smaller chunks and really identify what you are trying to ask.

Regarding React - it's not doing anything special around passwords. Its the responsibility of the backend service layer to protect from malicious input - there is a very real chance that a React component would send back crappy/malicious data. (not Reacts fault, nor is it the intent of React)

The only thing React has in this regard is {} vs dangerouslySetInnerHtml , but again, thats not going to protect passwords or the like.