Properly Installing Cheap SSL Certificates

If I made this mistake, I’m sure someone else has too.

I have a small website I maintain with a friend where we sell reusable static cling vinyl window snowflakes.  I believe we produce the highest quality snowflake on the market, and we sell it on Etsy, eBay, Amazon, and on our own website at www.windowflakes.com.

For the website at windowflakes.com, I was showing it to some family members tonight when it came up with an SSL error.  Something along the lines of “this certificate is not trusted”, etc, etc.  Ahh! This is our busy season!  They were using IE9, but still I figured maybe I had let the certificate expire or something else was going on.  A little bit of research now that I’m home and I see that I didn’t install it properly.

Some Google searching and I ended up here:
http://www.sslshopper.com/ssl-checker.html 

You can type in your domain name and have it validate the certificate for you.  I did that and it passed on all entries, except for the last. “None of the common names in the certificate match the name that was entered (www.windowflakes.com). You may receive an error when accessing this site in a web browser.”

Fortunately, they also provide links to the fix:
http://www.sslshopper.com/ssl-certificate-not-trusted-error.html 

So I ended up here, since I got the certificate from StartSSL and use nginx:
https://www.startssl.com/?app=42 

And a few minutes later - fixed. All you need to do is merge the regular certificate file with the intermediary certificates you can download from the provider’s website.  Ran it again, and all was fine.

Go double check your SSL certificates are installed correctly too!

Development Tools I Use

I’ve shared parts of this list informally over the last couple of weeks to a few different people.  Posting here for convenience.  These are the tools I use on a regular basis.  A mix of .NET tools and javascript tools - but it should be obvious which is which…

Hardware

  • Macbook Pro Retina (purchased recently after I hosed the screen on my old Lenovo on a trip to DC)
  • I also have a custom built PC desktop, running Windows 7 64bit as the base OS, but using Virtualbox to manage a couple custom Windows environments for clients, and to boot into Ubuntu.
Software

Plugins / Packages / Libraries

I’m sure I’m missing stuff.  That’s good for now though.

Browser Unit Testing with Backbone, Mocha, Chai, and RequireJS

Now that I’ve been doing more node.js development, I decided to switch over to using RequireJS for browser javascript development for my latest Backbone project.  Unfortunately since some modules support the CommonJS format and some don’t, it took me a little bit to figure out the best way to do things.  I also couldn’t find anyone out there who had samples using version 2.0+ of RequireJS.

I’ve created a gist that has the files I used to get a basic test setup:
https://gist.github.com/3800736

Here are the pieces to that gist:

  • index.html - Just the basics to call require.js (which I call from the main application’s /libs/ folder, rather than keeping a separate copy in the tests folder).  This then uses the data-main to call SpecRunner.js.  In general I try to call all shared libraries from the application’s root, rather than copying to a test folder, so I don’t accidentally get library versions out of sync.
  • SpecRunner.js - This is the core to setting up tests. You need to reference all the libraries, including using the shim functionality of RequireJS to load Backbone and Underscore (you have to do this in your main app as well).  Note that this is also setup to use the chai-jquery plugin, and I like to use the BDD Should assertions.  Also interesting here is that mocha is called in the dependency list, but isn’t named in the function arguments.  This is done purposely to put all mocha variables into scope - “mocha”, “describe”, “it”, etc.
  • app/models.js and model-tests.js - Just a simple unit test to prove all this works, testing that Backbone correctly assigns the urlRoot.  Not necessarily a test you’d do in real life, but an easy hello world.  Note that I’m using the node format here of calling dependencies, but the other way RequireJS allows where you pass in an array of dependencies works just fine as well.

Hope this helps!

git push production

I have several sites that I manage in one form or another, and a couple years ago I made a huge move from sending files over FTP to maintaining a remote repository on the server.  Originally Mercurial - now Git.  Still, same concept:

  1. Push to a central repository like Bitbucket or GitHub.
  2. Create a local clone on your production server in your /var/www directory or whatever
  3. When you make a new change, commit it locally….
  4. … push to GitHub…
  5. … ssh into your production server …
  6. Do a ‘git pull’ from GitHub

This is better than FTP, but still isn’t ideal.  First, it puts either an .hg or .git folder in the root of your production code.  But also, it comes with the added step of having to SSH into your server.

With all the wonderful things Heroku can do with their ‘git push heroku master’, I figured I’d go looking for a better solution.  I found it here:

http://toroid.org/ams/git-website-howto

Here’s the core of the post:

  1. Make sure you can SSH into your server with your private key.  Plenty of articles on how to do that.  So in a terminal you should be able to type: ssh username@example.org and it’ll log you in without asking for a password.
  2. mkdir website.git && cd website.git
  3. git init —bare
  4. Create a new post-receive hook in git by creating a file in hooks/post-receive with this: https://gist.github.com/3421135
  5. Make sure it’s executable: chmod +x hooks/post-receive
  6. Then on your local repository:
    git remote add web ssh://username@example.org/website.git
  7. And the key part:
    git push production +master:refs/heads/master

Now, from your local git repository, you can do this:

git push production

And your changes automatically move to the live server!

IE CORS support in jQuery

Recently I’ve been working on a project, built in backbone.js, that is required to call a remote web service for its data.  It also needs to work in Chrome, Firefox, and IE back to at least IE8.

I was sure this issue had been solved already.  As it turns out, there are plenty of hacks out there to get it to work.  There’s a great post on StackOverflow with some of your options:

http://stackoverflow.com/questions/3385404/ie8-xss-jquery-problem

Initially I implemented the flxhr option.  Simple to get started - just drop some scripts on your page, check for jQuery.support.cors, and if the browser doesn’t support it, initialize the flxhr hack.  This of course requires the user has Flash installed, but that’s not a huge deal. Ultimately I went looking for another option however because users were reporting some issues with things hanging in IE, and although I couldn’t pin it to the Flash proxy, it seemed possible it was causing it.

Instead of trying to implement another hack, I decided instead to try the native XDomainRequest support in Internet Explorer.  This is what IE decided to use in IE8 and IE9 instead of XMLHttpRequest.  I found this little script that overrides a function in jQuery to check for XDomainRequest support, and use that instead in those browsers.

https://github.com/jaubourg/ajaxHooks/blob/master/src/ajax/xdr.js

Once again things were looking good.  That is, until there was a server error and backbone showed a 404 not found error to the user instead of the proper error message.  Looking at the code you’ll see on line 24 that if there’s an error in the ajax request, it has a hardcoded 404 error that it sends back to the jQuery callback.  Well, surely I can fix that I thought.  Maybe even patch it on Github.  Unfortunately, as the Microsoft page on XDomainRequest says, “The document can respond to the error, but there is no way to determine the cause or nature of the error.”  Sure enough, after plenty of testing, nothing I could do would give me a proper HTTP response from the server. Finally, the workaround:

https://gist.github.com/2655118

I took the same xdr.js code, but modified it slightly.  Unfortunately, I also had to modify the server-side code.  What I do now is always return a 200 response to XDomainRequests from the server, but if there is an error, I send a JSON response back containing the true HTTP Status Code (400, 500, etc), and a Message field with the error.  Lines 24-30 are what I changed to detect whether the response contains a JSON object with a StatusCode and Message field.  If so, it overrides the actual status code and response sent back to jQuery.

This feels like a horrible hack, but the experience seems to have improved, I can continue using my REST routes, and we’re not relying on Flash anymore.

Michael Cox

Michael Cox

Contact Info
Latest Tweets
Resources
Search