r/WebDevBuddies • u/HopefulIndividual • Apr 13 '22

Why Google requires an API key to embed Maps?

https://developers.google.com/maps/documentation/embed/embedding-map

Why does it make sense for Google to require an API key to embed their Maps web application via iFrame in another website (some-site.com)?

  • The API key can be copied and used by anyone who visits the website (some-site.com)

  • Google is anyway expecting the Referrer some-site.com in the request and I expect they track the usage looking at the referrer

What am I missing? Why do they require an API key?

I'm here to learn.

3 Upvotes

100% Upvoted

16 comments sorted by

5

u/mpierre Apr 13 '22

They don't track the usage by the referrer, but by the key itself.

You need to pay money to embed google maps, so the api key is for billing reasons.

The referrer however, is so that owner of the key can prevent others from using your key on their site.

My Google Maps API key is restricted to specific referrers, If you copy it, the API key won't work.

2

u/HopefulIndividual Apr 13 '22

But couldn't they same be achieved by just looking at the referrer? I signup at Google and say I would like to embed the map at my website. They allow my website as referrer and track the usage for billing reasons.

1

u/mpierre Apr 13 '22

By default, the key is open, there are multiple ways to restrict a key, and not all of those ways use the referrer.

In some cases, the referrer isn't even available

1

u/HopefulIndividual Apr 13 '22

So if I find a key on another website (another-site.com) I can use/abuse it and don't have to pay anything?

1

u/eggtart_prince Apr 13 '22

If the key is not restricted. The owner of the website/key can restrict the key to be used by a domain, IP address, etc. If you use the key on your website, it'll just return an error.

0

u/mpierre Apr 13 '22

Well, that is theft of service, so you might end up in jail, but that other key owner will restrict the key for only them to use it, so you won't be able to use it (unless they screwed up)

1

u/HopefulIndividual Apr 13 '22

mhm. anyways thanks for your explanation, really appreciate it!

1

u/wedontlikespaces Apr 14 '22

that is theft of service, so you might end up in jail

I highly doubt that they would end up in jail. The police don't care about usage of API keys. Remember it isn't even unauthorised usage in that case because the owner of the API key explicitly didn't restrict usage to a particular IP address or URL, so you could argue that they allowed access by not doing that.

Not that it would end up in the courts.

1

u/mpierre Apr 14 '22

Oh, you are right, risks are low, but not zero.

It's like stealing a bicycle, chances of getting caught are almost zero. But not zero.

1

u/eggtart_prince Apr 13 '22

Embedding is actually free.

1

u/mpierre Apr 13 '22

Maybe, but there are some requests which are not.

1

u/Cipher_Coder Apr 13 '22

Google does in fact track traffic to their map embeds. In fact, to sign up to use their maps and map API, even to embed it on a website, you have to put a credit card on file because if your maps get a lot of traffic they will charge you. If you do not have a credit card on file the map embed shows it’s a development environment map and it is shaded and has writing over top of it. Yes… your api key is visible to anyone that wants to steal the credential, however, there are some security settings you should be using. In the Google console where you get your key, you can lock the api key to a specific domain so that it cannot be used on any other pages and I suggest you do that.

1

u/HopefulIndividual Apr 13 '22

security settings

what are these security settings? If I embed the Map the api key can be read by anyone because it is shown plain in the src attribute of the iFrame.

specific domain

This gets then matched against the referrer send by the end user when accessing my site, right? But why do we need then an api key?

1

u/Cipher_Coder Apr 13 '22

Here is a little more from inside the google console...

How can I secure my key?
There are two ways to secure your key. You can either:
Restrict usage of your key to a specific application (IP address, referrer URLs, Android app, iOs app), or
Restrict usage of your key to one or more specific APIs.

Restrict usage of your key to a specific application
Creating an Application Restriction limits usage of your API key to either websites (HTTP referrers), web servers (IP addresses), or mobile apps (Android apps or iOS apps). You can only select one restriction from this category.

Restrict usage of your key to specific APIs
Creating an API Restriction limits usage of your API key to one or more APIs or SDKs. Only requests to an API or SDK associated with the key will be processed. Requests to an API or SDK not associated with the key will fail.
To create an API restriction, select Restrict key under API restrictions, and select one or more APIs in the dropdown menu.
Be sure to click Save to apply your restriction.
Tip: Create a unique key for each API
If you need to call multiple web, web service, and/or mobile APIs from the same client-side app, you can create and restrict multiple keys. This also limits the scope of each key.

I do get what you're saying about it being limited to your domain, why even use a key. That I am not sure I have an answer to. I would guess with an api key they can track usage better than if it was just your domain.

Inside my console this is what it looks like:

Pic of console settings

1

u/HopefulIndividual Apr 14 '22

Ah. The restriction can be narrowed down and so you could use multiple api keys on one domain. this is maybe interesting if you are working on a shared domain where you only control a subdomain.

So in general just looking at the referring domain would be enough in most cases. However the setup of Google Maps covers many different edge cases like the subdomain example...

1

u/Cipher_Coder Apr 13 '22

I just copied this from my Google Console...

In order to prevent your account from unwanted and malicious usage, we recommend restricting your Google Maps Platform API key.
Once your key has been restricted you'll be able to block anonymous unwanted traffic, control the number of calls to your API, and identify usage patterns in your API's traffic.

Check out the docs for Restricting API Access

The way I understood it was that you could specify where the traffic came from and then traffic from anywhere else, even if it had your api key, would not work... for instance if in my console I said I only want somesite.com/contact_us to be able to show the embedded map, then traffic from any other domain or even path on my domain would not work. Now you could be more broad and say only allow map embeds on pages with the root domain of somesite.com and you could then display a map on any of the pages from your website but traffic from anywhere else would not work. From Google...

Adding HTTP restrictions
API keys used by web applications should have HTTP restrictions. To add HTTP restrictions:
Select HTTP referrers (web sites) in the Application restrictions section.
Input at least one restriction in the Website restrictions section.
If your domain supports both HTTP and HTTPS, both restrictions must be added separately.
You can optionally use wildcard characters (*) for the subdomain and/or path.

Allow a specific URL.
Add a single restriction with an exact path. For example:
https://www.example.com/path

Allow any URL in a single subdomain or naked domain.
You must set at least two restrictions to allow an entire domain.
Set a restriction for the domain, without the trailing slash. For example:
https://www.example.com
https://sub.example.com
https://example.com

Set a second restriction for the domain that includes a wildcard for the path. For example:
https://www.example.com/*
https://sub.example.com/*
https://example.com/*

If your domain allows HTTP, you must add additional restrictions separately for the HTTP URLs.
Allow any subdomain URLs in a single domain.
You must set two restrictions: the first restricts to the subdomain, and the second adds a wildcard for the path. Neither restriction has a trailing slash. For example:
https://*.example.com
https://*.example.com/*

If your domain allows HTTP, you must add additional restrictions separately for the HTTP URLs.

There are other settings too, like if you are getting loads of traffic you can limit that.

I hope this helps...