从JavaScript调用API的安全方法？

Question

I'm using flask to build my API. I've a tornado server in front of flask which takes care of requests. I'm using HTTP basic auth in Flask like this:

auth = HTTPBasicAuth()

@auth.get_password
def get_password(username):
    if username == 'uname':
        return 'password'
    return None

And this is how I'm calling the API from my Javascript:

$.ajax({
            url: api_url + 'customer',
            type: 'GET',
            dataType: 'json',
            async: false,

            headers: {
                "Authorization": "Basic " + btoa(uname + ":" + password)
            },

            data: {start: start_date, end: end_date},
            success: function(result) {
                data = result.results;
            }
         });

I realize that this isn't exactly secure (since the front end JS file has "username" and "password" in it) so my question is how do I make it secure? What's the correct way to make API requests?

Answer 1

You cant avoid sending your password this way and it's fine. You just need to take reasonable precautions about how those credentials are handled. Make sure you are not saving the password in cookies / localStorage.

Make sure the uname and password variables are not hard-coded into the source code. Those should be passed by user input via form.

As long as the password is only in memory, you should be safe if you protect yourself from XSS attacks.

I also strongly encourage you to use HTTPS connection to the server.