tableMaker: Open Source PHP MySQL CRUD GUI library (Updated!)

1 minute, 56 seconds

I have to admit, one of the utter joys of my job is that they encourage me to open source software I write at my day job.  After looking high and low for a PHP framework or library to do a basic MySQL CRUD GUI, I gave up.  While phpMyAdmin is the longstanding champion for full featured DB administration, it’s way to complicated for an end user looking to just add a row right quick.  There seems to be an amazing project called CrudKit (great name!), but it has this one, massive blocking “feature”:

prevents usage in MVC frameworks
commit 047807d01f

This is, literally, what I was trying to do. I spent a some time seeing how hard it would be to contribute to CrudKit to get the feature I wanted working.  I ultimately decided that a bespoke solution would more quickly achieve my desired goals.  That said, if you do want a stand alone app, do check out CrudKit.

While I suspect it could use some rewrites to not have silly-long arrays passed as arguments, I’m quite happy with my results: tableMaker. This guy takes this PHP:

$tm = new tableManager(DB_SERVER, DB_USER, DB_PASS, DATABASE, TABLE);
$rowsArray = $tm->getRowsFromTable();
print $tm->getHtmlFromRows($rowsArray, "/edit?table={$tm->table}&id=");

And turns it into this HTML:

If you want to render a fully functional edit form with dynamic client side error handling and table sensitive validation rules, just run this PHP:

$row = $tm->getRowFromTable($_GET['id']);
print $tm->getAddEditHtml($row, 'edit', "/save?table={$tm->table}");

Which will output this responsive, nice looking HTML:

Two big features of tableMaker are it’s simplicity and it’s security*. Yes table maker can do whiz bang client side sorting, but it also can output tidy, HTML compliant tables.  Yes, we can make your browser download 100k+ of web fonts just to render an “X” when you have an error in your form, but it can also do with out all that noise – implementers choice!  Security wise, tableMaker abstracts away all the complexity while ensuring there’s simply no way for you to expose yourself to a SQL injection attack. (* We need some nonces).

Along they way in making this, I see all the cool kids are using Composer.  I’ve earmarked this guy for my next project!

I’m really happy to have been paid to write this library; I’d be even happier if some else on started using it! I’d about piss my pants with glee if some opened a PR ;)

Update 3/18/2017Issue #3 on tableManager has been closed – CSRF protection in place!  Go Nonce, go!

AppSec California 2017

4 minutes, 15 seconds

After attending both Defcon and HOPE, I thought I should open my mind to other, more traditional security conferences.  Since it was a short flight and of modest cost, I choose AppSec California, put on by OWASP.  It was great!

tl;dr

Good:

  • 11 of the 13 speakers/subjects I heard were great!
  • Santa Monica makes for a good venue: walkable, good coffee, good food and bike sharing program!
  • I fully grok CSP now
  • No big snafus by OWASP organizers: schedule, venue and food was well planned
  • Plenty of chance to meet and chat with folks
  • Two days was just long enough to pack in lots of good info, but not too long to be overwhelmed
  • Low cost registration

Just one here, but the Bad:

  • 2 of the 13 talks were bad.  One was a vendor pitch, the other was a possibly OK keynote, but speaker was a royal dick to the AV staff at the start of his talk

Santa Monica

This was my first time to Santa Monica (though maybe there was a trip when I was 18!?), and I liked it.  Biggest hits are it was highly walkable and had a bike share program. This meant I could walk to close by dinner and then the next morning take a ride along the beach to the conference:


As well, if you want to get your snooty 3rd wave coffee on, then you can bop over to Demitasse on 3rd street. Tasty! Another nice feature of the town is that they have a nice collection of trails along the beach.  The first night I was there I took a lovely 6 mile run on them well into the Pacific Palisades right from my hotel doorstep. Sunsets of the ocean are nice too (and I know I’m playing into OWASP’s desired PR For the location of the conference ;)

Conference highlights

