Javascript : Full Screen Deny based on IP/ASN

When it comes to restricting access and you’re using blogger, you get a very limited tool set of options you can use to restrict access, you can require people to login, but then that stops the general public from accessing your information which is not ideal

If you set the option to login with Google, this can further restricted to authorized members only, but this again seems a little bit limited and it’s not the best user experience.

Weaker Block Messages : Password

I have covered other ways of password protecting your HTML with some simple JavaScript, But if you know what you’re doing with certain commands, you can easily obtain that password and bypass the restriction.

Outside the Box : Full Screen Javascript blocker

However, that got me thinking what if I write some JavaScript that goes full screen with a red background that says you’re not able to get to this website from this address if that address is on the block list, and I then removed the usual close button so you can’t get rid of the warning.

Blocking IPv4 and ASN networks, why not

Finally, blocking individual IP addresses can be a bit of a pain so I’ve incorporated blocking ASN networks rather than the individual addresses, in the JavaScript, you simply need to put the numbers from the ASL network and they will automatically be blocked.

This is the results and it seems to work very well from my point of view and fixes a problem I’ve had a blogger for quite a few months.

The JavaScript for messaging like this is below, obviously you can customize it to your individual requirements, the data in the code is from my testing and will obviously need to be changed for your individual parameters (That’s the sections in bold)

.fullscreen-content {
text-align: center;
color: white;
padding: 2rem;
max-width: 900px;
pointer-events: none;
}

.fullscreen-content h1 {
font-size: 3.5rem;
margin-bottom: 2rem;
animation: pulse 2s infinite;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.message-container {
margin: 2rem 0;
animation: slideUp 0.8s ease-out;
}

.message-container p {
font-size: 1.8rem;
margin: 1.5rem 0;
line-height: 1.6;
}

.ip-message {
margin-top: 3rem !important;
font-weight: bold;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes slideUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
<script>
// Function to check if visitor IP is blocked
async function checkVisitorIP() {
try {
// Get IP and ASN info
const response = await fetch('https://ipapi.co/json/');
const data = await response.json();
const visitorIP = data.ip;
const visitorASN = data.asn;

// Array of blocked IPs
const blockedIPs = [
'203.0.113.1',
'198.51.100.1',
'31.94.36.39',
// Add more blocked IPs here
];

// Array of blocked ASNs (without 'AS' prefix)
const blockedASNs = [
'62907',
'62044',
'55242',
'53813',
'53444',
'40384',
'32921',
'22616',
// Add more ASNs here (just the numbers)
];

// Check if IP is directly blocked
if (blockedIPs.includes(visitorIP)) {
return true;
}

// Check if ASN is blocked (remove 'AS' prefix if present)
const visitorASNNumber = visitorASN.replace('AS', '');
if (blockedASNs.includes(visitorASNNumber)) {
return true;
}
return false;
} catch (error) {
console.error('Error checking IP/ASN:', error);
return false;
}
}

// Function to show permanent fullscreen message for blocked IPs/ASNs
async function showBlockedMessage() {
const isBlocked = await checkVisitorIP();

if (isBlocked) {
// Create overlay container
const overlay = document.createElement('div');
overlay.className = 'fullscreen-overlay';
overlay.innerHTML = `
<div class="fullscreen-content">
<div class="fullscreen-content">
<h1>⚠️ Ermmm… </h1><br>
<div class="message-container">
<p>🚫 You are not authorized to access this content 🚫</p>
<p>⛔ Access to this blog has been denied ⛔</p>
</div>
</div>
`;

document.body.appendChild(overlay);
}
}

// Call the function when page loads
document.addEventListener('DOMContentLoaded', showBlockedMessage);

// Prevent keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (
(e.key === 'F12') ||
(e.ctrlKey && e.shiftKey && e.key === 'I') ||
(e.ctrlKey && e.key === 'u') ||
(e.key === 'Escape') ||
(e.key === 'F11')
) {
e.preventDefault();
}
}, true);

// Prevent right-click
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
}, true);
</script>

Javascript : Full Screen Deny based on IP/ASN

نموذج الاتصال