How to Block Any USA Region from accessing website (JavaScript)
Sometimes, you might need to block any USA region or any region in the world from accessing your website for many reasons. Why I’m writing this, because recently one of my client wanted me to help him block two US states i.e., Pennsylvania and Michigan. So I made a JavaScript code where I used third-party geolocation API to achieve this.
In this article, I will show you how to use blocking access to your website based on geographic location using JavaScript. But keep in mind that it is less common and less reliable than server-side methods. You should know that JavaScript runs on the client-side and can be easily bypassed. However, you can still implement a client-side solution using a third-party geolocation API.
Steps to Block Any USA Region from accessing website
Here is a basic example of how you can use JavaScript along with a geolocation API to block access from specific states like Pennsylvania and Michigan:
Step-by-Step Guide
I wrote this HTML file, where I have included JavaScript file named i.e., block_states.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block States</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<script src="block_states.js"></script>
</body>
</html>Now, below is the code which goes right in to our JS file i.e., block_states.js. Where we have used API to get the visitor’s location data and block access if they are from Pennsylvania or Michigan.
All you need to do in the following JS file, replace the YOUR_TOKEN_HERE and you are good to go.
// Function to block access based on state
function blockStates() {
// Fetch the visitor's IP information
fetch('https://ipinfo.io/json?token=YOUR_TOKEN_HERE')
.then(response => response.json())
.then(data => {
console.log(data); // Log the data for debugging purposes
// Extract the state information
const region = data.region;
// List of blocked states
const blockedStates = ['Pennsylvania', 'Michigan'];
// Check if the visitor is from a blocked state
if (blockedStates.includes(region)) {
document.body.innerHTML = '<h1>Access Denied</h1><p>We are sorry, but access to this website is not available from your location.</p>';
}
})
.catch(error => {
console.error('Error fetching the IP information:', error);
});
}
// Call the function to block states
blockStates();