Overall this was a great conference! I ended seeing 3 talks which heavily focused on Content Security Policy (CSP), which I’d only lightly heard about before.  When done right, and thoroughly, it removes the JavaScript attack vector including, but not limited to, click jacking and XSS.  Ilya Nesterov’s talk, “CSP: The Good, the Bad and the Ugly” really did a great job in describing how to implement it.  Specifically, he spoke about a lot of the pitfalls (no inline scripts vs inline scripts all having a nonce), browser adoption rate as compared to CSP Levels (eg full adoption of CSP 1) and interesting things about the CSP Level 3 draft.

I enjoyed Sun Hwan Kim and Julien Sobrier’s talk, “HSTS, TLS, HPKP, CSP: putting them all together to move to HTTPS” not only for the in the field experience of securing a large site, but for the audience questions as well.  While he didn’t have a talk at the conference, Scott Helmeott Helme had some great comments and questions.

Though her talk was a bit less organized than I’d hoped, I very much enjoyed hearing Yan’s talk, “Dissecting Browser Privacy“.  I’ve been following her blog for some years now so I it was nice to meet her in person.  Her talk wasn’t pitching Brave browser where she works, but Yan did reference it often in her talk.  I think it maybe the best browser for my laptop because it supports touch so well!

Not a highlight, but noteworthy, Gary McGraw did the opening keynote.  Before he could get started he choose to be demeaning in a very public way to the AV person.  It was 3-5 minutes of him being just shy of cursing out the staff about why the microphone wouldn’t work.  I later told the AV staff that she was awesome and I really appreciated being professional throughout the ordeal.  The other minor hiccup in the speakers was Jack Bicer’s talk, “Want to be secure? Eliminate passwords. If you don’t have a password, it can’t be stolen!”.  This ended up being 15 minutes of fear mongering about how your password can get hacked all while ignoring password managers. I left early, but heard later that, unsurprising, the “solution” to all these fears was to adopt Mr. Bicer’s product :(

Being a one man web dev shop, it was painfully obvious how important automation is. Static analysis of code, feature and regression checks, pentests and more can be run in an automated fashion even if you have to manually kick off the automated tests. This provides the equivalent of many man hours of manual tests all done at no time-cost. The conundrum is that it can take months to set this automation up and that’s time when you you’ll be releasing no new features and fixing no bugs.  Matt Tesauro’s talk, “AppSec Pipelines and Event-based Security: Moving beyond a traditional security test” was a good reminder about this.

Talks

These are the talks I attended with a few notes where applicable:

MapTableMaker: An open source, simple-to-use, high resolution SVG map tool

0 minutes, 45 seconds

After helping release MapTable, I knew I wanted to make it more accessible for non-programmer types. While my post about using MapTable in WordPress was a start at this, you still had to have be fairly comfortable with code.

No longer! As of today, you can now use a stand alone web site to generate high resolution choropleth maps: enter MapTableMaker! This is an web application that let’s you enter CSV values for each country and quickly generate a choropleth map of the values. It allows you to specify both positive integers which will render in blue and negative ones that will show in red. It uses a percentile scale to distance the colors so they’ll be more easy to discern from each other. The resulting map is high resolution and print-ready. Here’s an example:

Of course, if you’d like run your own instance of this, MapTableMaker is fully open source (MIT). Check out the GitHub page for MapTableMaker for details on how to get your own server set up!

Happy Histogram

2 minutes, 3 seconds

The other day I was working on redoing our old Internet governance meeting page. On it, there was a simple histogram of the meetings across a year. It looked like this:

Seeing this server side generated, non-responsive, raster based image, I thought, “We can make this waaaaay better”. So, I went about looking for a drop in replacement that would fix all that, much like MapTable fixed our server side, raster based non-responsive maps.

I tried a number of full blown graphing libraries (jqPlot, Flot and jQuery sparkline, all awesome in their own right) as well, I looked at the top available JS solutions. They all failed me in one way or another. Some of them didn’t like having hundreds of data points being rendered on them. Some of them added unwanted anti-aliasing on 1 pixel wide elements (I’m looking at you Canvas!). Many of them were going to take a lot of effort to look good on mobile devices at the horizontal scaled I was looking for.

So, decided roll our own. And, of course, I decided to open source it ;) Had I drawn it before I made it, I would have drawn something like this:

