2

I've launched an application last week and have noticed since that in Chrome only the height of my canvas is not always adjusted. I've spent a bunch of hours looking at the issues and noticed that I get the following error - sometimes.

Unsafe JavaScript attempt to access frame with URL https://apps.facebook.com/tabletr/ from frame with URL

http://static.ak.facebook.com/connect/canvas_proxy.php?version=3#behavior=p&method=getPageInfo&params=%7B%22channelUrl%22%3A%22https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df3782154e%26origin%3Dhttps%253A%252F%252Ftabletr.herokuapp.com%252Ff2951037b%26relation%3Dtop.frames%255Biframe_canvas_fb_https%255D%26transport%3Dpostmessage%22%2C%22frame%22%3A%22iframe_canvas_fb_https%22%7D&relation=top. Domains, protocols and ports must match.

Now, knowing a thing or two about programming I deduced that this is likely due to https and http being used interexchangably. I get the error (sometimes) with secure browsing "on" on Facebook and never with "off".

But what I find really odd is that the issue occurs sporadically when browsing over HTTPS. I still haven't found any pattern to the issue coming up or my code working as intended. I know there are a few posts on here on this topic and I've tried a number of workarounds but none seem to have solved my problem. Here's part of my code-

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : '<myid>', // App ID
            channelUrl : '//tabletr.herokuapp.com/channel.php', // Channel File
            status     : false, // Check login status
            cookie     : true, // Enable cookies to allow the server to access the session
            xfbml      : false  // Parse XFBML
        });

        // Additional initialization code here
        FB.Canvas.setSize({ height: 1200 });
    };

    // If I comment out this function I don't get any unsafe URL errors
    // anymore. I'm guessing that the include of the JavaScript code either
    // fails to use the right protocol or is faulty in its implementation
    // by Facebook. My money is on the former.
    (function(d){
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        //js.src = "//connect.facebook.net/en_US/all.js";
        js.src = "//tabletr.herokuapp.com/js/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));
</script>

How do I fix this? I'm out of them to be honest. Maybe my channel file implementation is wrong?

Updated code

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : '<myid>', // App ID
            channelUrl : '//tabletr.herokuapp.com/channel.php', // Channel File
            status     : false, // Check login status
            cookie     : true, // Enable cookies to allow the server to access the session
            xfbml      : false  // Parse XFBML
        });

        // Additional initialization code here
        FB.Canvas.setSize({ height: 1200 });
    };

    // If I comment out this function I don't get any unsafe URL errors
    // anymore. I'm guessing that the include of the JavaScript code either
    // fails to use the right protocol or is faulty in its implementation
    // by Facebook. My money is on the former.
    (function(d){
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        //js.src = "//tabletr.herokuapp.com/js/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));
</script>

I've updated my code based on Stack OVerflow question Facebook JavaScript SDK over HTTPS loading non-secure items - this, however, hasn't fixed the issue yet. I came across the following bug report from 2012-01-19, which shows the same symptoms I'm facing. Fingers crossed this will be fixed by Facebook soon!

https://developers.facebook.com/bugs/192507854181725?browse=search_4f2bbd593f8798794293016

4 Answers 4

3
 //js.src = "//connect.facebook.net/en_US/all.js";
 js.src = "//tabletr.herokuapp.com/js/all.js";

It looks like you copied http://connect.facebook.net/en_US/all.js to your local server as https://tabletr.herokuapp.com/js/all.js.

A diff of http://connect.facebook.net/en_US/all.js and https://connect.facebook.net/en_US/all.js shows a few URLs with "http" and "https" hardcoded in them respectively. If you want to duplicate those locally, you're going to have to host two separate versions like Facebook does.

But I'd suggest just pointing to the official Facebook script, so you don't have to synchronise it up all the time.

2
  • wow, indeed one hell of a catch! i had assumed that the files are the same but i noticed just now, as you said, that there are differences. i'll have to make the adjustments tomorrow. what it still doesn't explain, though, is why it still works and does not work sometimes.
    – Jan K.
    Feb 6, 2012 at 22:42
  • alright, i've changed my code (see above) and verified that the correct all.js is being loaded when i'm accessing the app via https. unfortunately, i still get the errors though.
    – Jan K.
    Feb 7, 2012 at 19:02
1

This can also happen when you configure your fb app wrongly, check next three steps

1- make sure that redirect_uriof your facebook app isnt missing

Go to your App >> Settings >> Advanced >> Security. then set the redirect_uri

2- Make sure that login Client OAuth Login and Embedded browser OAuth Login is allowed for your app

Go to your App >> Settings >> Advanced >> Security. then select "yes" for both Client OAuth Login and Embedded browser OAuth Login

3- Don't forget also to configure your app to accept logins from your site

Go to your App >> Settings >> Add platfrom >> Website. then set Site URL with your domain.

0

Entirely possible.

Your error message states:

Domains, protocols and ports must match

You are accessing a frame with a script included from

https://apps.facebook.com/tabletr/

from frame with URL

http://static.ak.facebook.com/connect/canvas_proxy.php? ...

So that sure looks like an http/https mismatch. I don't think that extends to subdomains, but that could be problematic.

But is this your code, or the framework's? Basically you need to make sure the two protocols match up in either secure or regular browsing scenarios.

1
  • hi, my assessment is exactly the same; but it's the code from facebook :)
    – Jan K.
    Feb 6, 2012 at 22:35
0

Facebook has acknowledged this as a bug and assigned to an engineer. You can track the progress at https://developers.facebook.com/bugs/192507854181725?browse=search_4f2bbd593f8798794293016

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.