Jonathon Bolster

web developer, programmer, geek

Enable autocomplete for all fields

This is part of my idea to just write a post for all the code snippets I have locked away in gists (especially bookmarklets)

Usually, to pass security requirements we need to disable autocomplete on all the form fields which can get annoying during development.

Here's a small feature to re-enable autocomplete on all forms and input fields:

[]'form,input'), function(e){ e.removeAttribute('autocomplete')})

And here's it in link form for clicking and dragging to the bookmarks toolbar: Enable autocomplete

Elsewhere, I had something that would raise a warning about form fields not having autocomplete disabled (hint: it's more or less the same as above).

Still here!

Apparently plans change quite a bit!

I am still in Australia and plan to stick around for a lot longer - currently waiting my Permanent Residence! So, my short holiday in Australia has turned into something much bigger.

This blog has definitely been a bit quiet over the last year but I have a load of gists with snippets of code I've done and want to write about.

Stay tuned.

Where in the world am I?

I've been fairly quiet over the last few months with no blog posts and very little in the way of Twitter messages.

I'm in Australia! After resigning from my previous role, I picked up my passport and decided to venture half way across the world for a bit of travelling. So far I've been away from the UK for 4 months and in that time I've done a lot of amazing things - hand-feeding dolphins and diving in the Great Barrier Reef being among some of my favourites.

For the meantime, I've decided to try and gain some employment so that my passport pages can get a few more stamps before I return home! If you happen to know of any development work in the sunny country, please let me know. Otherwise, keep an eye on my github page to see what I'm up to.

Outputting an MSSQL database as a JSON string

Why would I want to do this at all? Surely this is madness, I hear you say!

I wanted to be evil for a little bit (side note: don't be evil) and I was playing with Troy Hunt's invitation to hack his site. Well, not his personal site but one he set up for a course he's running.

I noticed that there was a SQL injection attack on one of the pages and wanted to see just how much information about the database I could get from that.

Then I created this (well, it was slightly modified to hack Troy's site):

select '{database_name:"' + db_name() +'", tables: [' +
    SELECT ',{'+ti.tableInfo +'}'
        select 'table_name: "'+ + '", columns: [' +
                                SELECT  ',{column_name: "' + CAST(c.column_name AS VARCHAR) 
                                + '", type: "' + cast(c.data_type as varchar) 
                                + '", char_max_length: "' + cast(c.CHARACTER_MAXIMUM_LENGTH as varchar)
                                + '", char_octet_length: "' + cast(c.CHARACTER_OCTET_LENGTH as varchar) 
                                +'", nullable: '+ CASE c.is_nullable WHEN 'YES' THEN 'true' ELSE 'false' END + '}'
                                FROM information_schema.columns c
                                where c.table_name =
                                FOR XML PATH('')
                        ,   1
                        ,   1
                        ,   ''
                    ) + ']' as [tableInfo]
        FROM sys.Tables t
    ) as ti
    FOR XML PATH('')
), 1, 1 ,'') + ']}'

What the above piece of code does is create a JSON version of your database schema. It uses some hackery of using STUFF a couple of times to pull information about the columns and the tables (well, I say hackery because it looked hideous but works).

A tiny bit of HTML, JS, and Knockout and I have a lovely little jsbin to describe the schema:

Of course, this was all a bit of learning for me and I don't actually intend to hack a website so just in case people didn't see the note above: DON'T BE EVIL.

I also recommend Troy's course on PluralSight (which goes with his 'Hack yourself first' site).

Grabbing image data from an external source to stuff into a canvas element

I was playing with Remy Sharp's collaborative drawing example after he posted it on Twitter.

Drew a couple of pictures and realised that I'm not as handy at drawing with the mouse as I used to be - so then I figured it would be better if I just put a random picture of a unicorn in. So I whacked open Developer Tools and tried to directly draw an image on the canvas element:

var img = document.createElement("img");
img.src = "";

Can you see the problem? Pub-quiz points if you correctly guessed 'Cross Domain Security'. It was perfectly fine to chuck the picture into the canvas without a problem cropping up. The issue happens when the code tried to call 'getDataURL' for transmission. That's the no no.

So what did I do? I cheated a little bit - browsing to the picture I wanted, getting the dataURL and copying it across to the original browser window.


var canvas = document.createElement("canvas");
canvas.width = 50;
canvas.height= 50;

// Random image from Google Image search for unicorn - don't judge me!
var img = document.createElement("img");
img.src = "";

var ctx = canvas.getContext("2d");

var dataStr = canvas.toDataURL("image/png");

The window URL changes to give me my data URL (which I've put as the src attribute for the image tag below:

Base 64 encoded image of a girl from glee

Last thing to do is set the encoded data as the src rather than the external image URL in the code above:

var img = document.createElement("img");
img.src = "data:image/jpeg;base64,/9j/4AAQSkZJR....";

No more security problems - but we did cheat! It's a far from perfect solution (and far from perfect coding) but it works for what I wanted to do. I wanted to manually put external image data on to a canvas element and do it manually.