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?

Elliott · Accepted Answer · 2015-10-23 13:40:59Z

3

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.

answered Oct 23, 2015 at 13:40

Elliott

2,2551 gold badge21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Griffith · Accepted Answer · 2015-10-23 13:53:59Z

1

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.

answered Oct 23, 2015 at 13:53

Griffith

3,2171 gold badge19 silver badges30 bronze badges

Comments

M92 · Accepted Answer · 2015-10-23 13:48:34Z

0

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

answered Oct 23, 2015 at 13:48

M92

664 bronze badges

Collectives™ on Stack Overflow

AngularJS API token

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related