There was a story making the rounds today on the twitter about a Montreal university student who had been expelled for, ostensibly, testing the security of a web site. If you missed it there are a number of articles out there about it as it has become a bit of a media darling.

• National Post
• CBC1
• CBC2

The story goes that this young fellow was working on an app for letting students access their data. In order to test their app they were given access to a test server atSkytech, the company behind the student information software. While playing around he discovered an exploit which allowed him to gain access to information on any student. It is a pretty common exploit: not cleaning your inputs. Al-Khabaz did the right thing in reporting thevulnerabilityand, to their credit, Skytech had a fix deployed in about a day. This is a bit slow in my mind for such a serious exploit but many company aren’t quite there yet on being able to deploy at the drop of a hat.

A few days laterAl-Khabaz ran a security testing tool against the test server he had been given to ensure that there were no other vulnerabilities. This is where things start to go off the rails. Skytech noticed an increased load and claim that the attack was damaging their ability to serve their customers. The president of Skytech, Edouard Taza, called upAl-Khabaz and demanded that he come into the Skytech office and sign a non-disclosure agreement or they would press charges.It seems that Dawson College got wind of all this activity and started their own investigation. Theyconveneda pannel of 15 computer science professors who voted to expelAl-Khabaz.

That brings us to today. I see a number of things here which could have been done better both from a technical and from a human relations point of view:

1. There is no denying itAl-Khabaz should have checked with Skytech before running vulnerability tests. I can see where he is coming from and it is unlikely that he knew how much traffic the tool,Acunetix, would generate on Skytech’s site.

2. There is no way that Acunetix, running on a single developer workstation, should be able to take out a website designed to serve such a large body as all the students in Quebec. There is a lack of preparedness for attacks on Skytech’s part. This is a site which is likely to attract attacks as it contains a lot of student data including SIN numbers, grades, addresses and the like. One thing is for sure now that Skytech’sineptitudehas been revealed they’re going to be the brunt of some actually serious attacks. If you’re a student in Quebec you should be worried.

3. An attack on a testing server should not have had an effect on the production site. It is a test server for a reason, you test things against it and, from time to time, that testing is going to be destructive. Separate your servers! With the low prices of cloud servers there is no excuse to have your test site on your production hardware.

4. Skytech reacted well to the first vulnerability but they reacted terribly to the proceeding attacks. As a company you have to know that threatening students with legal action is basically blackmail. If you want people to keep quiet about how crummy your security is then you’re pretty much going about it the right way. If you want to actually be secure then you’re screwing up. Believe me having a whitehat test your site and report problems is going to save you some big trouble in the future. That’s why Google runcompetitionsto find exploits in Chrome.

Now I understand that Skytech have made some moves to fix their screw-ups here including giving Al-Khabaz a scholarship and offering him a job. Good for them. I don’t believe he took the job but I wouldn’t either, who wants to work for bullies?

5. From what I can tell Skytech were getting a free app created here by students of Dawson. So there was probably some sort of an agreement between Dawson and Skytech to allow students access to a real world system in return for an app. Sounds a lot like slave labour to me. I’m not a fan of unpaid internships or freecollaborations. Companies should pay for apps to bedevelopedfor them. Programmers should not be giving services away for free to companies, it devalues the profession. If you’re a programmer and you want to hack on something to help people there is a whole lot of open government data out there which has a greater potential than Skytech’s data.

6. Dawson college are so far into the wrong that they can’t be saved. To me the fact that 15 researchers chose to slam the research of a student and in fact expel him is crazy to me. They claim that it is against professional conduct. Okay fine, point me to theaccrediteddocument which outlines the professional conduct for a computer scientist. No, no I’ll wait.

Exactly.

Even if such a document existed testing the security of a test server is unlikely to be a serious violation. The CBC checked with some lawyers and they could find no charge under the criminal code so it is radically presumptive of the university to suppose that the activities were illegal.

The kangaroo courts that universities set up in this country need to be stopped. These professors, locked in their ivory towers, have no idea about real worldconsequences. Where are the police charges ifAl-Khabaz actually did something seriously wrong?

I know that if I were a student I wouldn’t want to go to Dawson College and if I were an employer I would be suspicious of graduates of Dawson. If their professors can’t understand the difference betweencriminalhacking and harmless testing they shouldn’t be teaching and their students might need remedial training.

Dawson saw this as an optics problem and did what they could to get rid of it. Well that worked out pretty well didn’t it, Dawson?

Idiots.

