Almabase Blog

A hack for facebook secure canvas URL requirement

Posted by Almabase on Mar 1, 2016 2:51:09 PM

Introduction

I’m assuming that you already know why Facebook integration is important for your website. If you want to know more, read this.

The basic requirement for any Facebook integration is the creation of an app. If you need this for a website, you can click on ‘Add platform’ → ‘Website’ under your app’s settings tab and add your website URL.

 

The problem

In order to use the above app for various other integrations like share dialog, app requests etc you need to add ‘App on Facebook’ as a platform, to your app. Here’s how you do it

image

 

image

‘Canvas URL‘ can just be your website URL, but ‘secure canvas URL’ is mandatory and it has to be a https URL. I searched long and hard to figure out how to get around this and many people suggested buying cheap SSL certificates and enabling SSL for your website etc, but this is neither fast nor cheap.

The solution

I came up with a very interesting hack to get around this. Here’s how to do it:

  1. Create a file on your dropbox public folder. Let’s call it site_redirect.html
  2. The file should contain the following code

<html>

<head>

<script>

function onLoad() {

window.top.location.href=’<your website>’;

}

</script>

</head>

<body onload=”onLoad()”>

<p>Please wait while you are being redirected to <your     website name>…</p>

</body>

</html>

  1. Copy the public link to this file and notice that it is a https link. You get the point :)
  2. You can now provide this link as the ‘Secure Canvas URL’ on the Facebook app, and you’re done.

image

How does this work?

Facebook loads the canvas page in an iframe within the facebook site. This is ideally meant for you to develop a deeply integrated app into facebook. But when you don’t have one, you want people to redirect to your actual website. So the script in the iframe redirects the page to your site on load.

I hope this will be useful to others while developing their websites with facebook integration.

Post-script: If you need the security that https provides you need to invest time and money into it, and that is the best way to implement this. This hack is only needed when you can’t invest in that at the moment.