AngularJS API token

Question

I want to build something with dribbbble's API.

As I'm reading the API docs I need a HEADER set to my API_KEY.

 var token = 'MY TOKEN HERE';

 $http({
                    method: 'GET',
                    url: 'https://api.dribbble.com/v1/my_user',
                    headers: {
                        'Authorization': 'Bearer ' + token
                    }
                }).success(function() { ... });

Its possible to hide the token, preventing users to see my API KEY in page source?

Can someone explain me whats the best practice using API KEYS in $http?

Answer 1

Your best bet is likely going to be to create your own web service and call the dribble api server side. There is simply nothing you can do to secure information like that client side.

It's possible that dribble validates your api requests as a combination of hostname & key so it may not be is significant of an issue as you perceive it to be.

tl;dr - Nothing is secure client side.

Answer 2

There is nothing you can do to completely protect your API key if it's somewhere in your JavaScript. Which is why a lot of third-party services ask you to provide the domain from which you will call their API so that they can validate the key only if it originates from the domain you registered.

The right way to protect your API key is to create a server-side wrapper that will make the request, and call that from JavaScript. And even having the API keys hardcoded in your server-side code is a bad idea - the best practice is to set them as environment variables.

Answer 3

I usually use this method when I need to create custom headers in Angular JS. At the beginning of a Module using $http I set my headers for get and post like this.

$http.defaults.headers.get = { 'apikeyName' : 'yourkey' }
$http.defaults.headers.post = { 'apikeyName' : 'yourkey' }

These headers will then be send everytime you use $http in that module and you won't need to specify them each time.

Its possible to hide the token, preventing users to see my API KEY in page source? No, your Angular JS is client side so every client can see the key. (see answer above)

Kind regards