In the last article we talked a bit about Content Security Policy. Now let’s see how to quickly apply it to an ASP.net MVC project.

The ASP.net MVC project have provided some extension points in the lifecycle of a request which allow you to hook in almost as if you’re using AOP. The one we’reinterestedin today is the global action filter. This is fired for every request and is an ideal place to put in a hook for adding HTTP headers.

First we create an action filter attribute which extendsActionFilterAttribute

As you can see here I’ve put in all the different headers we talked about yesterday. You could make this more efficient by checking the browser and only sending the response which suits. That is kind of a pain to do as CSP is still in flux on most browsers. In a couple of years you will probably be able to only send one header.

Next we tie it into ASP.net MVC. You can throw it into the FilterConfig.cs file like so:

(line 6 is the relevant one)

And you’re done! I tested it by throwing in an inline alert(“˜hi’) and found it to be effective. Well effective in Chrome and FireFox. IE10 still merrily threw up an alert. IE10 support is not there yet, perhaps in IE11.

There is one other good way to add CSP to an ASP.net MVC project and we’ll cover that in a future post.

A few weeks ago I was doing some research into web application security to placate some security concerns a security audit raised. For the most part what I found was the typical advice

• Avoid SQL injection attacks by using parameterized queries
• Use low privilege accounts to run the web server and the database
• Don’t connect to the SQL server with an account with permissions other than db_reader and db_writer(or your database’sequivalent)
• Validate user input
• HTML encode any untrusted string(so pretty much everything)
• Avoid using dynamic SQL

Onerelativelynew development I hadn’t heard of was using a technique called Content Security Policy. To understand the purpose of CSP you first need to know a little bit about what comes down the line to you from the web server and how the browser handles it.

For many years, until Chrome came a long a messed it all up, the first 7 characters of every URL you saw was http://. This was a protocol identifier just like ftp:// or smb://. Chrome dropped showing it, something I agree withentirely. The protocol HTTP is the language which web servers speak. One of the things which HTTP defines are things called headers. These headers provide meta-information related to the request or the response. For the most part you can be a web developer and never look at HTTP headers. It is the headers which contain POST parameters as well as Accept-Types and Content-Types. The body of the HTTP response contains the HTML, CSS and JavaScript which define the page. Within that markup you can define external resources to load be they images, scripts or style sheets.

CSP is another header which describes the behaviour of the browser when it comes to loading the external resources and processing internal scripts. There is a wide variety of things which can be done using CSP but the most useful is to block the execution of inline JavaScript.

What?

How is my JavaScript going to get run if I can’t have it inlined? Well pretty simply you make all of your javascript included from external files.

Why?

Because one of the most common attacks against sites it to inject some nefarious JavaScript in a way that it is rendered out when other users are logged in. By doing so you can grap their cookie information or information on the page. Think about a site with a comment system, if a bad guy injects some javascript code which can run in the context of other users then they can perform any action that the logged in user can. If all your JavaScript comes from static JavaScript files then there is no attack vector to exploit.

To get this working you’re going to need to add 3 different headers to your site. This is because the various browsers have differing levels of support for CSP.

Content-Security-Policy: script-src 'self' 
X-WebKit-CSP: script-src 'self'
X-Content-Security-Policy: script-src 'self'

The first line is the policy as defined by the W3 standard, it is supported only by chrome and even then only by version 25+. The second version works in older WebKit based browsers. The third is supported by FireFox and IE10+. The support for CSP across browsers is not fantastic. At the time of writing there is support for about 55% of users.

There are quite a few rules you can use in the CSP. The rules above require that all your scripts come from your domain. If you make use of a CDN then you can add it to the end of the rules

Content-Security-Policy: script-src 'self' https://youcdn.com
X-WebKit-CSP: script-src 'self' https://yourcdn.com
X-Content-Security-Policy: script-src 'self' https://yourcdn.com

You can also set the default so that all resources (scripts, style, images, flash, frames, fonts) are restricted to your server.

Content-Security-Policy: default-src 'self' https://youcdn.com
X-WebKit-CSP: default-src 'self' https://yourcdn.com
X-Content-Security-Policy: default-src 'self' https://yourcdn.com

Once you get your head around not being able to use inline JavaScript then CSP is a clear win and should probably be the default when you create a new project.

If you’ve ever worked for a large company then you’ve probably run into a change management policy. If you’ve been particularly bad in a previous life and I’m talking tremendously bad, maybe you caused the extinction of a species or you failed to equip the Titanic with enough life boats or you composed country music, then you have had to deal with a change control board. Just the words strike fear into my heart. The only way it could be worse is if you slap the word “global” or “enterprise” into the phrase:

