I have a web site already integrated with Facebook login, using server-side authentication.
I have an issue to turn it into an application running under Facebook.
The problem is that Facebook does not show the authentication page at all
Therefore, I am not even getting to the server authentication process for real.
Right now, the application is running on my local machine.
My app is defined as Facebook Application: (adding blank before localhost for site security purpose only)
Canvas URL: http ://localhost:4300/fbopt/
Secure canvas URL: https ://localhost:4303/fbopt/"
[same problem happens when running in a Sandbox, without Secure URL]
I have a "fan page" with "Go to App" button there.
Pressing a button leads me to the URL:
https://apps.facebook.com/[appid]/?fb_source=timeline
The browser starts loading the page with the frames.
The lower frames makes the POST request to the URL I provided.
My application redirects the page to the following URL:
https://www.facebook.com/dialog/oauth?client_id=[appid]&redirect_uri=https://localhost:4303/fbopt/hook&scope=email,user_location,user_birthday
I would expect Facebook to show up the application authentication form, with the permissions required.
Unfortunately, this does not happen. An empty page is shown within the frame, HTML is empty!
I see (from the Chrome network debugger) that the URL is indeed accessed, but the response is with HTTP 200 status (not error), but no response data. Instead, getting
X-Frame-Options: DENY
response header - rendering denied within frame! Why?
When loading the URL above "manually" outside the Facebook frames structure, I do get the authentication screen with the right permissions.
I wonder what is missing to get it work with canvas.
Any hint on what I should add, or how to debug such a problem - will be appreciated.
Thanks ,
Max
Looks like me fundamental problem was that I was trying to redirect the whole page, instead of making a frame redirection.
Started here:
Blank Canvas => 'Refused to display document because display forbidden by X-Frame-Options.'
Went here:
https://developers.facebook.com/docs/howtos/login/login-for-canvas/
It says:
Because your application is being loaded in an iframe, returning a 302 to redirect the user to the Login Dialog will be unsuccessful. Instead you must redirect by setting the Javascript window.top.location property, which causes the parent window to redirect to the Login Dialog URL
This was probably my major mistake.
Max
Do you have iframe in your app? Sending X-Frame-Options with content DENY is Facebook's way to fight with clickjacking. More info:
http://darklaunch.com/2010/11/09/facebook-s-anti-clickjacking-techniques
adding an iframe to facebook does not work anymore since ~2 weeks
I've had the same issue. 302 Redirect works because I use a lot of those but you cannot redirect to a facebook domain for any reason. If you want you can do a top redirect via javascript. What I did is I created an html that accepts a url and it loads it in top.location then redirects back to apps.facebook.com. With X-frame most probably because you have a AntiForgeryToken (if using .net) because this would insert xframe sameorigin in the header. You can disable this with
AntiForgeryConfig.SuppressXFrameOptionsHeader = true;
Related
after searching the web for a while, I am still not able to find the correct solution to my problem; How to make sure the browser is redirected to the https app url. Since the canvas app is an iframe, we don't have access to change the window.top.location to the https equivalent.
If the visitor comes to
http://apps.facebook.com/app_name/
I want him redirected to
https://apps.facebook.com/app_name/
Totally unable to fix it with javascript in the app loaded in the canvas since top.location is impossible to tamper with due to cross-domain origin rules. It could have been fixed easily with a redirect rule implemented by Facebook, and I am surprised it's not a checkbox in the Facebook app setup to enforce SSL. We do not want our game to be accessible over http.
I have tested to set both Canvas URL and Secure Canvas URL to point to the https url, but that gives this error (cross-domain trouble): Unsafe JavaScript attempt to access frame with URL http://apps.facebook.com/app_name/ from frame with URL https://s-static.ak.facebook.com/
Please advice.
Ok, so it is possible to redirect the top window. I must have had a typo when I tested it the first time. This tiny script does the trick:
<script>
if ( window.location.protocol == 'http:' ) {
window.top.location = 'https://apps.facebook.com/app_name/';
}
</script>
However, I still don't understand why this isn't an option in the app setup on Facebook. It would have been a lot more efficient and user friendly with a server side redirect rule.
I know this kind of question are asked all the time,
I've mannaged to deal with all the https problems and all that..
but my problem now is when a user click on the app tab in my page, and their secure browsing option is disabled, they automatically redirected to the http url insted of the https. (my app can only work throu https).
I tried not putting anything in Page Tab URL: in the app settings as well as putting the https url there, but they both wont work...
how can I make my tab to default redirect to https url??
p.s.
I've also tried redirecting by code like this:
if($_SERVER['HTTPS']!=”on”)
{
$redirect= “https://”.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
header(“Location:$redirect”);
}
and also like that:
if (!$_SERVER['HTTPS']) {
header("HTTP/1.1 301 Moved Permanently");
header('Location: https://[myappurl]');
exit;
}
but it did not work
update: problem solved
I needed to fill up the app on facebook section on my application setting in facebook developer. I'm not sure why, but it worked.
my app can only work throu https
You mean, will only “work” (in a sense of “only than can I guarantee the safety of user’s data”), or is only accessible via HTTPS?
how can I make my tab to default redirect to https url??
The user chose to browser facebook.com over HTTP, so Facebook will load the HTTP version of your app into the iframe. So unless you have at least one page of your app that is accessible via HTTP only – you can’t. If you do have such a page, redirect to the HTTPS version using JavaScript, top.location.href = "https://www.facebook.com/…"
Problem
I have an application driving a tab on a client's page. The application works correctly if the user has not enabled FB's "secure browsing" feature. If attempting to view over HTTPS, the iframe doesn't even appear (no errors, no mixed-content warnings). When correctly loading over HTTP, the div with the id "pagelet_app_runner" has an iframe inserted into it and the application content is loaded inside there. Over HTTPS, this div remains empty and the iframe is not inserted into the page. There are no Javascript errors appearing in Firebug or Chrome's equivalent console.
Why I'm Asking Here
The host has a valid SSL certificate and there is no 'mixed content' at the URL in question. I can successfully view the content over HTTP or HTTPS by visiting the URL directly, and I can do the same by visiting apps.facebook.com/canvasURL/tabURL. It is only when attempting to view within a Page Tab that the HTTPS load fails as described above. My application is configured with both regular and secure canvas and tab URLs.
Attempted Debugging
I've recorded some sessions with Charles but since the iframe isn't being inserted into the page, I think I'm coming at the problem after it's already occured. I'm no Charles expert so happy to be corrected here.
Apache isn't seeing any request (in either regular or ssl logs) for the affected loads. non-SSL loads come through as expected in access_log.
Plea for Help
I'm out of ideas for debugging this. Does anybody have any suggestions? What really obvious and stupid mistake might I have made? :)
edit: nicer formatting
Your app canvas URL is https://skinnycomp.nextstudio.com.au/skinnycowcomps/ , which send 404 error to Facebook proxy (request is going through proxy when viewing app via tab), also when viewing your app via apps (https://apps.facebook.com/122381834451561/), again 404... maybe Facebook proxy is ignoring 404 and posting blank...
Try changing canvas URL to https://skinnycomp.nextstudio.com.au/skinnycowcomps/tab, also you can check if your app is accessed via page tab, in signed_request there should be page_id...
23:51:15.379[549ms][total 1667ms] Status: 404[Not Found]
GET https://skinnycomp.nextstudio.com.au/skinnycowcomps/
This is a real longshot since I'm sure you've triple checked all the settings, but the blank page can happen if an invalid url is specified in the Page Tab URL field in the app settings. Since it only happens on https, it would imply something specifically with the Secure Page Tab URL entry. It might be worth checking that again, and maybe even re-saving it or changing it to something else to see if it helps.
I was using relative URLs for the regular and secure tab URL fields. From memory relative URLs here were mandatory at some point in the past. It appears now that a relative URL will still work for HTTP but not for HTTPs. Fix: absolute URLs. Hopefully FB update their field validation to match what's required too.
We're hosting a PHP facebook canvas application (http://apps.facebook.com/myapp). One of the pages (http://apps.facebook.com/myapp/foobar) requires authentication from facebook so we can access some information about the user. This is achieved by using the PHP-SDK's $facebook->getLoginUrl() method to generate the url for authentication and works as expected.
We have since added the app to as a Tab (iFrame) to our Page (http://www.facebook.com/MyPage?sk=app_nnnnn). Now when we try to authenticate the user they are redirected to the app's url (http://apps.facebook.com/myapp/foobar) rather than having the /foobar page load in the Tab's iFrame as expected.
Is it possible to set the auth so that it doesn't bounce to the app's url but stays within the Tab using the PHP-SDK? If so, what is the workflow I should follow to achieve this?
I would simply add code to http://apps.facebook.com/myapp/foobar to check for authentication, and if it is, echo:
<script type="text/javascript">
top.location.href = 'http://www.facebook.com/MyPage?sk=whatever';
</script>
That should break out of the iframe and redirect you to where you want to go.
The way I have achieved this is to do the following:
On the /myapp/foobar page I check to see whether the user has been authenticated. If they haven't I set a session value and use the PHP-SDK's $facebook->getLoginUrl() to generate the auth url and send a response back containing just the javascript to redirect window.top.
Once they've authenticated they're redirected back to the main page. When this page loads it checks for the session value and, if set, removes it and issues a redirect header to /myapp/foobar.
It's a little convoluted but seems to be quite a stable solution.
I know this topic has been covered extensively, but I am totally stuck and in need of some direction and new opinions. I have a Facebook iFrame application that works perfectly in IE6,8, Safari, Chrome, FF, etc. Only IE7 gives me grief.
I have created a P3P policy file, and its associated XML file. The policy fully validates with the P3P policy validator.
As soon as the iFrame loads from within Facebook, the red eye icon appears and when I click it, it reports that cookies from the iFrame's domain are blocked. I have confirmed that the default 'medium' privacy setting is set on IE7. Interestingly I've found that by removing Google Analytics, the page will load initially without blocking the cookies, but as soon as the page reloads, or the user logs in, cookies are then blocked again even though the P3P header is sent immediately from every page. All assets are sent via S3, so there shouldn't be any issues there.
FYI, here's my P3P file; I've tried absolute paths, relative paths, switching order of CP and policyref, and separated the two into separate header calls with no luck.
header('P3P: CP="NON DSP TAIa PSAa PSDa OUR IND UNI", policyref="/w3c/p3p.xml"');
I have confirmed that the P3P Header is being sent and received by the browser. I have added a META p3p tag to the HTML page. I have removed all redirects. Still the issue persists. I've spent so much time looking into this, and I am now out of ideas. Any thoughts or ideas about how to approach this from a fresh perspective would be greatly appreciated. I'm using PHP 5.3.5 over NGINX. No framework being used...
I had the same problem. Facebook iframe app worked great in all browsers except IE7. When you first went to the app it loaded fine. But then when you clicked a link it would load the page okay but then after a second or so would refresh and redirect the browser. In the end you just got a blank page. I also had the red eye icon blocking the cookies.
The culprit turned out to be the javascript code which loads the facebook javascript lib:
FB.init({
appId : '<?=FACEBOOK_APP_ID?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
To fix the problem I changed status : true, to status : false. Now when clicking links the page loads and doesn't refresh.
So whats really going on here I am not sure but I have a guess...The redirect was being caused by the FB javavascript checking the login status and for some reason thinking the user was logged out and so redirecting to a login page. The server side login script I guess would then see that you had indeed logged in and redirect you back to the app. So on and so on.
So the problem of IE7 not setting the cookies set inside the iframe still exists, the evil eye remains. But as long as the links inside your iframe reference the parent window target="_top" pointing at the facebook canvas page it seems you don't need the cookie anyway. The PHP SDK looks for the session in a number of places starting with $_REQUEST. I am guessing that when facebook loads the iframe it includes the session param in the query string. So even though the cookies don't work in IE7 through the iframe your server scripts will still get them from the query param.
Hope that makes some sort of sense, I don't totally get it but it fixed my app.
i don't know but maybe this will help, it worked like a charm on my app.
header('P3P: CP="CAO PSA OUR"');
ob_start();
session_start();