7

My site uses the Google Maps javascript API, so I'm using a "Browser key", which is plainly visible in my javascript to anyone who does "View Source".

Google's documentation on Browser keys in javascript apps (https://support.google.com/cloud/answer/6158862?hl=en&ref_topic=6262490) says: "Create and use a Browser key if your application runs on a client, such as a web browser. To prevent your key from being used on unauthorized sites, only allow referrals from domains you administer."

Unfortunately there are no instructions about how to implement what they say in that last sentence (restricting the domains for browser keys). I've been hunting around the menus and haven't been able to figure out how to do it.

The closest I've gotten is: In https://console.cloud.google.com I clicked on the hambuger and selected "API Manager," then clicked on "Credentials," clicked on the tab labeled "Domain verification." I have no idea if that's the right place to go to, but it's the only place that I found that mentions domains. While on that tab, I clicked "Add domain" and added a domain. But that didn't restrict the keys to that domain. I tested the Browser key on a different domain, and the key worked on that other domain.

Can anyone provide step-by-step instructions for how to make the Browser key only usable from one domain?

7

Google changes this around every now and then, and whenever they do I have to 're-find' where each of the settings are.

So you're not alone!

You're right that a browser key is essentially 'public' and should be limited by domain to protect it from being stolen. It's worth noting the worst that can happen if its stolen is that someone could use up your free API request limit (assuming you're not on a billing plan of course) and cause requests from your site to be denied. You could then remove the key and create a new one without too much trouble. But of course, it's much better to avoid this altogether!

To limit API requests to come from your domain(s) only, start at the Google API Console, then:

  1. Click the hamburger menu at the top left
  2. Click API Manager
  3. Click Credentials
  4. Select or create your project
  5. Click Create Credentials, then choose API key and Browser Key
  6. Enter the name for your key (this is just for you to identify it by)
  7. Under Accept requests from these HTTP referrers (websites), this is where you limit the key to your domain name - you can enter *.domain.com/* to cover anything on your domain.
  8. Click Create

If you're editing a key that you've already created, instead of step 5 and 6 above just click the name of the key, and you'll see the same field there ready for you to enter your domain name into.

The Domain Verification you found causes Google to check that you have already verified ownership of your domain in the Search Console. This allows Google to send hooks back to your domain which I imagine are required for some of the APIs (I'm not sure which ones as all I generally use is the JavaScript Maps API, which is fairly simple!)

  • 1
    Thank you! I can't believe I had to click the name of the key. I never would have guessed that clicking the key name would do something. – Mike W Jul 3 '16 at 4:55
  • 1
    At least as of the time of this writing the .domain.com/ form is not enough/working 100%. It is better to add two entries to cover all the possible scenarios like domain.com/* *.domain.com/* – Arthur Jun 7 '18 at 15:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.