Quality Of WordPress Plug-Ins: An Overview of Security and User Ratings

Posted on 25 September 2012 | No responses

Three weeks ago, my colleague Petri presented our (that is, me, Petri, and Teemu who did most of the work) paper titled “Quality Of WordPress Plug-Ins: An Overview of Security and User Ratings” at Workshop on Security and Privacy in Social Networks. The main purpose of the paper was to analyze a set of WordPress plugins to find out if plugin ratings predict the number of potential security vulnerabilities in them.

In order to do that, we downloaded the source code and ratings and download counts of a set of random plugins (322 in total). We then ran the RIPS PHP security vulnerability scanner to find potential security holes in the code. The 322 plugins had:

  • 3,792,711 downloads
  • 2,783 user ratings
  • 179,393 lines of PHP code

Of the 322 plugins, 127 had a potential security vulnerability according to RIPS. In total, 860 vulnerabilities were identified.

When comparing this with the ratings of the plugins, we found only a small, negative correlation between the rating of the plugin and the number of potential vulnerabilities. To put it another way, plugin ratings are not a good measure of the security of the plugin.

There are, of course, several problems with our analysis and conclusion. Biggest of those is that the sample size was really small compared to the total number of plugins (over 21,000 at the moment). To improve the results, we are currently analyzing a bigger sample (100% of them, to be exact).

If you are interested in more details, the full paper can be downloaded here.

Event Handling for JSAV Data Structures

Posted on 20 May 2012 | No responses

For a while now, I’ve been meaning to start a series of articles on JSAV features. The current documentation only works as a reference to the API and does not explain or give enough examples. Also, it does not argue why things are done certain way and writing these things down makes me really think them through. As I recently implemented a support for easy attachment of event handlers to data structures, that seems like as good as any topic to start.

The Way Things Were

In general, attaching event handlers with jQuery is easy. That is, unless the HTML is generated by the library and there is no reason you should need to know the structure of it. Also, getting the JSAV object for the node/index matching the DOM element is tricky. The old way for doing this was something like:

// register a click event handler to all JSAV array indices
$(".jsavindex").click(function() {
  //find the index of the clicked item
  var index = $(this).parent().find(".jsavindex").index(this);
  // do something with the array
});

Events for the Array Indices

To ease this, a recent commit introduced a better way to attach events to arrays and trees. Both structures support following events: click, dblclick, mousedown, mousemove, mouseup, mouseenter, and mouseleave. While the names are reasonably self-explaining, you can check jQuery event documentation for details on the events.

For a JSAV array, there are functions with the same name as the events that can be used to register event handlers for that event type. So, for example, to add a function to be called whenever mouse enters an array index, you can do the following:

