Facebook Web App development error

Question

I keep getting the following error on the debug console on chrome

[blocked] The page at https://myURL/canvas ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css.
[blocked] The page at https://URL/canvas ran insecure content from http://connect.facebook.net/en_US/all.js.
[blocked] The page at https://URL/canvas ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js.

these are the js scripts attached to the head

THis is a facebook app that makes GET request to my own server , This was working and Just stopped working without any change in my code ! I am not sure if Facebook is blocking my requests.

Answer 1

These errors happen when loading scripts and other external resources (such as images) on other domains via HTTP when the main page (which is your Facebook app, in your case) is loaded via HTTPS.

Look in the code of your app, use protocol relative URLs when calling external scripts. For example, instead of this:

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">

Do this:

<script src="//connect.facebook.net/en_US/all.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">

Edit: Note that if protocol relative URLs are used on stylesheets, IE7 and IE8 will download it twice: http://paulirish.com/2010/the-protocol-relative-url/