HTML : Filtering browsers,


The title of this post may be misconstrued as I’m trying to filter Chrome, but actually, it’s the opposite, the filtering in this scenario involves filtering other browsers that are not Chrome.

In the usual fashion, I like to give the background information before I go into script and fixes, because understanding the process and thinking is more important than just applying the fix.

No place like chrome

If you remember, one of the marketed adverts for Chrome was advertising how convenient and integrated into your life it was - The slogan for this was “ no place like chrome”

While this advert and slogan does not appeal to many, if you are part of the Google ecosystem, and no this does mean not have an android, it makes sense to go with the Browser synchronizes soon across all your devices.

The same reason, Apple fans in system buy app equipment is the same reason Google ecosystem users would rather use Chrome - even people on Apple products probably if they’re true to them themselves use Chrome - Safari has a very small Internet presence.


Why Chrome?

Chrome is based on chromium, which majority of the full feature browsers are Chromium based and Chrome is no exception Google integrated services built right in.

The Google services are what make Chrome fantastic, and full of protection, you also find that competitive browsers like Edge (yuck) is exactly the same, but with that Microsoft wrapper round the browser.

Firefox is not really based on chromium and used to be really good, but recently from my view turned into a very buggy, memory intensive and crash happy browser.

You also get your other browsers, like Opera and Brave - but they are not used enough and pretty insignificant in comparison when compared to the mainstream browsers - think of Blackberry messenger when Blackberry's were popular…. Not anymore!

I don’t like Google and what they do with data?

Interesting, Google do not hide what they attempt to do with your data and from my point of view I actually like having the convenience of tracking me and I will always have all the features that monitor track enabled for Google.

They offer more benefits than drawbacks from my point of view, others who have a tinfoil hat permanently on their head will disagree - if you are one of those people remember, everybody is spying and tracking on you.

Google, maybe soon as this large corporation that your data to anybody, but are any other companies different in that regard?

Apple like to go on about privacy, but not many of their services are not that private, The same goes for Microsoft with Windows 11, there it was saving screenshots of actions you were taking.

The difference between Google and another companies is that Google if you read the terms and conditions are quite transparent about what they do with the analytics behind your data, your data is your data, but it’s the analytics. Google are interested in.

Do I work for Google?

No, absolutely not, but I do appreciate lots of Google services that are able to make my life incredibly easy, another example here is Google mail - All the nasty emails and actual spam are in a folder called “Spam”

Google is absolutely world-class and the best in the industry at this technology, if you compare them with iCloud mail where you essentially become the span filter or you have to have a nasty clunky desktop application doing the job of what Google mail does natively.

Microsoft again hinges on Exchange Online (EXO) I’m back detection technology, despite having AI plastered all over it can be flaky at best.

If you want to get good at detecting anomalies and malicious activity, it’s all about the data you are getting, and quality data drives excellent threat intelligence and trending, simple.

OpenDNS/Umbrella : Data Quality

Where did this come from? This has absolutely nothing to do with Google Chrome???

Well, The reason I’ve included Umbrella is a prime example is the reason they are miles ahead of any web filtering technology is because they have all the analytical data and they can detect threats ahead of any other company because of the quality of the data.

Umbrella and a new XDR is Miles ahead of the competition when it comes to raw data and analytics, this is probably because many places you go to will be powered by this DNS technology, you will probably not even be aware you’re using OpenDNS/Umbrella -  but somewhere at some point, I guarantee you will be even if you don’t know it.

Edge is my company browser?

Indeed, if you are a Microsoft house and you’re under the illusion you need to use Azure and Entra you are very much mistaken, many people will choose Edge as the default browser because it does something ludicrously unhelpful like tying your company Intranet which will probably be on SharePoint

You will also be sold that it can search your Internet right there from the search bar, it will be sold as a new feature because it’s Edge, but this has nothing to do with the browser being Edge.

Google have been doing this for years if you remember the good search boxes that were a big old yellow Google branded 2U server as below - furthermore, I’ve heard these boxes are making a comeback and they are incredible. 


Script : Redirect if not Chrome

If you are a die hard Chrome fan, like myself, how easy would it be to craft some HTML redirected non-Chrome browsers to an alternative URL?

If this is not server side scripting, then we can handle this with what is known as the UserAgent - in this example we are looking for “chrome” as below:

document.addEventListener('DOMContentLoaded', function() {
var isChrome = (/Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)) || /CriOS/.test(navigator.userAgent);   
});

If the browser equals something that is not chrome then this value will return false, and it will need to redirect the user to your redirected website:

  if (!isChrome) {
        window.location.href = "https://chromeonly.a6n.co.uk";
    }

Can the User Agent not be updated?

Yes, absolutely you can do this with the Registry key which you could easily find on the Internet however, if you update your user agent key to be something else remember with every hot fix and update it’s likely to be reset back to the manufacturing default.

This means you would probably end up needing to continually update this Registry key and you’ve probably lose interest in doing this every single time, the human mind gets bored quite easily

Mission control : Enough talking, more coding

We now have all the pieces of the puzzle 🧩 - which means we can now get on and do some coding, For this particular code to work, it will require three files:

index.html - this will contain the HTML code including the link to any images

style.css - this will contain the CSS code that will Will give the website it’s design qualities

Static Website : index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Chrome Now!</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="content">
    <br>
     <img src="chrome.png" alt="Chrome Logo" id="chrome-logo">
        <div id="message-box">
            <h1>Chrome Not Detected!</h1>
            <p>It looks like you’re not using Google Chrome, Skeletor requires Chrome for site access</p>
            <a id="download-link" href="https://www.google.com/chrome/">Download Chrome Now!</a>
        </div>
    </div>
</body>
</html>

CSS Formatting : styles.css

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
}

#content {
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 800px;
    width: 100%;
}

#message-box {
    padding: 2rem;
}

h1 {
    font-size: 3rem;
    color: #ff0000;
    margin-bottom: 1rem;
}

p {
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 1rem;
}

#download-link {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background-color: #4285f4;
    padding: 1rem 2rem;
    border-radius: 5px;
    font-size: 1.25rem;
    transition: background-color 0.3s ease;
    margin-bottom: 1rem;
}

#download-link:hover {
    background-color: #357ae8;
}

Visual of that Code

That code should look something like this which should be what you are expecting:


This code is stored on the URL of https://chromeonly.a6n.co.uk however this website by itself does nothing the code that is required to force people to that website its below, its a script and it looks like this : 

<script>
document.addEventListener('DOMContentLoaded', function() {
    var isChrome = (/Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)) || /CriOS/.test(navigator.userAgent);
    
    if (!isChrome) {
        window.location.href = "https://chromeonly.a6n.co.uk";
    }
});
</script>

Previous Post Next Post

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