arr.mouseenter(function(index) {
  this.highlight(index);
};

The event handler function gets as the first parameter the index of the array element that the user interacted with. The this variable is set to point to the JSAV array. Naturally you don’t need to pass an anonymous function as the event handler, but you can use any function as the parameter. A good example of this are the JSAV array functions, most of which take an index as the first parameter. The API documentation gives the following example that illustrates this well:

arr.mouseenter(arr.highlight).mouseleave(arr.unhighlight);

This also shows that the event binding functions return the structure itself, so you can safely chain the function calls.

Another parameter the event handler gets is the jQuery event object. You can use that in case you need to, for example, stop the propagation of the event.

arr.dblclick(function(index, event) {
  event.stopPropagation();
  // ... do something else..
});

Note: most of the JSAV functions that change some properties of the structures also store the changes to the animation history. For events that are fired often (such as mousemove), the history can get really long quite fast. Thus, make sure you don’t misuse the events.

Events for Trees

For trees, there are functions for binding handlers for the same set of events: click, dblclick, mousedown, mousemove, mouseup, mouseenter, and mouseleave. These functions can be called for the JSAV tree instance. The actual event handlers will be bound to either nodes or edges of the tree.

Let’s begin with a simple example:

var tree = jsav.ds.tree();
// ...
tree.click(function(e) {
  this.highlight();
});

What this would do is bind the anonymous function to be called whenever a node in the tree is clicked. The event handler function gets as a parameter the jQuery event object. Inside the handler, this will refer to the node or edge that the event was triggered for.

Like I mentioned, the event handler will be bound to the nodes by default. My assumption here, based on our experience with TRAKLA2 assignments, is that this is the more common use case. But don’t worry, binding handlers for edges is almost as simple, you just need to add one option. Like this

tree.click(myEdgeClickHandler, { edge: true });

This will bind the function to only edges, and inside the handler, this will refer to the JSAV edge object triggering the event. If you want (although I can’t come up with a good use case), you can bind the handler to both by adding another option node with value true.

Custom Arguments

The above describes the basic usage of the implementation, but there are other ways to deal with even more complex requirements. First of, custom arguments can be passed to the event handler. For example, to change a CSS property of an array index on mouseenter and remove it on mouseleave, the code needed with the above functions is something like:

arr.mouseenter(function(index) {
  this.css(index, {"color": "red"});
}.mouseleave(function(index) {
  this.css(index, {"color": "black"});
});

To ease this, the event binding functions all take a second, optional, parameter to specify custom parameters for the handler. This parameter should be an array with as many items as you want to pass as arguments for the event handler. With custom arguments, the above example can be simplified to:

arr.mouseenter([{"color": "red"}], arr.css)
   .mouseleave([{"color": "black"}], arr.css);

So, it uses the array’s css function and passes the arguments for that function as parameter when registering the event handler. The function calls made by JSAV would be identical to the those made in the version not using custom arguments, except for the jQuery event object being the last argument. Ordering the parameters for the binding function to be event data first is just to be more consistent with jQuery.

Binding Custom Events

While writing this blog post, I realized there should probably be a way to bind custom events as well. While not required at the moment, I can already see a need to bind, for example, touch events. So, a later commit added on function to array and tree that allows binding any events. As the first parameter, the function takes the event name(s). The other required argument is again the event handler. For example

arr.on("touchstart", myEventHandler);

would register the function myEventHandler to be triggered when touchstart event is triggered.

Custom data for the handler can also be specified as the second parameter:

arr.on("touchstart", {myVal: "cat"}, myEventHandler);

And for trees, a last options parameter can be passed.

Summary

As a summary, here are the function signatures for the functions in array and tree:

arr.eventName([data,] handler);
arr.on(eventName, [data,] handler);
tree.eventName([data,] handler [, options]);
tree.on(eventName, [data,] handler [, options]);

What do you think? Any questions or suggestions on how to improve?

Our First Mobile App for Learning Python – Soon Ready

Posted on 14 February 2012 | No responses

Our company’s (ByTheMark, that is) first mobile application is getting closer to publishing. It is a quiz game for learning and testing Python programming knowledge. Name of the app is Quiz & Learn Python.

Logo of Quiz&Learn Python

The game asks questions ranging from simple concepts to more advanced tricks in Python programming.
Question in Quiz&Learn Python

The player has four lifelines at her disposal: remove two incorrect answers, skip the question, stop time and debug the program. The last one is what I think makes this game different from a typical quiz with questions about programming. Below is an image from the debugger.
Quiz&Learn Python Debugger

The game will be soon available for iPhone, other platforms possible later. You can test Quiz & Learn Python online. On the linked page, you can also register for our newsletter to be notified when the game is ready!

Books I Read in 2011

Posted on 3 January 2012 | No responses

A new year has started, so I wanted to look back on the books I read in 2011 (the idea actually came from this post by Tim Kadlec). Here is an almost complete list of the books somewhat related to web development or entrepreneurship. I’ve left out stuff I read for fun (like the Stieg Larsson’s Millennium Trilogy) as well as the ones I did not enjoy. These are the good books!

More Engaging Learning with Accelerometer

Posted on 6 November 2011 | No responses

Ever since I wrote my first blogpost and demo about using the accelerometer I’ve been planning on implementing some educational material that would use it. I think it can be used to make educational assignments more engaging. I finally found the time to complete the binary search tree search assignment that uses the accelerometer. Go ahead and view the demo and then come back and read the rest.

What is the assignment?

The task in the demo assignment is to search for a given value from a binary search tree. The student should visit the nodes in the tree in the same order that a search algorithm implementation would. The visiting is done by interacting with a visualization of the data structures; in this case, by controlling a ball by tilting one’s device. Some people (me included) call this visual algorithm simulation. As a comparison, you can try the traditional version of the BST search exercise (if you have Java installed).

Show Me, Don’t Tell Me

For those not able to try the demo (it requires device and browser to support device orientation), here are some pictures from iPad to get your head around the assignment. When first opening the assignment, it shows the task and the value to search for. For some strange reason, it also links to this blog post :)

After clicking “Okay, let’s go!”, a root element (46 in the picture) of  a BST is shown. Simulation of the algorithm is done by tilting the device to control the ball (below node 91 in the picture). When the ball is on a node, it is highlighted with green or red indicating correctness of the step. This way the student gets immediate feedback on her progress. When a correct node is visited, it’s children are made visible. This is to demonstrate the way the actual algorithm works; it only sees a part of the data structure.

 

Finally, the student is given a change to play again. Or, to read this blog post.

The idea behind the demo is to make interaction with educational assignments more game-like. The hope is, that this would make them more engaging for the students. It would also be entertaining for a teacher to watch a full class use such an assignment :)

