Setting up a HTTPS dev workflow on OSX

We have been doing a lot of work on building an OAuth2 Server. The OAuth2 RFC mandates the use of TLS under its sections 3.1.

Since requests to the authorization endpoint result in user authentication and the transmission of clear-text credentials (in the HTTP response), the authorization server MUST require the use of TLS as described in Section 1.6 when sending requests to the authorization endpoint.

Here is how I setup a TLS workflow on my OSX machine.

  • Setup a DNS Server locally to point
  • Setup a script to generate wildcard SSL certificates using OpenSSL
  • Add the .crt file to KeyChain Access app to show up the green lock icon.

Setup Local DNS Server

DNSMasq is a lightweight server designed to provide DNS and other services like DHCP. DNSMasq is available on homebrew.

myproject $ brew install dnsmasq
myproject $ sudo cp /usr/local/opt/dnsmasq/homebrew.mxcl.dnsmasq.plist /Library/LaunchAgents
myproject $ sudo mkdir -p /etc/resolver
myproject $ echo "address=/.dev/127.0.0.1" | sudo tee -a /usr/local/etc/dnsmasq.conf
myproject $ echo "nameserver 127.0.0.1" | sudo tee /etc/resolver/dev
myproject $ sudo launchctl load -w /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist

To start a local web server try running this.

myproject $ python -m SimpleHTTPServer

This should start up a static HTTP server serving local files on port 8000. Fire up your browser and visit http://myproject.dev:8000. If your browser is unable to resolve the DNS, restart your machine.

Creating a self signed certificate

The goal is to create self signed wild card SSL certificates that will work for yourproject.dev and *.yourproject.dev. OpenSSL can be used to generate these certificates.

On a side note, Bash has this cool concept called parameter expansion. So to get the base name of a directory you can do echo ${PWD##*/} to strip all the characters till the last / and it returns the base name of the directory. With that trick under our belt, we can use the following script to generate certs.

    #!/usr/bin/env sh
    cat > openssl.conf <<-EOF
      [req]
      distinguished_name = site_distinguished_name
      x509_extensions = v3_site
      prompt = no
      [site_distinguished_name]
      CN = *.${PWD##*/}.dev
      [v3_site]
      keyUsage = keyEncipherment, dataEncipherment
      extendedKeyUsage = serverAuth
      subjectAltName = @domains
      [domains]
      DNS.1 = *.${PWD##*/}.dev
      DNS.2 = ${PWD##*/}.dev
    EOF
    openssl req -new -newkey rsa:2048 -sha256 \
      -days 3650 -nodes -x509 -keyout site.key \
      -out site.crt -config openssl.conf

I have written a small node.js app to create a HTTPS server but this can be done in any language.

    // server.js
    var fs = require('fs'), https = require('https');
    var options = {
      siteKey: fs.readFileSync('site.key'),
      siteCert: fs.readFileSync('site.crt')
    };

    var app = function(req,res){
      res.writeHead(200, {"Content-Type": "text/plain"})
      res.end("Hello world!\n")
    }

    https.createServer(options,app).listen(8000);
    console.log("Server listening on port 8000...");

Now run server.js with node to check if it works.

myproject $ node server.js
Server listening on port 8000

Visit https://myproject.dev:8000 to visit the https site. This should also work with links https://test.myproject.dev:8000. The problem is that you will still see a big browser warning. To get rid of this, you can import the certificate into KeyChain Access application that comes with OSX by dragging and dropping it into the System section. Once you add the certificate, double click on it to open it. You will see a Trust section. You will have to choose “Always Trust” under the SSL section to get the green icon on the browser.

Advertisements

4 thoughts on “Setting up a HTTPS dev workflow on OSX”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s