I am hosting a simple website that does nothing more than to call an API when a button is clicked. The API im calling (Home assistant) requires the password to be included in the header. This works fine when testing, but how do i do this in a secure manner?
My ajax call to the API currently has the password in cleartext, and can be viewed by anyone who inspects the .js file.
function ToggleAPI(){
$.ajax
({
type: "post",
url: "https://exampledomain.org:8123/api/services/switch/toggle",
dataType: 'json',
headers: {
'x-ha-access': 'MyPasswordThatCanBViewdByAnyone',
'content-type': 'application/json'
},
async: false,
contentTtpe: 'application/json',
data: JSON.stringify( {
"entity_id": "SomeId"
}),
success: function (data){
console.log("Sucess",data);
},
error: function(err){
console.log("Error",err);
}
});
}
The API is running on the same computer as the web-server hosting the site. (The setup is raspberry pi running Home Assistant, and a NGINX server hosting the website)
What is the correct way of calling the API and provide the password, without having it in the .js file?