Global Enterprise Change Management Board

When I heard the phrase I use to picture a mystical circle of elders who, filled with the knowledge of decades of experience and probably a dozen degrees a piece. They would have such integral knowledge of the systems that they would just be able to look at a requested change and intuit what would break.

The Change Management Board

I don’t think that anymore. The truth is that change management boards tend to be populated with management types who really have no idea how things actually work. Their technical knowledge is out of date and they have to rely on the people requesting the change for background knowledge. If you’re looking to the person requesting the change to describe and analyse the change then why even bother having a change management board? No reasonable checks andbalancesare provided.

The purpose of a change management process is to try to restrict unexpected side effects from changes to the computing environment in a company. What it actually does is slow down change and make IT less responsive to the changing business environment. If the effects of a change aren’t known then why are you making the change? You’re basically saying “we don’t understand our environment sufficiently well to know what we’re doing”.

Many would argue that this is understandable, after all the computing environment at large companies is stunningly complicated. I don’t buy it. If you go to your doctor they understand the body well enough that they know what the side effects could be of giving medicines. Through experimentation and analysis medical science has cataloged the possible side effects of using medicines. We would not accept doctors giving us medicines which aren’t understood so why are we accept the same thing from our IT groups? The human body is many many orders of magnitude more complicated than even the most complex enterprise networks.

We are fortunate to live in a time of virtual machines and provisioning tools like Chef and Puppet. Using these tools it is possible to easily establish full test environment in a matter of minutes. The test environment can be a scaled down version of the production environment. This gives an amazing tool for testing any change. Even if your company doesn’t have the spare computers to provision an environment then you can still build a test environment on EC2.

If you’re afraid of change and feel the need to try to control it using a change management board or a rigid change management process then you would be far better off spending your time developing a reproducible testing environment and a suite of tests. Frankly not having a solid testing environment is irresponsible. No amount of change management is better than a realistic testing regim. This isn’t a problem of lack of regulation, it is a problem of lack of understanding and professionalism. It is a cognitivedissonanceof restricting change when the business is based on change. It has got to be fixed.

Note: I will be presenting a talk on data visualization in HTML5 on February the 14th at the Calgary .net user group. Keep an eye onhttp://www.dotnetcalgary.com/ for details. This blog is one in a series which will make up the talk I will be giving.

In the last article we created a simple little hard coded graph with Raphaël. I also insulted the Germans. That wasn’tentirelyfair because Raphaël is really an Italian name and we never thrashed them in a war, probably because they were too busy being defeated by the French. The French. Oh, and we did thrash the Italians too. That’s why you come to this blog: friendly racism, code and an inability to forget wars which happened 40 years before the author was born. So we’re’ still going to call the library Ralph.

Building JavaScript graphs is pretty easy with Ralph but we still don’t want to recreate the graph on every page where we need a graph. The solution is to turn it into a component. Honestly JavaScript is pretty crummy at being put into a component. Creating classes and namespaces in javascript is possible but it is a lot of boiler plate code and look like a mess. Keeping code in namespaces or modules is key to building a scalable application where there are no collisions between names.

Fortunatelywe live in an age where there are multiple languages which transcompile down to JavaScript. For this effort we’re going to make use of TypeScript. TypeScript is an open source project which was created by Microsoft. It makes use of some conventions which are looking like they are going to be a part of the next release of JavaScript. In many ways it is like JavaScript vNext right now.

I’m going to dive right in and rewrite this puppy as a component in TypeScript

Okay that was fun but what is all this doing? Well on line one we have started by creating a module. A module is basically a namespace. Then on line 2 a public, or exported class inside that module. This is just like you would expect a class to behave in Java or C#. Within that class we define a constructor. One of the cool things is that prefacing each parameter in the constructor with public make it a public property on the class automatically and assigns the value from the constructor to it. C# could use a shortcut like that! We also set the data types. This doesn’t really do anything with the generated JavaScript but it does throw compiler errors if we use a string when a number is expected. TypeScript is great in that it allows you to tune how much strong typing you want.

Another great feature in the component is the use of ES5 style loops on line 29. This is basically an iterator syntax.

The final thing to which I wanted to draw your attention was the lambda style anonymous functions. You can see this inside the same loop on line 29. I’ve always found this syntax cleaner than a full function. The => is sort of the official syntax now for lambda functions with C# and Java both adopting it.

To make use of our new graph component is easy. We just call

