About

We are a full-stack web development shop focusing on rapid prototyping. We can help you get a first version of your idea out quickly and help you grow as the idea matures.

Contact

Randy Schmidt

Recent News

» Read Our Blog

Developing Canvas Facebook Apps with SSL

April 18, 2011

Facebook recently added a setting for users to browse the site over SSL at all times. This is a GREAT option for users, however, it makes developing canvas Facebook apps a little harder because you need to provide a non-ssl and ssl canvas url.

Need to provide a canvas and secure canvas url

I started down the path of adding an SSL certifate to my local development environment but decided I didn’t want to have to deal with SSL at all on my local machine. Instead, I decided to terminate the SSL connection at one of our webservers and tunnel all traffic to my local machine. This info is targeted towards Engine Yard AppCloud (EY) and EC2, however, I’m sure it can be tweaked some to work in your environment.

Opening Up Some Ports

You need to open up two ports on one of the webservers so I fired up Elasticfox, the Firefox extension for browsing stuff on AWS. You can get your AWS credentials by looking at /etc/.mysql.backups.yml on the web server.

Add your credentials to Elasticfox then head to the Security Groups tab. Find the group that resembles your environment in EY and select it. You’ll see a bunch of permissions on the right hand side. Click the green checkmark to add another set of permissions. You can pick any two ports you want for the most part, just make them something you’ll remember. Hit “Add” and you’ll see another line show up on the right-hand side.

Open up some ports

Set Up an SSH Tunnel

Now we need to make our local development machine available to the internet somewhere. This can be done with an SSH reverse-tunnel from your local machine to one open on the internet somewhere, like one of your servers. I chose to use Tunnlr because it’s just one less thing I have to worry about. After signing up, they’ll give you a command to run that will set up a persistent SSH tunnel. It looks something like ssh -nNt -g -R :remoteport:0.0.0.0:localport user@ssh1.tunnlr.com. If you aren’t going to use Tunnlr, I’m going to assume you know what to do and I’ll move forward.

Set Up Two Vhosts

So, now our Rails app is public through the SSH tunnel but we don’t have any way to serve up a secure website. The missing piece is setting up two vhosts (one for http and one for https) on a server and proxying all the traffic to the public end of our SSH tunnel. EY uses Nginx as a web server so I created a new config file “/data/nginx/servers/keep.r38y.conf” and reloaded nginx.

The one thing I haven’t described yet is creating the self-signed certificate. Luckily, EY makes this easy. Just use their UI to create a new self-signed SSL cert and install it in your environment. I know I skipped a bunch of details here, but it really is easy… just hunt around the UI a little bit.

Now you should be able to hit the http and https endpoints you set up and see your local Rails app! I know I have been somewhat vague in some of my steps, hopefully you’ll be able to pick up on the gist of it and tweak it to your needs.

Projects

More samples available
upon request.