Technical Things…

The assignment is pure HTML+CSS+JavaScript. To get the device orientation information, it uses the deviceorientation events. There is an underlying JS implementation of a BST and a visualization for it. Nodes are HTML div elements and the edges are drawn with an SVG overlay using raphael.js.

It really is for BST search only. While the input data is randomized on every game, the algorithm for the feedback is deeply entangled with the rest of the code. This was meant to be a single demo…

…But it Might Have a Future

Like with any “project”, there are plans for the future of this demo as well. First, I want to generalize it to cover more algorithms. Things like tree traversal algorithms should be pretty simple to add. From the technical side, I’d like to re-implement it using JSAV, the JavaScript algorithm visualization library I’ve been working on lately. This will make for a good test case for the flexibility of JSAV since the BST assignment is a lot different from the current examples. Finally, I’d like for students to use it! And teachers. So, any comments?

DeviceOrientation event and device orientation

Posted on 9 October 2011 | No responses

I’ve been building an HTML5+JavaScript demo for using the device orientation and device motion events for an educational application. The article “This End Up: Using Device Orientation & Device Motion” on HTML5 Rocks does a great job explaining how to work with these events.

In my case, I’m controlling a ball based on the device orientation (you know, like in a labyrinth type game). This is easy to do with HTML5 device orientation events. So, what I do is register an event handler for the ondeviceorientation event:

window.addEventListener("deviceorientation", orientationHandler, false);

The handler simply stores the values from the event for later use:



function orientationHandler(eventData) {

  tiltLR = eventData.gamma;

  tiltFB = eventData.beta;

 }

The gamma and beta attributes of the event object give the left-right and front-back rotation angles. Based on these values, the position of the ball can be updated (tiltLR is change of x-coordinate, tiltFB y). For the iPad, I’ve divided them by 3 to get a decent speed. Note, that I’m simplifying things here and not considering the fact that Firefox has an event of their own. Read the linked article for details.

Now all goes well until the user turns the phone/tablet on its side or upside down. Now the ball moves in weird directions. The simple fix to this (which I’m sure I’ll forget soon, hence the blogpost) is to check window.orientation and change the values accordingly. The value of window.orientation will be 0 when the device is in its’ normal orientation, -90 when rotated on its’ right side, 90 on left side and 180 when upside down. So, to take this into account and get the x and y coordinate changes:



var orient = window.orientation;

if (!orient || orient === 0) { // normal portrait orientation

  dx = tiltLR;

  dy = tiltFB;

} else if (orient === -90) { // landscape, rotated clockwise

  dx = -tiltFB;

  dy = tiltLR;

} else if (orient === 90) { // landscape, rotated counterclockwise

  dx = tiltFB;

  dy = -tiltLR;

} else if (orient === 180) { // portrait, upside down

  dx = -tiltLR;

  dy = -tiltFB;

}

This works and the ball moves in a natural way relative to the browser window. Still, it is difficult to control it when the window gets rotated. Eventually, I’d like to disable rotation of the browser window. Is there any way to do it with HTML/CSS/JS? Or is this one of those things that require wrapping the webapp into a native application?

Finally, my use case for this: I’m building an interactive exercise for learning the binary search tree search that uses the deviceorientation event. After testing this on iPad, I ran into the problem described. More on the exercise later :)

older posts »

VilleKaravirta.com is powered by WordPress. Copyright © VilleKaravirta.com. Hosting by the awesome WebFaction. Contact me by email ville@villekaravirta.com.