[FIXED] How to hide credentials when call an API login via Axios in Vue.js 3?

Issue

I am a newbie in Javascript and Vue.js. Try to learn more about it. Now I will be facing a problem when calling an API login that will display a password in the request payload.

I was wondering it does not secure, right? And if it was correct. How to hide it from the browser?

Anyone please help or suggest to me.

Solution

This is a pretty heavy topic and the question is not very specific, so I'll make some assumptions along the way.

calling an API login that will display a password in the request payload

I suspect you mean that if you're looking into the requests in the browser dev toolbar, the password is seen.

If this is the case, this is expected and can't be 100% mitigated. I've known people to assume that this means that this means that the data is not encrypted and develop custom solutions to obscure the sensitive data. The thing to keep in mind though is that the browser already does the encryption for you as long as you use https. The encryption happens after the request leaves your browser, so you're not seeing it as encrypted, but it travels to the designated server in a way that hides the content for anyone in the middle. If you add some additional encryption system, you're adding complexity and as long as you're passing the key as-well, the "man in the middle" has access to that too. The endpoints within the target server are also encrypted, so you could even use GET to pass sensitive information without anyone between your browser and server knowing what it is, but don't use GET, since POST has additional benefits like not storing the values in your url cache and the server is less likely to be storing the data in the logs.

• When using https properly, your data will be encrypted between browser and server.
• You should be using POST requests for sending sensitive data
• Avoid adding custom encryption on top of https. It will add more complexity than security.

There's also some considerations around storing the token in LocalStorage vs cookies. The final decision on which is better is inconclusive, but as long as proper precautions are taken, they can both be secure (though I think cookies can be more secure, but only if you make them inaccessible by js, so it makes working with them in context of an SPA harder)

Answered By - Daniel

Answer Checked By - Marie Seifert (PHPFixing Admin)