Month: October 2020

Improve your browser security in 5 minutes

by

Chances are, you do the majority of your work and everyday computer usage through your web browser. It is your portal to the vast majority of what the World Wide Web has to offer, and unfortunately is one of the most common vectors for malicious software or attackers to leverage as they try to break their way in.

Through these quick six steps you can help keep your computer, data, and personal identity secure.

Step 0: Start with the rest of your computer

It doesn’t matter how secure your browser is if the rest of the computer it’s running on is completely insecure. Regardless of whether you use Windows, macOS, or Linux, keep your operating system up-to-date, run up-to-date antimalware software (Yes, that includes Mac users), and only connect to networks you trust. If in doubt, use a Virtual Private Network (VPN) to encrypt your communications and help prevent man-in-the-middle attacks.

You can find plenty of good reviews on software online, though personally, I use Kaspersky Internet Security for Windows and Sophos Antivirus for Mac on macOS as my antimalware tools, and NordVPN as my VPN provider.

Finally, please use an up-to-date web browser itself! Chrome/Chromium, Firefox, Opera, Vivaldi, Brave, Edge, and Safari are all sound choices.

Internet Explorer is not a great choice.

Step 1: Use a good adblocker

You probably use an adblocker or already, or have one baked into your browser. If it works for you, great, otherwise consider using an adblocker such as uBlock Origin. The vast majority of ads are probably safe, but “malvertising” is on the rise, and more websites that your browser connects to simply introduces additional risks, not just from malicious software and scripts but unnecessary tracking also.

If you want to support people online, such as a favourite YouTuber or streamer, you can disable it for those websites that you trust! Alternatively, consider supporting them through another means such as a small donation or by buying them a coffee.

Step 2: Remove unnecessary plugins and extensions

Extensions aren’t always kept up-to-date by their developers, so if you’re not using them, you should probably get rid of them. You should only be installing them from trustworthy places too, such as your browser’s official extension page.

Plugins such as Flash Player, Java, and Silverlight are notorious for introducing additional risks and are the common cause of many malware attacks even on modern web browsers and computers. Keep them disabled, or better yet, remove them entirely if you don’t need them. Remember, the key is reducing the number of exploitable vectors.

If you’re really concerned about security, you can consider a plugin such as NoScript to selectively enable and disable JavaScript on websites.

Step 3: Take your privacy back into your own hands

Privacy plugins such as Privacy Badger can help block trackers in conjunction with your adblocker. If you use Firefox, using Facebook Container is a great way of keeping Facebook’s omnipresent nose out of what you do online and to help stop them from targeting you with ads when you do use their services. You should also enable Do Not Track in your browser’s settings.

HTTPS Everywhere is a must-have extension across all browsers to ensure that your Internet sessions are always HTTPS secure and don’t get downgraded to unencrypted connections. If you use Brave, you’ll find it built-in already.

Finally, ensure that these protective extensions are available in Incognito / Private browsing, as often all extensions are disabled in said mode. While this is understandable to stop any logs being made of your browsing whilst using incognito, it also does mean that these protections are lost, potentially when you need them the most.

Step 4: Use unique passwords and a password manager

Whether you rely on your browser’s password manager or use a tool such as LastPass, KeePassXC, or 1Password ensure that you use different, secure passwords on each website you visit.

Using a website such as Have I Been Pwned run by cybersecurity expert Troy Hunt can help you know when your password has been leaked, and potentially where from.

Step 5: Common sense is everything

It probably goes without saying that your own common sense and good judgement are the most important steps to keeping your computer clean of any nasties whilst you browse the Internet.

Steering clear of illegal or unsavoury content such as pirated movies is the golden ticket, as they account for the vast majority of infected websites. Be careful what you click on, and be especially careful when entering your credentials or passwords into websites, even if they look real!

Check the address bar every time!

Conclusion

I hope you have enjoyed my quick guide to improving your security as you browse the Internet. As computers and the web become even greater components of our lives, so does the importance of ensuring our interactions with it along with our data are secure and protected, as failing to do so can have real-world ramifications for both you and your workplace.

I look forward to your comments and I’d be more than happy to add your suggestions, especially for products and extensions to the article. Thanks for reading and until next time.

Fun with Clippy.js

by

Remember Clippy? The (not very) helpful assistant that was a major part of Microsoft Office for numerous years? Sure you do!

These interactive assistants were part of the Microsoft Agent suite of technologies and were incorporated into Windows XP as well. It was also infamously used in BonziBUDDY – the fun and interactive gorilla that also happened to be… spyware.

Whilst these technologies have been long mothballed in favour of more intelligent assistants like Siri and Cortana, Clippy and friends live on in our web browsers in the form of a fun jQuery library called Clippy.js.

Should I use it?

In a real-world project, probably not. It’s out-of-date and requires the use of jQuery. It also loads agent data and sounds across the Internet from an Amazon S3 store. But is it fun? Yes!