Now, of course, this all compiles down to JavaScript because you could have go exactly the same functionality in pure JavaScript. What does that look like? Well it is a bit more verbose:

I find the TypeScript to be way more readable.

In the next part we’re going to look at an alternative library which might be better suited for creating data visualizations.

From time to time I find that I have to create PowerPoint presentations. I don’t like it and I’d much rather use a tool like Impress.jsor deck.jsor better yet not use slides at all.Unfortunatelypeople have grown to expect slides and while javascript options are cool they aren’t maintainable by the non-programmers in my group. One of the pieces of advice my wife gave me about presentations is to put the slide number and total number of slides on the bottom of each slide.

“If you’re going to make people suffer through your presentations you can at least give them the hope of knowing how much longer it will last”

-My Wife

She isn’t wrong. I wanted to make my presentation a little bit more interesting than the average so I googled for a progress bar for powerpoint. I found a site which listed how to do it. I modified the code a little so it picks up the schema from the current slide master and has a page number on it.

You can just copy this into a new module into your PowerPoint’s code behind(hit Alt-F11) and then run it with the little green run arrow. You’ll need to run it again every time you change the slide count.

It comes out with a progress bar at the bottom of each slide which looks like

Now you’ll never have to wonder if I am almost done my ranting.

Primitive types are a lot like cows: they seem friendly but if they got the chance they wouldeat you and your entire family. With a little bit of effort, though, you can defuse the problem. This has largely been done by people who practice Domain Driven Design(DDD) for some time. One of the tenants of DDD is that of value objects. The concept is a little difficult to grasp but basically it comes down to objects which are equal when their value is equal.

Here’s an example: I once worked in a training institute where we had a huge number of student records. Because the software which ran the registration department wasn’t very good the registration staff tended to create new records for every student who phoned up to register. This meant that we had literally thousands of Bill Smiths in the system. Each one of these had a different student number(which was used as the Id) but their names and addresses could often be the same. We once tried to merge these records together but it proved to be a total disaster. You would think that two Bill Smiths who live at the same address would most likely be the same person, however we found that the number of people who name their kids with their name is astronomically high. These two Bills Smiths were father and son so merging them didn’t work. Students are an example of an entity. When their Ids are different then they are different. However each one of these entities had a value object of an address in them. If the properties of two addresses are the same then the addresses are the same and can be swapped one for the other.

Encapsulating the various fields of an address into a value object allow you to be sure about what you’re dealing with and handle it correctly. F# applies this idea to numbers and allows you to includeunits in the definition of numbers. This is the sort of thing which could have save NASA fromcrashing a probe into Mars. But it isn’t just numbers you can apply it to, you can use the idea everywhere. I often see code which looks like

This is a quick utility method for determining the largest file in a directory. On the surface it is an easy function and the parameters look good. However is there anything here which stops me from passing in a directory name of “my uncle is a small fishing town on the coast of the Adriatic”? Not really. The problem is that passing in a string doesn’t give any hints as to what is expected by the function. Sure the name of theparameterhelps but can I pass in relative directory names? How about directories on a file share, is that permitted? The return type seems good too. But the string which is passed back could be a local file name or a full file name, it is impossible to tell without dropping to the documentation which may, or may not exist. The function has a looser contract than it could have.

Noted brain-boxAmir Barylkoonce taught me to have functions take the most limited possible object. Don’t let functions take in a more powerful object than they need. So if your function doesn’t need to update the properties in a list have it take an IEnumerable instead. To that I would like to add “be explicit about the datayou’re consuming and producing”.

Here all the confusion about what sort of information is going into the function and coming out has been eliminated byencapsulatingtheprimitivesin a value object*. Much cleaner, don’t you think?

*Yes, I know that strings aren’t primitives in C#. Feel free to substitute the string for an integer in your picky minds. I’m talking more here about using generic types than what is officially a primitive.

Note: I will be presenting a talk on data visualization in HTML5 on February the 12th at the Calgary .net user group. Keep an eye onhttp://www.dotnetcalgary.com/ for details. This blog is one in a series which will make up the talk I will be giving.

In the last part of this series we looked at building a basic graph using static SVG. This approach is a little limited in that it is painful to build up this markup on the server side. I mentioned that SVG elements are part of the DOM and this is true but it isn’t as easy to manipulate the items as you might think.

Here is some code which seems like it would add a new circle to the SVG

