How to hide Axios request data in Javascript (JS Node)

Question

Hello,

I’m developing an application and setting up a user registration screen, but I’m wondering if it’s possible to hide the data that Axios is requesting for the API. My Javascript code, which I implement by EJS is as follows:

filing cabinet signup.esj that includes Javascript on the page:

<script src="<%= public_path + '/js/wp-signup.js' %>"></script>

filing cabinet wp-signup.js who is responsible for making the POST request and saving the data to Mongodb:

import axios from 'axios';

class App {
    constructor() {
        this.nameEl = document.getElementById('register-name');
        this.lastnameEl = document.getElementById('register-lastname');
        this.emailEl = document.getElementById('register-email');
        this.passwordEl = document.getElementById('register-password');
        this.agreeEl = document.getElementById('register-agree');

        this.formEl = document.getElementById('register-form');

        this.successMessage = document.getElementById('register-success');

        this.events();
    }

    events() {
        this.formEl.onsubmit = () => this.makePostRequest();
    }

    async makePostRequest() {
        event.preventDefault();

        await axios({
            method: "post",
            url: 'http://localhost:3000/users',
          },
            data: { name: this.nameEl.value, lastname: this.lastnameEl.value, email: this.emailEl.value, password: this.passwordEl.value }
        })
        .then( (response) => {
            this.successMessage.innerHTML = response.data.message;

        })
        .catch( (error) => {
            this.errorMessage.innerHTML = error.response.data.error;
        })
    }
}

new App();

There’s no problem with the code, what I’d like to know is:

If the user accesses the developer tab (F12 in Chrome) and goes to

SOURCES > PUBLIC > JS > wp-signup.js 

which is the file where the above code is, it will see all the process I do for checking up the POST request, besides the payload of the request, is there any way to hide it from the user ? There is a more advised way to do this type of operation using NodeJS/EJS/JavaScript/MongoDB ?

Answer 1

It is impossible to hide HTML, CSS or Javascript from the client. The most you can do is use minification tools (as suggested by @Costamilam) or obfuscation. Even so, if the code is in the client, none of these options are really effective at hiding the code, since if a person really wants to see how the code works, they will succeed. However, techniques such as minification are rarely used as a way to obfuscate code, but rather to improve the performance of a resource (most often Javascript or CSS).

Thus, it is not ideal to worry about "hiding" the code used in the front-end, since this may even be a sign that there is some problem in it. You must focus on in making it safe. That’s all.

In addition, many people seek to "hide" the code to avoid copies. However, everything, code or not, can be reproduced (better, inclusive), so I also don’t think this is a good reason to hide the code.

Obviously, there are cases where it is really necessary to hide the code. For example, a code from back-end, where you need to keep user keys from Apis, passwords and service credentials such as the database. But like that kind of information is not used in the front-end, you really don’t need to worry. :)

It is also worth mentioning that even if it were possible to hide the Javascript code that sends the data to back-end, it would still be possible to verify the payload of the data sent through the tab "Network" of the developer tools, which is able to analyze whichever request made by your website.

I captured the image above from editing this reply, analyzing an XHR request, in the tab "Network" of the developer tools. As you can see, it is possible to inspect the entire payload of data sent and received, although in the image I ampliei only a small part of this data for security purposes.

In short, we should focus on security guard of your website, and not in hiding the code of front-end. Use HTTPS, for example, it is infinitely more important than hiding the code, since an HTTP site can easily be "intercepted" by other users on the network.

Answer 2

Not...

If you need to pass all this data from the client to the server in order to register the user (or do anything else), the client will at some point need this data, there is no way to hide it or remove it (if remove, the server will not receive it)

The same goes for Javascript code, the client needs all this code to render the page correctly and all user actions work as expected

Doesn’t solve it, but it helps...

You can minify and uglyficar, this will make you almost unreadable to human eyes, but the computer will continue to understand as if it were the original. This is applied to both Javascript, HTML, CSS code and the content of requests and responses, the names and values of costly headers and the body can be reduced, but this implies changing the corresponding parts in your API

Example of Javascript minification and uglyfication:

var button = document.getElementById('myButton');

function createUser() {
    // ...
}

button.addEventListener('click',createUser);

It is transformed to:

var a=document.getElementById('myButton');var b=()=>{}a.addEventListener('click',b)

The HTML and CSS code is similar

As you can see, spaces and line breaks are removed, variable names are changed to become shorter, among other things. The result varies according to the tool (Gulp, Grunt, rollup.js, etc) and settings used

In the request it is unusual to use expensive headers, but you can do the same in the name of Javascript variables, changing for smaller names. In the body, usually, if you work with the JSON format in the case of Apis, you can change the name of the properties of the sent object equal to the previous case (the equivalent goes to other formats)

But having your code and traffic data visible to your user is a problem?

How many of your users will search for the application’s source code? It’s almost always none, so there’s nothing to worry about. Also, it will not make your code safer, if it is unsafe, it will not solve, although there is the technique of Obscurity Security or security by obscurity, in that case, it would make no difference