By the way, if you’re looking for ways to use Microsoft Agent in your .NET applications, you should look into DoubleAgent instead.

As far as I’m aware, there is a version that has been imported to vanilla JavaScript ES6, but I haven’t experimented with it so far.

Installing and embedding Clippy.js

You can clone or download Clippy.js from its GitHub repository, here. You’ll want to pull the minified JavaScript file and CSS stylesheet from the build directory.

As for jQuery, you can choose to download that also (from their website) but I recommend using their official CDN, or content delivery network. The current version at this time of writing is 3.5.1, and including the minified version reduces the amount of data needed to be downloaded by your web browser.

Don’t use out-of-date versions of jQuery unless you absolutely have to.

First, include the CSS stylesheet and necessary JavaScript files into the <head> tag of your webpage:

<head>

<!-- Include the Clippy.js stylesheet, assuming locally -->
<link rel="stylesheet" type="text/css" href="clippy.css" media="all">

<!-- jQuery -->
<script 
        src="https://code.jquery.com/jquery-3.5.1.min.js" 
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
        crossorigin="anonymous" 
        defer
></script>

<!-- Clippy.js, assuming locally -->
<script src="clippy.min.js" defer></script>

</head>

If you don’t include the defer attribute on your scripts, then you should insert them into the footer of the webpage to ensure that they only begin loading once your page has finished loading – it’s also important that you include Clippy.js after jQuery.

Usage

You can write your jQuery for playing with your agent in-line or in an external file, but for our examples, let’s keep everything within a <script> tag.

First, you should note that you have a choice of multiple agents that Clippy.js supports, including but not limited to:

  • Clippy – obviously
  • Peedy, the parrot
  • Rover, the dog from Windows XP
  • Bonzi, the purple gorilla

Let’s use Clippy and get it to appear.

<script>
  clippy.load('Clippy', function(agent) {
    agent.show();
    agent.speak('Hello World!');
  });
</script>

With any luck, it should appear and greet us! You can find a full list of available action actions from its aforementioned GitHub repository.

Building a very basic action generator

See the Pen Clippy.js by Oliver Earl (@oliverearl) on CodePen.

We’re going to build a very basic program that constructs an agent and has them go through each of their animations, one by one. You can follow along or take a look at the above CodePen. If it isn’t appearing for you, you can click here to get it.

Let’s add a heading and a paragraph element to our webpage. The paragraph will have an ID that we can target with jQuery later. You can use whatever CSS styling you want – I’ve just replaced the default text font with sans-serif for now.

<main>
  <h1>Current animation:</h1>
  <p id="state">None</p>
</main>

Let’s declare a new function that will take two parameters – an agent and the agent’s animations. I’m assuming absolute basic JavaScript knowledge, so I’ll keep things as simple as I can. Add this underneath the }); of the last block of code, but still before </script>.

In the block before it, let’s use the JavaScript function setTimeout() to call this new function after a few seconds have passed – we will pass our initialised agent and its available animations as arguments, and set a time of 8000 milliseconds – 8 seconds. It should look like this:

<script>
  clippy.load('Clippy', function(agent) {
    agent.show();
    agent.speak('Hello World!');

    setTimeout(animate(agent, agent.animations()), 8000);
  });

  function animate(agent, animations) {
    // Code will go here
  }
</script>

Let’s consider what we need to do by decomposing the problem, we want to:

  • Loop through all of the available animations
  • Have Clippy perform that animation
  • Print out what animation Clippy is performing to the paragraph tag.

In our new function, we can use a jQuery element selector to store our paragraph HTML element in a variable. jQuery variables are typically denoted by a $ sign. We can put this before our loop so that it doesn’t get redeclared on each iteration.

let $currentAnimation = $("#state");

Now let’s consider the loop. We can use a basic For loop to iterate through the animations, as we know exactly how many times we need to loop through (by measuring the length of animations). Within the loop, we can have Clippy perform said animation, and use jQuery to update our paragraph using its built-in text() function.

function animate(agent, animations) {
  let $currentAnimation = $("#state");

  for (let i = 0; i < animations.length; i++) {
    agent.play(animations[i];
    $currentAnimation.text(animations[i]);
  }
}

It looks good! But there’s a problem. Can you work out what it is?

Computers are fast, and Clippy.js uses a queue system to asynchronously perform animations, meaning that the text will update to the very last entry whilst Clippy performs each animation in its queue. We need to slow down this execution using the setTimeout() function that we used earlier:

function animate(agent, animations) {
  let $currentAnimation = $("#state");

  for (let i = 0; i < animations.length; i++) {
    setTimeout(function () {
      agent.play(animations[i]);
      $currentAnimation.text(animations[i]);
    }, i * 8000);
  }
}

Conclusion

And that’s it! I hope that you’ve had a little bit of fun with Clippy.js. Please feel free to fork the CodePen and build something uniquely your own. I hear other developers have managed to embed their own agents inside React or Electron apps, which is both impressive and uniquely horrifying.

Until next time!