How to detect browser country in client site?

Question

I found the following website can detect my country and currency even in the private mode

http://www.innisfreeworld.com/

It records in cookie, How do it do that?

Is that possible fulfill in client site ? navigator?

Solution 1

There are multiple options to determine the locale. In descending order of usefulness, these are:

1. Look up the IP address, with an IP geolocation service like Maxmind GeoIP. This is the location the request is coming from, i.e. if an American vacations in Italy and uses a Swedish VPN, it will return Sweden.

It can only be done with the help of the server. The main advantage is that it's very reliable. The accuracy will be country or region for free services, city or region for paid ones.

2. Look up the precise location on Earth from the browser with the geolocation API. An American vacationing in Italy using a Swedish VPN will register as Italy.

The answer will be very precise, usually no more than 10m off. In principle, it could work client-side, although you may want to perform the coordinate -> country lookup on the server. The main disadvantages are that not all devices have either GPS or WiFi position, and that it generally requires explicit user consent.

3. Look in the Accept-Language header on the server (or with the help of the server), and extract the locale information. An American vacationing in Italy using a Swedish VPN will register as USA.

The downside is that this is a setting that's extremely easy to change. For instance, English speakers around the world may prefer en-US settings in order to avoid machine-translated text. On modern browsers (as of writing not IE/Edge, and only Safari 11+), you can also request navigator.languages.

4. navigator.language is the first element of the navigator.languages header. All of the considerations of navigator.languages apply. On top, this information can sometimes be just the language without any locale (i.e. en instead of en-US).

5. Use another, third-party service. For instance, if the user signs in via a Single-Sign-On system such Facebook connect, you can request the hometown of the user. This information is typically very unreliable, and requires a third party.

Solution 2

Another option could be using the (internationalization API)

console.log(Intl.DateTimeFormat().resolvedOptions().timeZone)

Comments

[symcbean]

Probably using geoIP lookup. This runs serverside and is very different from browser geolocation.

[Lalit]

stackoverflow.com/questions/3489460/…

[Michael C.]

It should be using IP geolocation technology. You can refer to geolocation.com for explanation.

[KevinHu]

So..there is no way to detect on the client side without asking user permission (geolocation api), right?

[phihag]

No, option 3 works on newer clients, and 4 on all clients. Option 5 may work without user interaction, by collaborating with a third-party service such as google analytics. None of those require asking the user for permission.

[MarsAndBack]

As well, most geoip services need you to use an API key. Doing this in the front-end exposes your API key... someone could use it and abuse it.

[dinvlad]

GeoIP doesn't ask for permission either, correct?

[phihag]

@dinvlad Correct, GeoIP is entirely server-side, the browser doesn't even notice it.

[Aamnah]

may not work accurately because one timezone can be in multiple countries. For example, Europe/Zurich is in Germany, Switzerland and Liechtenstein..

[Owen]

@Aamnah there are actually separate timezone definitions for each country (for example Europe/Berlin and Europe/Vaduz), that the user has probably set correctly. But there's definitely no guarantee.

[John]

This is an excellent answer. Every country has at least one dedicated time zone name. Using languages instead is a catastrophe because English is used around the world. I have my PC set to English and I'm in Germany. IP-based stuff works well but this solution here is easy and cheap.