I am using the google maps api on my website and would like to use my API key, but I'm confused about how to keep it safe. I know that I could just hardcode the actual key right into index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=HARDCODED_KEY"></script>
But then it's right there for anyone to see when they view the source code for the site. I also don't want it to show up in the DOM if someone's viewing the site with a debugging tool, like Firebug.
I'm assuming that there is a way to store it in a separate file (probably outside my html/ directory) that I can source. If anyone could provide an example or comment on whether this approach would be relatively secure, I'd really appreciate the help. I've found other posts on this topic, but none that apply for this (relatively simple) case.
Just set the referrers, as mentioned in the documentation:
To prevent other applications from using your key and consuming your
quota, you can limit the IP addresses that can use your API key to
send requests:
Visit the Google Developers Console and log in with your Google
account. Select the project that was created for you when you signed
up. The project name will start with Google Maps API for Work.In the
sidebar on the left, select Credentials. Find the key you're using
under the Public API Access heading, and click Edit allowed IPs. Enter
the IP addresses from which your key is to be accepted, one per line.
You may also enter a subnet using CIDR notation (e.g. 192.168.0.0/22).
Also you may come up with this question after you set the referral, I think you'll find it useful.
Store the API in a text file. Then, use jQuery $.get() to retrieve it. Make sure the configure your .htaccess file to disallow direct TXT file access.
To load Google Maps API dynamically, use $.getScript() in your code, right before you need the map.
Google also recommends restricting API usage by referral and/or IP address.
Related
I'm going to make a project using the Google translate api and I'm thinking of uploading this project to a server and just sharing it with my friends. But unfortunately the Api Key that I will use in the project can be accessed clearly in the JavaScript file. This is a very bad situation. To prevent this, I have limited the Google Cloud Api and as far as I understand it is only allowed to be used on the links I allow. It cannot be used on other links. Now my main question is, is this method enough to protect Api from malicious people? Do I need to do anything else? Thank you in advance for your answers.
Best practice in these cases is to use .env files to keep data like API keys private.
You have to create a server for that which will perform OAuth and then send an API request to google.
You can get help about how to implement OAuth from this topic provided by google: https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow
If you send/attach your API key in frontend like javascript which is basically a frontend language then it can be used to:
Send fake requests which will use all of the bandwidth etc.
You should also consult the TOS.
On November 5th 2014 Google made some changes to the APIs terms of Service.
Like you I had an issue with the following line.
Asking developers to make reasonable efforts to keep their private
keys private and not embed them in open source projects.
That is however really only an issue if you are releasing the source code of your app as an Open source project for example.
If your just hosting this on a server then what you shoudl do is set up limitations for the api key adding_application_restrictions you can limit it so that the api key can only be used from your server and no where else.
I'm writing an app in JS that fetches Google Calendar events using Google Calendar API. I've already generated an API Key and Client ID - do I have to do something to try and 'secure' them? Their tutorial puts them directly in the JS file (https://developers.google.com/calendar/quickstart/js), but then I dig further into the dev docs (https://cloud.google.com/docs/authentication/api-keys#securing_an_api_key) and it says not to embed the API key into the code...but that could just be for paid API keys?
I'm writing this mini webapp for a class so I only need it to work for like 6 weeks. I'm hosting it via GitHub Pages, and it was the one that alerted me about the API Key when I pushed the code.
Bottom line - is it safe for me to embed the API key into the JS code that gets pushed to github and made publicly available (so I can have just a frontend and use GitHub Pages)? Or do I need to take some kind of preventative measures?
Thanks in advance!
Api key is only used for accessing public data. For example you could use it to access the Google Calendar public holiday calendars. That being said yes you should keep your api key secrete and not share it but google is aware that this is not possible with client side languages like JavaScript so i have never heard of anyone getting in trouble for leaking their api key by having it in a JavaScript application.
This warning is mainly means that you should not put it in a GitHub open source repository that anyone can download and then run. You must instruct people how to create their own.
That being said if you are trying to access private user data then you should be using Oauth2 to authenticate your users and this you can lock down to only your domain due to the need for a redirect uri. As you say you have created a client id i suspect that you have already done that. Apikey in the javascript code isnt strictly needed if you have added the client id for oauth2.
Currently, I'm trying to implement Google Map Autofill address functionality to get the address latitude and longitude on my website.
I've created a Google Maps JavaScript API key on Google Console and insert the API key in the script:
<script src="https://maps.googleapis.com/maps/api/js?key=[api_key]&libraries=places&callback=initAutocomplete"
async defer></script>
when I'm running the project in localhost, it's giving me the autofill suggestion addresses along with the latitude and longitude for the particular address which I've chosen.
But, when I'm trying to run the project on a live server it's giving me several errors. Fixed all the errors, but still, it's not giving me the result.
Tried for 5-6 days, tried different APIs, but the result is same.
Even I copied the code from https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform and inserted my API key, but nothing seems working.
Can anyone suggest what I need to do?
The error you get is indicating that the API key used has referrer restrictions, and the domain you are trying to use the API key on is not an authorized referrer.
It's possible that you may need to add asterisks for wildcards to your authorized referrers. For example your test link:
http://test.digiegeeks.com/gmap/
You should authorize something like:
*.digiegeeks.com/*
Or for your secure p4programming domain you mentioned, something like this:
*.p4programming.net/*
If you include asterisks as shown above as wildcards, do you still get the referrer error?
I hope this helps!
I am getting the error RefererNotAllowedMapError from some PC's when I load a page on my site.
RefererNotAllowedMapError
The current URL loading the Google Maps JavaScript API has not been
added to the list of allowed referrers. Please check the referrer
settings of your API key on Google Cloud Console.
See API keys
It works OK on FireFox from 3 out of four of the machines I have tested.
Generally this would mean that the domain is not added as a referer in my API console but it definitely is, and it definitely works on other machines.
Anyone else had this issue or able to provide some guidence?
Recreating the API key at console.developers.google.com fixed the issue for me.
Try to add all type of urls like:
http://stackoverflow.com/*
http://www.stackoverflow.com/*
*.stackoverflow.com/*
Definitely it will work.
Note the DOT at the beginning of the expression, it's a char!
*.stackoverflow.com/* // this will not work with http://stackoverflow.com and will allow for domains such as demo.stackoverflow.com
Replace above with:
*://stackoverflow.com/* // now it will cover all domain variation but not subdomains.
For me to use Places API I had to turn on Maps JavaScript API
This gives error because your Google map API key is not a browser key. Create new key as 'browser key'. This option is available when you create a new key.
I had a similar issue where I was trying to use the API but had it restricted to Map product only. It generated the same error even though http referrer box had nothing in it (open for all). The problem went away after recreating a new key without any product restriction.
Creating an new Browser Key fixed it for me.
https://console.developers.google.com/projectselector/apis/credentials
RefererNotAllowedMapError Error The current URL loading the Google
Maps JavaScript API has not been added to the list of allowed
referrers. Please check the referrer settings of your API key on the
Google API Console.
See API keys in the Google API Console. For more information, see Best
practices for securely using API keys.
The only thing that worked for me was to create a brand new key w/no restrictions, including no API restrictions.
This won't be a working solution in the production environment, but it allows us to move ahead w/development.
The solution to every/such Maps Javascript API error varies for different scenarios for different developers. A list of errors with detailed description is given by google here
Nevertheless please refer the below snap:
As you can see above under Application restrictions just by selecting the HTTP referrers won't do. You have to add a URL(i.e the URL of the website from which the api will be called to render the map).
Now the exact page(in my case the contact us page) which is gonna make the request to the api needs to be mentioned in the url and not just the domain.
Please go through the examples given in the documentation on the right
Adding a /* after the domain url like http://www.telesuprecon.com/* will make the request possible from any page within your website.
When you setup a google analytics profile and you specify the domain, does google make any sort of validation prior of registering a hit?
Does it check that the call comes from the specific domain, based on the key you are provided (ie UA-11580xxxx-xx)?
If I get the above analytics key and put it in another domain, will the hits on that site be registered for the domain for which the key was generated?
Thanks
Sort of.
By default, Google Analytics accepts hits to your account without ever checking where it comes from, so you could register your domain as foo.com, and still forever send traffic from bar.com without any trouble (or from a mobile app, etc).
However, Google provides an optional validation tool that will crawl the page of the website you provide, in order to validate whether or not you installed it correctly. But usage of this tool is optional, and is not a prerequisite for successfully sending and receiving data.
I believe it does. I dynamically generate my Analytics JS code just from the key, and, when I've put the wrong one in, I'm pretty sure the traffic appears to go to the wrong site.
I'll re-test one of my sites to make sure...
When you put the analytics code in the bottom of your HTML(with the key you got from google), first day you don't see anything, because Google is then already counting all visits on your website. after a day you can see result from the previous day.