Create A Tool To Stop Web Scammers

I think there are two big reasons to learn hacking: To access content or to prevent attackers from accessing content. In this article, I want to show you how to protect content by creating a Chrome extension that alerts the user if they are on a safe site to input their information.

The Problem

Have you ever heard of Website Spoofing? In case you haven’t it is the act of creating a website that looks and feels like another one. It is not hard to get the source code of a webpage using Chrome or even use Chrome’s Developer Tools to see the Network requests, Javascript, and so on.

So the reason to create something like that is to steal user credentials or credit cards. For example, the attacker goes into a bank’s website, copies the page, and then creates a clone of a website you would normally put your credentials. Then, using Phishing is capable of making you go into the website and end up getting your information.

There are several ways to avoid this, for example:

• Make sure the URL of the website you are on is something you trust.
• The URL says httpS instead of plain http so your credentials don’t travel in plain text.
• Make sure you access the websites using Google.
• Look at the Lock icon right next to the URL bar(left side).

There are several more, like looking at the quality of the website but the problem with all the recommendations I could give is that they don’t work very well for non-technical people. Especially with older people, this is hard to explain that’s why there are more likely to become victims of this type of scam.

The Solution

Let’s create a Chrome extension that allows you to detect if you are on a safe website. To create this Chrome extension we only need to create three files:

• manifest.json
• content.js
• background.js

I put everything inside a folder called detector.

Additionally, to that we will need two icons to display when you are on a safe website or not:

Your folder with all the content should look like this:

Now let’s add the content of each file:

First, open manifest.json and add the following:

{
    "manifest_version": 2,
    "name": "Domain Safety Checker",
    "description": "Alerts user when accessing a list of domains",
    "version": "1.0",
    "permissions": [
        "tabs",
        "https://*/*"
    ],
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    },
    "content_scripts": [{
        "matches": [""],
        "js": ["content.js"]
    }],
    "browser_action": {
        "default_title": "Domain Safety Checker"
    }
}

Content.js should have this:

chrome.runtime.sendMessage({message: 'checkDomain', url: window.location.href});

And finally background.js should contain this:

let domainList = ['www.bankofamerica.com','example.com'];

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.message === 'checkDomain') {
    let url = request.url;
    let domain = url.split('/')[2];
    if (domainList.includes(domain)) {
      chrome.browserAction.setIcon({path: 'icon-green.png', tabId: sender.tab.id});
    } else {
      chrome.browserAction.setIcon({path: 'icon-red.png', tabId: sender.tab.id});
    }
  }
});

As you can see on this last one, you have the list of websites that you define as “safe”. In this example I added two, one for a popular bank and the other one is just example dot com.

That’s it! We have our extension ready. Now We just have to add it in Chrome.

Just type in the URL bar chrome://extensions/
You have to be in Google Chrome and as result, you will see something like this:

Here just click on Load unpacked and select the whole folder with your plugin. In our case, we named the folder detector just click on it and then clicking on the select folder button.

If everything went right you will see the plugin appearing in your list of extensions:

Make sure it is activated and we are good to continue.
Before testing it is nice to pin it next to your URL bar in Chrome you can do that by clicking the extension option in Chrome which looks like a puzzle piece:

When you pin it down, you will see the extension appear. In our case is the one with an arrow pointing to it.

Now time to test it. Remember, this plugin will show the green icon if we are on the URL in our domainList array. So I will start going into medium.com which is not on the list:

So far it works, now let’s try with the other two domains on the list:

Perfect! it is working with our two examples, if you want to add more sites you just have to modify the domainList. If your website is a common target for hackers you can offer an extension like this using the Chrome Web Store, or maybe you can just install it in your browser to protect your loved ones from scammers, which is the reason I built this.