Restrict Content for Users of Specific Countries With JavaScript Only

As I have shown in a previous post, we can find the country of the user on the browser with JavaScript only. Using this information, you can restrict your site content for users belonging to specific countries.

Note that this is not foolproof and can be worked around easily by changing the system timezone.

Demo

In the below demos, you’ll only see the content if you fulfill the country of origin criteria; otherwise, you’ll see this content is unavailable to your country.

1. Show Content Only to USA Users

You belong to USA and therefore can see this content!

2. Hide Content From USA Users

You do not belong to USA and therefore can see this important content!

3. Show Content to Users of Anglosphere Countries

As you can see this content, you must be from USA, Canada, UK, Australia, or New Zealand.

4. Hide Content From Users of Anglosphere Countries

You do not belong to an anglosphere country, and therefore has access to this beautiful writing...

The Example Code

The hash map timeZoneCityToCountry is truncated for brevity. You can copy or download this complete JSON dictionary from here)


<div id="showToUsa">You belong to USA and therefore can see this content!</div>

<div id="hideFromUsa">You do not belong to USA and therefore can 
  see this important content!</div>

<div id="showToAnglosphere">As you can see this content, you must be from USA, 
  Canada, UK, Australia, or New Zealand.</div>

<div id="hideFromAnglosphere">You definitely do not belong to an anglosphere 
  country, and therefore has access to this beautiful writing...</div>

<script>
  var timeZoneCityToCountry = {
  Andorra: 'Andorra',
  Dubai: 'United Arab Emirates',
  Kabul: 'Afghanistan',
  Tirane: 'Albania',
  Yerevan: 'Armenia',
  Casey: 'Antarctica',
  Davis: 'Antarctica',
  Mawson: 'Antarctica',
  Palmer: 'Antarctica',
  Rothera: 'Antarctica',
  Troll: 'Antarctica',
  Vostok: 'Antarctica',
  Buenos_Aires: 'Argentina',
  Cordoba: 'Argentina',
  Salta: 'Argentina',
  Jujuy: 'Argentina',
  Tucuman: 'Argentina',
  //... truncated
  Antananarivo: 'Madagascar',
  Skopje: 'North Macedonia',
  Bamako: 'Mali',
  Saipan: 'Northern Mariana Islands',
  Nouakchott: 'Mauritania',
  Montserrat: 'Montserrat',
  Blantyre: 'Malawi',
  Niamey: 'Niger',
  Muscat: 'Oman',
  Kigali: 'Rwanda',
  St_Helena: 'St Helena',
  Ljubljana: 'Slovenia',
  Longyearbyen: 'Svalbard & Jan Mayen',
  Bratislava: 'Slovakia',
  Freetown: 'Sierra Leone',
  San_Marino: 'San Marino',
  Dakar: 'Senegal',
  Mogadishu: 'Somalia',
  Lower_Princes: 'St Maarten (Dutch)',
  Mbabane: 'Eswatini (Swaziland)',
  Lome: 'Togo',
  Port_of_Spain: 'Trinidad & Tobago',
  Dar_es_Salaam: 'Tanzania',
  Kampala: 'Uganda',
  Midway: 'US minor outlying islands',
  Vatican: 'Vatican City',
  St_Vincent: 'St Vincent',
  Tortola: 'Virgin Islands (UK)',
  St_Thomas: 'Virgin Islands (US)',
  Aden: 'Yemen',
  Mayotte: 'Mayotte',
  Lusaka: 'Zambia',
  Harare: 'Zimbabwe'
};

var userCity;
var userCountry;
var userTimeZone;

if (Intl) {
  userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  var tzArr = userTimeZone.split("/");
  
  userCity = tzArr[tzArr.length - 1];
  userCountry = timeZoneCityToCountry[userCity];
}

document.addEventListener("DOMContentLoaded", function () {
  
  var showToUsa = document.getElementById("showToUsa");
  var hideFromUsa = document.getElementById("hideFromUsa");
  var showToAnglosphere = document.getElementById("showToAnglosphere");
  var hideFromAnglosphere = document.getElementById("hideFromAnglosphere");

  if (userCountry !== "United States" ) {
    showToUsa.innerHTML = "This content is not available in your country " + userCountry + ".";
  }

  if (userCountry === "United States" ) {
    hideFromUsa.innerHTML = "This content is not available in USA.";
  }

  if (!(["United States", "Canada", 
  "Britain (UK)", "Australia", "New Zealand"]).includes(userCountry) ) {
    showToAnglosphere.innerHTML = "This content is not available outside of Anglosphere countries.";
  }

  if ((["United States", "Canada", 
  "Britain (UK)", "Australia", "New Zealand"]).includes(userCountry) ) {
    hideFromAnglosphere.innerHTML = "This content is not available to Anglosphere countries.";
  }
});
</script>

How to Verify?

Open your system preferences and change your auto-selected timezone (based on your location via the internet) to one of the countries used in the above examples. Then reload this post and see the content shown or hidden for you.

javascript