But if you run that on the page that we created in part 2 the expected circle doesn’t appear. What’s going on? Well even though the circle is appended to the SVG when we examine the DOM in the developer tools in Chrome. Well it is a bit weird but despite the fact that the code exists in the same document it is actually in a different name space so the circle we add is not a real SVG circle. There are some hacks to get around it listed in this great Stackoverflow question. Instead of these hacks you can use a graphing library like Raphael. Technically the e in Raphael has an umlaut on it but I say we didn’t take the birch cane out and give the Germans a right proper thrashing so they can go about inventing characters.

Raphael.

Ralph.

Jolly. good. show.

Raphael is a library for manipulating SVGs and easily creating drawings. It is great for the sorts of data visualizations we’re interested in. Let’s go about recreating out graph from part II using Raphael.

This will create a single bar just like we did previously. You can see that the methods for Raphael look pretty similar to the SVG native commands. Now the advantage of using javascript is that we can write functions to make our lives easier.

Here we’ve made use of some data which could be json sourced from the server or from some other API. We’ve also done some simple math to figure out appropriate column heights. This makes everything far moreexpandable. If we want more columns then all that is needed is to add more to the data array. In this example code we haven’t accounted for recalculating the width of the columns so this graph will become wider as more columns are added.

You might notice that the last column there is clipped. That’s because we have more columns than can be fit into the size of the SVG we created.

We can easily add labels with just one more line, in this case line 26.

We can extract the javascript into a component and use it all over our site. We’ll look at doing that in another part of the series. We’ll probably see what we can do about cleaning up the javascript too, I don’t like the look of those functions.

About a month ago Tom Janssens, who is a constant force on the DDD-CQRS mailing list and a generally smart dude, posted a link to his latest CQRS creation. Entitled Mauritius this CQRS example was an experiment around minimizing infrastructure. A lot of people get hung up on thinking they need a service bus and idempotent commands and the ability to handle asynchronous updates to their composite UI when they first look at CQRS. This isn’t the case and you can make some very simple CQRS solutions like Mauritius and Greg Young’s Simple CQRS.

Anyway CQRS isn’t the subject of this post. What I wanted to talk about what this great piece of code from Mauritius

This is basically a conversational way of checking constraints. If you were to use it in, say, an ASP.net MVC controller it would look like

Which is much easier to read and understand than the typical way of doing this

I’d really like to see more of this style of coding, to me it exemplifies the idea of self documenting code.

Note: I will be presenting a talk on data visualization in HTML5 on February the 14th at the Calgary .net user group. Keep an eye onhttp://www.dotnetcalgary.com/ for details. This blog is one in a series which will make up the talk I will be giving.

In part 1 we took a look at canvas vs SVG for building graphs and data visualizations. We decided that SVG would probably be better for our purposes. We can build up SVGs by hand or by using a library like jQuery after all they are simply part of the DOM. If you remember SVGs are made up of a series of simple shapes. So let’s build a few little visualizations with SVG. How about a bar chart to start with? A bar chart is made up of a series of rectangles of various different heights.

First thing we need to do is include the SVG in the page. This can be done a number of ways. You can link to an .svg file, you can put it in an iframe or you can embed it directly on the page. I like embedding on the page as it saves a server trip. Now unfortunately the blogging platform I’m using doesn’t support SVG, so I’ll put in raster images instead of the SVG. There are some potential security issues with SVG so that is likely the reason the platform doesn’t support them. These issues will be ironed out just as security issues with HTML were ironed out years ago.

To start with we need to include an svg tag in the document and give it a few instructions

This renders a single bar of our bar chart. The code is pretty easy to understand. The recttag creates s rectangle with a width of 50 and a height of of 150 offset 20 pixels from the top left corner of the SVG. It looks like this:

Weeee! Okay so what next? Let’s build up the SVG necessary for a full graph. We’re going to need a few bars as well as a legend and an axis. Let’s start with a few bars

Here we’ve just added a few more rectangles and reduced the height of each. Because the origin (0,0) is in the top left we also have the change the y value for each bar. This generates

Now let’s add the axes. To do this we add a couple of lines to our SVG

We’re almost done here. Let’s add some labels and a title.

Here you can see we’re adding a series of X and Y axis labels as well as the title. Placing text in SVG so it looks nice in relation to the other elements is difficult. If we were programatically adding elements to the SVG we could calculate the length of the text and position it properly.

Now we have a full graph with a title, labels and the introduction of a kick-ass new month. I’m also comforted to know that there is always at least two monsters under the bed. It is when there is only one they get board and devour your young. True story.

All together the code looks like

In the next post we’ll look at using some libraries to make our job easier.