img_20161025_205850

The idea is that the whole thing would just be made of DIVs styled by CSS. Since CSS is insanely precise, even allowing for negative margins, you can skooch things like x and y axes labels just where you want them.

Thus, Happy Histogram was born:

 

What you see there is the exact same graph as above, rendered with a whopping 900 byte JavaScript Library. Check it out on Github!

If you want to customize it, just throw a little CSS at it and make it your own:

#year2 .yearHistogram .emptyTop { background-color: yellow; }
#year2  .yearHistogram .filledBottom:hover {background-color: #ddd;}
HappyHistogram('year2', Months, 'orange');

 

Or maybe you just want to show one value per month? Easy Peasy:

 

 

Likely I won’t do too much more development on this unless as it is fully formed and already deployed. However, part of my job satisfaction right now stems from the fact that all new features always get pushed upstream, so y’all might see more work on this soon!


Untangling odd behavior of stupidtable.js

0 minutes, 54 seconds

I’ve been doing a lot of work in the day job working with Joseph McCullough’s wonderful Stupid-Table-Plugin for jQuery. This allows you to take a static table and with a little JS code, make it into a dynamic, client side sortable table. As well it’s HIGHLY configurable and totally awesome!

The Odd Behavior

However, I noticed when I had a table with data like this:

Fruit Color
banana yellow
peach yellow
squash yellow
apple red

Sorting by “Fruit” worked exactly as expected. However, sorting by “Color” yielded odd results. While the 4 colors always were in the correct order (grouped together before or after “red”), the fruit column would change order if you clicked the “Color” header more than twice. Very confusing! Upon close inspection, on the 1st, 5th, 9th etc. clicks of “Color” the “Fruit” columns would be the same order and the same is true of 2nd, 4th, 6th etc. clicks. It then dawned on me that Stupid-Table-Plugin was reverse sorting rows with identical values each time I clicked the same “Color” column head.

The untangle

The fix, once knowing the problem, was easy. Just declare a data-sort-value for each color and append a random string to it (eg foo, bar, baz):

banana
    
Fruit Color
yellow
peach yellow
squash yellow
apple red

This way the colors will always be sorted in a consistent order. Point haired bosses rejoice – your underling coder made your table sort right!

Addendum

I want to again thank Stupid-Table-Plugin for being awesome. Great discussions like Issue #106, “weird behavior when td have empty values” both gave me faith in the author as being open to feedback, and made me trust the plugin to be well thought out. Long term, this of course should be fixed, and hopefully will be with Issue #112 – “Sort on Multiple Columns”.

Finally, if you are sorting a BIG table with a lot of data-sort="int" instead of data-sort="string", like above, you can simply make your values into data-sort="float" and concatenate a random, but unique to that row, decimal onto data-sort-value (eg, “300” => “300.0002” and “90” => “90.0301”). This way the sort will still work. If you tried to sort the float values as a strings, it would put “300” before “90” ;)

Weak Crypto in Star Trek Beyond (SPOILERS!!)

2 minutes, 20 seconds

Star-Trek-BeyondLet’s get this out of the way upfront: the most recent installation of the Star Trek reboot, “Beyond”, was exactly what I’d hoped it would be. It was an action packed, summer fun movie. It did not exceed, but definitely met my expectations.

The end however, was totally silly. It was the peak of the action and the sound effects and music (more on this in a second) were so loud I don’t think any one could hear my wife and I laughing. Like, laughing to the point of crying because what we were watching was so funny. But, for me at least, I kept on thinking, “wait – what?” There’s no way modern crypto would allow this scene! Let alone hyper futuristic crypto of 2263! Let me explain.

