I wonder if my Google maps API key is safe the way I use it now. Because I have a Cordova application with Google maps, I have generated an API key. I cannot white-list the key to my domain, because it runs client side on the phone.
Also my API key is visible for anyone who unpacks my app and read the index.html, or listen to the web requests that the app makes.
Is there any way to protect my API key? And if there isn't, it is safe to use Google maps, or any other third party API that uses a API key for authentication?
I see two possible solutions to your problem. Both of them I have already personally implemented (not with GMaps though) but still have some downsides.
(1) You can use a backend technology to add in API keys to your requests. For this it is advisable to use a combination of something like Apache2 mod_proxy and mod_rewrite. In your application you then use URLs that point to your proxy server i.e. https://yourserver.com/js/googleapis/maps/api/js and make mod_rewrite this URLs to something like https://maps.googleapis.com/maps/api/js?key=API_KEY
A rule for mod_rewrite (not tested) could look like this:
RewriteCond %{QUERY_STRING} ^$
RewirteRule ^/googleapis/maps/api/js (.*)$ https://https://maps.googleapis.com/maps/api/js?key=API_KEY
I think you get the idea. The big advantage of this approach is that you can completely hide your private information on a server you control. The downsides are: If your app causes high traffic you will most likely experience high traffic on the proxy machine. Further if attackers figure out the URL to your Google Maps API proxy endpoint it will be easy for them to retrieve the GMaps API through your service.
(2) The second option would be to create a service to retrieve your API keys. Assuming your application already needs some form of authentication anyways you cold go a road where the API key service hands out the API key only to registered and authenticated users.
Both approaches will have their downsides regarding better tooling for debugging mobile-web applications. I.e. an attacker using MacOS, XCode and Safari on a desktop could establish a debugging session to your Cordova application and step debug the JS code that runs inside your App. Which means whatever stretch you make in the Cordova arena it is quite easy to attach to your App and read variables.
No credit to comment on accepted answer but personally, I'd go for the 2nd option suggested by Matthias Steinbauer. However, his concern about an attacker debugging your Production app doesn't apply to apps built with a Distribution Provisioning profile (such as required when submitting to the App Store) - only apps signed with a Developer Provisioning profile. The same goes for Google Apps too. IF it were possible to just debug a prod app, then say goodbye to security.
Having said that, an App's static content can be viewed by others (since app is just a zip file) - so don't hard-code any keys or security info.
Personally, I'd also obfuscate the source when building prod version.
Hope it helps
Related
TLDR
My code works fine on my laptop when accessed as file://<path>/index.html, but neither on my laptop with an Apache server running when accessed as http://<path>/index.html, nor on my real (production) server. I see no errors on the console, but the map is just a grey rectangle.
[Update] I moved to LeafletJS shortly after asking this question, and recommend others to do so too.
It has been a few years since I coded any Google Maps applications.
It seems that, as of last year, it is now necessary to have an API key, by providing it with credit card details, and to provide it with each API call.
Unfortunately, there is a lot of of information about this, much/most of it out of date and/or contradictory.
Can anyone point to the canonical guide, preferably with screenshots, of how to configure this?
I wish to draw a map, and add some makers, which will require reverse geocoding, such that I provide a street address and convert it to lat/long in order to place the markers.
Sounds simple enough, but which of the many thousands of "helpful" site has gotten it right?
For instance, what seems to be the current Google help page speaks of
From the Navigation menu, select APIs & Services > Credentials.
On the Credentials page, click Create credentials > API key
But I can't even see that menu option :-(
[Update] If it helps any, the error message in the developer console said :
Geocoding Service: You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key
[Update] I am trying to access the API like this
<script src="maps.google.com/maps/api/…>
and
var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + comapnyLocation +'&key=XXXX';
$http.get(url)
[Update++] in the developer console, I see a bunch of errors along the lines of:
aliextension.com/wp-content/uploads/2017/08/JAR.png:1 GET https://aliextension.com/wp-content/uploads/2017/08/JAR.png net::ERR_CONNECTION_TIMED_OUT
I have no idea what aliextension is, nor does it appear in my code (maybe in some minified JS?)
Ok, it is something to do with AliExpress (Ali Baba). I removed it & the timeout messages go away, but I still have problems.
If I load the index.html into Chrome as a file://, then it works just fine. But, if I load it `as http://, where I have a Xampp Apache server running, the map box remains grey, although I see no error messages. The same thing happens on my real server :-(
This page should be your starting point:
https://developers.google.com/maps/documentation/javascript/tutorial
it helps you working with Google map javascript API.
To embedded a google map to your website read the overview page in the above link.
To add markers to your google map read this page:
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
To do reverse geocoding read this page:
https://developers.google.com/maps/documentation/javascript/geocoding
That all i need to work with google map. I think you can do the same too.
The cause for this is quite likely an API key restriction.
In order to permit these host-names or IP addresses, you have to:
a) go to the credentials panel and select the according project, then click on "Api key".
b) there you can loosen the restrictions, for HTTP referrers (for web-sites)
... or for IP addresses (in case these are server-side requests).
Good afternoon, I am creating an application in Cordova and wanted to use linkedin, but when I run my application, it says I need to set my domain javascript API in my Application linkedin. I've tried with the domain "file: ///" but gives the same error.
Does anyone have an idea or a solution to this problem?
Best Regards
LinkedIn (or any OAuth provider) requires your Web domain for security purposes (to know the right URL for authentication callbacks, and to help prevent random sites from trying to impersonate your application).
You must supply a domain such as www.yourdomainname.com or even your external IPv4 address will work, such as 55.55.12.12.
I am an amateur website developer but proficient in html and javascript.
I have a handful of websites using the Google Maps API V2 with no problem. I tried to upgrade to V3. I got a new API key and used the sample html (based on Australia) provided by Google. All I got was the 'disabled' message.
If I remove the key completely it works! What am I doing wrong?!! (www.gn45.com/gmap.html)
This message appears, because there's a particular domain whitelist, that is configured for each business account. By default, you can always access google APIs with an API key from localhost, but any other domain should be specifically set within account management.
With the mobile application, your index.html is read from the filesystem and then passed to in App Browser. Therefore google rejects a request to the API with API key. You can temporarily remove API key from your request and access the API without any, this way you'll have a 50k request/month limit, which should be sufficient for development purposes.
I'm looking for a way to configure this myself, as soon as I find one, I'll provide an update.
I know how to use the W3C navigator.geolocation API, but just found out that under Google Chrome it does not work when the page is on the local filesystem rather than on a web server: [1], [2].
What other techniques can I use to get either the latitude and longitude, or the country code for my current location?
(I'm running my project from the local filesystem because ideally it won't require a server of its own. In fact I don't even have my own domain or hosting or such (hitchhiking around the world with my netbook for the past year). It calls web APIs on 3rd party servers but doesn't have its own server.)
(Yes I know I can work around this by running a local web server such as Python's SimpleHTTPServer, but let's assume for this question that such a workaround is not possible.)
If you could turn on cross-domain requests for ajax (such as if you're developing this to run locally on a mobile device) you could make an ajax request to your server and then geolocate the global IP address coming from it. Geolocation is occasionally not accurate (for example, I'm in Utah and my phone's IP comes up in Oklahoma).
You could also redirect the user to a page hosted on another server and do the same thing and then forward them back with the GPS coordinates in the query string.
Both of these are a little ugly, but I don't know really of any way other than geolocation to get GPS coordinates.
I'm working on a Google Drive interface for Emacs. The concept is that Emacs could provide a platform-agnostic way to load, modify and save text documents stored in Google Drive. I've registered my app and can authenticate with OAuth2 and get a file listing with the Docs List API, but when I try to execute an Insert with the Google Drive API, I see an error:
"The authenticated user has not installed the app with client id ..."
Reading further, it seems I need to publish my Emacs application in the Chrome Web Store to get access to the Drive API. That doesn't make sense to me...I noticed that there is a FUSE project in development for Google Drive, which suggests that native development is possible. When I skimmed the code, however, I didn't see a Chrome Web Store component to getting it working.
Am I trying to misuse the API, or is there an route to make this work that makes more sense?
EDIT:
According to Ali Afshar, of the Google Drive team, installation is no longer required to use this API. So what follows may no longer be relevant, but will be left for historical purposes.
So, first off the API does not support application development in the sense that we are both doing it, I wouldn't use the word native though. The good news is I have been doing some research and Google Drive is really just a rebranding of Google Docs. So the Google Docs API could be a good choice as well for the same purposes.
Anyway, here's the steps to solve the error: "The authenticated user has not installed the app with client id ..." Which is a 403 error, for the sake of this answer. These steps assume you have set up an app in the chrome web store as is required, and installed it. I am working on my local machine too, with my project: http://github.com/tom-dignan/gdrive-cli which I have gotten past this error, so I think you should keep plugging away at your emacs version, because I think we can make this work.
a. Open the Google APIs console.
b. Confirm you've already enabled the apis under "API Access" both the API and SDK for Google drive should be enabled. There you get your client secrets/api keys and such. I am almost positive you've done this already, so go ahead to C. (this is here for others who may have missed it)
c. In the left navigation bar, under "Drive SDK" you will need to do the following:
Add a "Support URL" (required)
Add at least a small 16x16 application icon (required)
Add "OAuth Client ID (Required)" under Drive Integration (I was just tinkering and this seems to be the key field.)
Add "Open URL (Required) URL to open for your app from the google drive UI."
Check off "Multiple File Support"
Add some MIME types and file extensions, "text/plain", and txt for example
Add the the auth scopes:
https://www.googleapis.com/auth/userinfo.email
https://www.googleapis.com/auth/userinfo.profile
Don't bother trying to add the auth scopes for Google Docs here, because it won't work. Google does not want us to use it that way because files that drive apps create should be private to that app. Integration with Google Docs will have to be separate.
Now I know you must be thinking "why do I have to add some of these..." It's because the form makes them required fields. In mine, I put a couple URLs that point to static HTML pages.
Once you've done the above, clean up your state and reinstall your chrome app. Then try your code again, and it should stop giving you a 403.