0 minutes, 18 seconds
Just after getting cleaned in the bath, my son was going on and on about a book he read at school. Likely, “The Three Little Wolves and the Big Bad Pig“, but I could be wrong.
Anyway, at one point he said you should write “bad pig” all over your body. To which I mentally added, “and go on stage half naked to perform in your band titled,”:
bad pig
0 minutes, 12 seconds
I was chatting my buddy the other night and he mentioned something about some one and described them as,
super resting bitch face
My response was unsurprisingly, “awesome punk rock band name!” This post also helps me clear out my in box to get closer to inbox zero.
2 minutes, 55 seconds
This post is a continuation of the my last post on the topic, “Howto: Sympa 6.1 on Ubuntu 16.04“. It should come as no surprise that this is about installing Sympa on the most recent version of Ubuntu to get the most recent version of Sympa (at the time of this writing). That’d be Sympa 6.2.16 and Ubuntu 17.04. The steps only vary a little between between the two, but here’s the all them for completeness.
Like the last post, this one assumes you have root on your box. It assumes you have Apache2 installed. It assumes you’re running a stock Ubuntu 17.04 install. It assumes you want to run Sympa on your server. It also assumes you’ll be using Postfix as the lists MTA. It assumes you have a DNS entry (A record) for the server. As well it assumes you also have an MX record pointing to the A record or no MX record so the MX defaults to the A record. If this doesn’t apply to you, caveat emptor!
To recap, that’s:
I also was using this server solely to serve Sympa mail and web traffic so if you have a multi-tenant/multi-use server, it may be more complicated.
These steps assume you’re going to install Sympa on list.example.com. There’s no reason you couldn’t use example.com instead. Your zero step should be sudo apt-get update&& sudo apt-get upgrade.
apt-get install -y sympa javascript-common libjs-jquery-migrate-1
cp /usr/share/sympa/default/web_tt2/head_javascript.tt2 /etc/sympa/web_tt2
And then edit /etc/sympa/web_tt2/head_javascript.tt2 and add the jquery-migrate-1.js file after jquery.js:
<script src="[% static_content_url %]/external/jquery.js"></script> <script src="/javascript/jquery-migrate-1.js"></script>
/etc/sympa/sympa/sympa.conf to match the following values:
listmaster listmaster_here@domain.com,other_here@domain.com domain list.example.com wwsympa_url https://list.example.com/wws default_home home create_list intranet
The “intranet” value will prevent some one from signing up and requesting a list with any approval.
lists.example.com should show the sympa UI, w00t!
update-rc.d sympa defaults update-rc.d sympa enable
/etc/postfix/main.cf edit these values to match:
myhostname = list.example.com alias_maps = hash:/etc/aliases,hash:/etc/mail/sympa/aliases alias_database = hash:/etc/aliases,hash:/etc/mail/sympa/aliases mydestination = $myhostname, example.com, list.example.com, localhost.example.com, localhost relay_domains = $mydestination, list.example.com local_recipient_maps =
## main sympa aliases sympa: "| /usr/lib/sympa/bin/queue sympa@lists.example.com" listmaster: "| /usr/lib/sympa/bin/queue sympa@lists.example.com" bounce+*: "| /usr/lib/sympa/bin/bouncequeue sympa@lists.example.com" sympa-request: email1@example.com sympa-owner: email1@example.com
newaliases reboot
Sympa should now be up and running at lists.example.com! All mail in and out should work so you can run your own list server. Please report any problems so I can keep this post updated and accurate – thanks!
0 minutes, 17 seconds
The amazing Archive.org just posted a Mac OS 7 emulator and it’s amazing. See, “Early Macintosh Emulation Comes to the Archive“. Given my first computer was a “Fat Mac“, seeing this operating system brought to life brought so many memories back. Thank you archive.org!! The even support full screen so you can run a 512×342 resolution emulator on a 4k monitor in a browser under Ubuntu ;)
3 minutes, 6 seconds
Recently I was tasked at work to get an instance of Sympa set up. Their docs are a bit scattered, but I found a promising post on debian.org which suggested I could get away with an apt-get install instead of needing to compile from source. Well, it turns out I did get it working, but only after a lot of trial and error. Given that some one else might be trying to do this, and because I had to document the exact steps for work, here’s a handy dandy blog post which I hope will help some one trying to do the same thing.
Good news for those looking to do this for Sympa 6.2 (latest at time of publishing), I have a post on how to do this exact thing on the soon to be released Ubuntu 17.04 with Sympa 6.2. Stay tuned!
This post assumes you have root on your box. It assumes you have Apache2 installed. It assumes you’re running a stock Ubuntu 16.04 install. It assumes you want to run Sympa on your server. It also assumes you’ll be using Postfix as the lists MTA. It assumes you have a DNS entry (A record) for the server. As well it assumes you also have an MX record pointing to the A record or no MX record so the MX defaults to the A record. If this doesn’t apply to you, caveat emptor!
To recap, that’s:
I also was using this server solely to serve Sympa mail and web traffic so if you have a multi-tenant/multi-use server, it may be more complicated.
These steps assume you’re going to install Sympa on list.example.com. There’s no reason you couldn’t use example.com instead.
apt-get install -y sympa
if ($cookie and $cookie =~ /^\d\{,16}$/) {
use_fast_cgi 1
If you don’t do this step, you’ll see full HTML pages show up in /var/logs/syslog and only 500 errors in the browser :(
lists.example.com should show the sympa UI, w00t!
update-rc.d sympa defaults update-rc.d sympa enable
myhostname = lists.example.com smtpd_tls_cert_file=/full/path/to/cert/apache/uses.pem smtpd_tls_key_file=/full/path/to/key/apache/uses.pem alias_maps = hash:/etc/aliases,hash:/etc/mail/sympa/aliases alias_database = hash:/etc/aliases,hash:/etc/mail/sympa/aliases mydestination = $myhostname, lists.example.com, , localhost relay_domains = $mydestination, lists.example.com
listmaster email1@example.com,other_here@domain.com domain lists.example.com wwsympa_url https://lists.example.com/wws
default_home lists create_list intranet
The “intranet” value will prevent some one from signing up and requesting a list with any approval.
## main sympa aliases sympa: "| /usr/lib/sympa/bin/queue sympa@lists.example.com" listmaster: "| /usr/lib/sympa/bin/queue sympa@lists.example.com" bounce+*: "| /usr/lib/sympa/bin/bouncequeue sympa@lists.example.com" sympa-request: email1@example.com sympa-owner: email1@example.com
newaliases reboot
Sympa should now be up and running at lists.example.com! All mail and and out should work so you can run your own list server. Please report any problems so I can keep this post updated and accurate – thanks!
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/2017 – Issue #3 on tableManager has been closed – CSRF protection in place! Go Nonce, go!
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!
Good:
Just one here, but the Bad:
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 ;)
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.
These are the talks I attended with a few notes where applicable:
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!
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:
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!
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!
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 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):
| 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!
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” ;)