spock.bonesIn the end of the move (yes, like I said, spoilers) the Enterprise crew is rocking the 99 year old USS Franklin. They are fighting the boss of the movie, Krall (not to be confused with Khan), who has control of a massive swarm of space ships based on alien technology. The swam is all perfectly in sync, just as you’d expect your alien swarm army to be. This, by definition, means that they are communicating with each other in real time to coordinate complex movements in 3d space. And how did they figure out how to beat the boss? Well, simply by “corrupting their communication with radio waves”. Radio waves like Sabotage, by the Beastie Boys. That’s right, the Beasties are literally weaponized to literally blow up the enemy hordes. Here’s the Franklin “surfing” the enemy swarm with them blowing up in their wake (click through to see the the preview where the gif came from):

beasties.loop

So, aside from the fact that radio waves travel at the speed of of light and should be radiating out in all directions, not trailing behind them, how exactly was this supposed to be working? According to wikipedia, “they [Spock and Bones] learn that VHF transmissions can disrupt Krall’s communications and destroy his fleet.” But, like I said, this is the year 2263! Surely the alien technology powering this swarm has sufficient encryption to ensure that simple VHF radio waves won’t interfere with communication, right? Beyond things like TLS Handshakes, PKI (or even hash-chains if you wanna get tricky), basic header checksums, like in IPv4 would prevent this type of interference.

MD5But, maybe not? Maybe the aliens implementing the swarm networking were just lazy? For example, the MD5 hashing algorithm was released in 1991. By the late 90’s and early 2000’s it was the de facto way to store passwords in databases. However, as early as 2005 collisions had been proven to be a reality. In 2008 at the 25th Chaos Communication Congress, researchers categorically proved that no one should trust MD5. Later that same year CERT issued a CVE agreeing. Fast forward 4 years to 2012, and what do we find? 43 million hacked passwords in unsalted MD5 is what we find. Well, we found out today (Sep 1, 2016), but the coders responsible for securing tens of millions of accounts back in ’12 should have known better. So yeah, maybe the aliens were more focused on meeting deadlines than they were in defending against VHF interference?

A great, small USB-C charger for your XPS 13 (or MacBook) (Updated 4/16/17 DO NOT BUY)

1 minute, 53 seconds

5/12/18 Update: I’ve found a new charger that’s working well (and seemingly safely) – check it out!

4/17/17 Update: These chargers have been deemed unsafe. Please do not use them. See this post for details.

While I was on vacation, I forgot my laptop charger. I found on amazon that you can get an OEM charger for the XPS 13 (9350) for about $30. This is fine, it will work the prior gen XPS 13 with out USB-C/Thunderbolt too. I got it and used it for the remainder of my trip.

Then, when I got home, I wondered if there were any good, cheap, small USB-C chargers that would work with my laptop. Lo, the RAVPower USB-C charger. Full title, on Amazon, is, “USB C Charger RAVPower 36W Dual Ports USB Wall Charger with USB-C (20V 1.5A, 15V 2A, 9V 2A, 5V 3A max) for MacBook, Dell XPS 13, Nexus 5X/ 6P and iSmart (5V 2.4A max) for iPhone and more Black”. OK, what ever RAVPower, too long on the title. But you know what is not too long? The products it works with:

  • Apple’s 2015 MacBook
  • Google’s second Chromebook Pixel
  • ASUS Transformer book T100HA
  • Dell XPS 13 & 15
  • HP Elite x2 1012 G1
  • Razer Blade Stealth, Blade (2016)
  • Nokia N1, ASUS ZenPad S8, Google’s Pixel C
  • Nexus 5X, Nexus 6P
  • Asus ZenFone 3 Deluxe
  • BLU Vivo XL and BLU Vivo 5
  • HTC 10, LG G5
  • Microsoft Lumia 950, 950 XL
  • Motorola Moto Z, Moto Z Force

