问题
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 URLhttp://static.ak.facebook.com/connect/canvas_proxy.php?version=3#behavior=p&method=getPageInfo¶ms=%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
回答1:
//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:
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 LoginandEmbedded 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 URLwith your domain.
回答3:
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.
回答4:
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
来源：https://stackoverflow.com/questions/9167371/unsafe-javascript-attempt-to-access-a-frame-when-using-secure-browsing-on-facebo