How to communicate securely (with proper authentication) to a 3rd party api on the client?

Question

Consider the usecase in which a website uses a paid analytics package to track user behavior on said site.

In that case the website needs to securely communicate with an API of the analytics provider (all clientside through javascript).

How can this be done securely? To my understanding of the various authentication protocols a secret token is always needed to setup a secret-handshake between client and server. Using oAuth1a this is all packed in HMAC, etc. but still the secret must be available.

Given that:

• the secret code must be available to the client in javascript to do authenticated calls
• javascript on the client can obviously be inspected by anyone

How would you keep the secret safe? It seems you can't, but how then do all these paid 3rd party services which communicate through clientside JS keep things secure?

Answer 1

As stipulated by the referenced answer below, it seems Google Maps API is doing this with the HOST header which apparently (?) can't be spoofed.

How does Google Maps secure their API Key? How to make something similar? .

Thus, having a sever-side map which uses a map of <apikey -> allowed HOST headers> would do the trick.