Totally awesome list! I got the charger today, so I don’t have any long term usage notes just yet. However, given it can both charge my phone over speedy USB-C, or dual charge my laptop AND my phone, as it has normal USB port to charge with, I’m fairly confident it’s my new fave travel charger. One caveat is that it does not come with a USB-C to USB-C cord. I got a nice looking 10′ one which I’ll put a velcro tie on when it arrives.

If you are an XPS 13 user, or thinking about becoming one, be sure to read my write up on running Ubuntu 16.04 after purchasing the windows version of the 9350.

1/4/17 Update – I’ve been using this charger for 4 months now and it’s awesome! I got solid, braided 10′ USB-C <-> USB-C cable to use with which I recommend as well. It comes in 6′ flavors as well. Cable aside, the only caveat is that the charger does get quite hot – but so far not so much that it has me concerned; I don’t see any signs of the plastic discoloring.

Laser Cut Acrylic SYN Shop Dice

2 minutes, 19 seconds

Back in May for this past Las Vegas Science and Technology Festival, the SYN Shop hosted an open house. It was awesome!

first.draftI volunteered to show folks our Laser Cutter. This is by far one of, if not *the*, most popular tool at the SYN Shop. In preparation of showing folks how it worked, I made a bunch of cubes. Not just any cubes though! I started with a 1.6″ cube at Maker Case with finger joints. I then added our logo. I did a test run and quickly saw that the translucent side of the acrylic I was using looked much better when viewing it from through the oppisite clear side, instead of viewing it directly. close.upI reversed our logo and as well added a very small mark in the upper left. This mark would allow me to run two discrete jobs: an engrave job and then a cut job. If you do them as one the laser cutter will engrave all your cuts and then cut them – a huge waste of time. The mark in the upper left allows me to keep the registration the same as long as I don’t move the bed or the piece on the bed.

1.6.inch.box After feeling confident I had a good prototype design and size, I embellished it a bit by adding the 5 dice sides 1-5, the sixth would be our logo. I then laid it out as many up on the design as our laser cutter would handle, 4 x 3. Each sheet took over an hour to engrave the logos and dice faces and cut. I think I ended up making 48.

IMG_20160429_142319I learned after doing one sheet later on that though you get a bit less burn marks when you leave the protective sheets of paper on – it takes WAAAAAAY longer to peel when it has a logo engraving into it one side and then the cube face cutting it too. I pre-peeled both faces to save time. However, my son was totally into the production of peeling, stacking, and rubber banding the whole thing. I didn’t even need to tell him that he and his sister would get one to share after we ere done. We had fun!

IMG_20160504_231512During the event it self, I wanted to keep the laser cutter running to show how it works. As well, we quickly ran out of acrylic dice, so I needed another design to cut. I found a good, butterfly image that I traced in Ink Scape to create a nice looking SVG. From that, I made a bunch of test cuts and then just left it running during the day. As soon as the job was done I could pop open the lid and hand out hot, freshly cut butterflies.

OPEN.house.butterfly.trimAll of the SVGs in this post are free to use for what ever purpose you want. It’d be great to hear of any uses though! I actually have a huge backlog of SVGs I’ve created over the past 1+ year that I should share…

Finally, here’s a video of my kids very much enjoying two octopi 3D printed with heat sensitive filament (also free handouts that day ;)

https://vimeo.com/179411667

Blogs I Read

1 minute, 54 seconds

After my upgrade to my new phone, I accidentally deleted the list of all my RSS feeds I follow. It took some months to remember all the different ones, but I’ve finally recreated the entire list and re-subscribed to them all. I use RSS Reader on Android with pro version (no ads, no tracking!).

After completing the great resubscribe of ’16, I decided to make a post about my list mainly so I have a backup but also so my friends who sometimes ask where I get my news can follow along if they so desire.

A list of blogs I follow, non-personal:

Blogs I follow, personal (people I know):