Angular login visible in the request header

Question

Everybody, Good afternoon.

I need some help. My backend was written in nodejs and this one on IIS. My frontend is in angular and it’s still on my machine being debugged. My login page is working as expected, connecting smoothly. But when the application sends the request to the backend it is possible to get the username and password both via browser and using wireshark. How can I hide this information? Example: when we use the browser login box for this type of authentication, it does not leave visible login and password information.

my code:

login(username: string, password: string): Observable<User> {

     const body = { username: username, password: password };
     const headers = new HttpHeaders();
     headers.append("Authorization", "Basic " + btoa("username:password"));
     headers.append("Content-Type", "application/x-www-form-urlencoded");

     return this.http
               .post<User>(`${BASE_URL}/sign-in`, body, { headers: headers })
               .do(user => (this.user = user));
}

wireshark image after logging into the app:

Answer 1

To hide this information you need to install an SSL certificate in your backend. Certificate works by encrypting data between server and client.

The SSL protocol provides privacy and data integrity between two applications that communicate over the internet. This occurs by between the authentication of the parties involved and the encryption of the data transmitted between the Parties. Furthermore, this protocol helps to prevent intermediaries between the two ends of the communications obtain improper access to or falsify data that are being transmitted[...]. source: Wikipedia

There are various types and levels of SSL certificates as well as various certifiers.

A free, that including I use, is the Letsencrypt.

How to configure in nodejs: https://gist.github.com/davestevens/c9e437afbb41c1d5c3ab