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.
Related
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;
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/…"
Got this really weird problem when loading https pages into my facebook app (when the app is running as http://apps.facebook.com/xxxxx).
If i do declare wether its http or https using.
FB._https = (window.location.protocol === 'https:');
On my https pages the facebook javascript api fails silently or atleast the setSize function. When loading http pages into the iframe it works fine.
If i do not declare if its https or not i get a security warning in IE, in all other browsers it works fines.
If i set my settings to run the app as https and all my pages are in https then it works fine.
But the thing is that if a user runs facebook on http, then i must be able to display some pages as https in the iframe, anyone had any similar problem?
Similar problem here - I put together a proof-of-concept for testing. This has been filed as a bug and is apparently being looked at. It might help if you go and +1 the bug report.
If someone is using facebook on http and they visit your app which is set up for https, they will just see the https page. Or you can set up a http canvas page as well as your https one. You don't need to put in any of those workarounds..
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.
With Facebook requiring a secure URL for Canvas applications on October 1st, what will happen to legacy applications that have no URL specified for the Secure Canvas URL? Will they continue to load over HTTP and fail over HTTPS?
Suppose an application has URLs specified for the Canvas, Page Tab, and Secure Page Tab, but no URL specified for the Secure Canvas.. will these applications continue to function, or will they be blocked entirely because they lack a secure URL for the Canvas?
use simple bit.ly address in your canvas url.... it works
Well the applications without secure connection (https) are still working. Today is October 05 and I'm not seeing any sort of change in my apps. They are working nicely and people have access.
ye unfortunately the entire app will be blocked, well that's what im reading around the web anyways.
AFAIK you need your secure URL to have some location URL for it to function.
And now i see Facebook has added a message for users to enable secure browsing when u login. so even more so no to get a secure link than ever.
If you are struggling try out http://social-server.com. Instead of buying a SSL certificate it does the same thing for free and its instant!
Applications will enter a new 'disabled' mode, similar to sandbox, until Secure Callback URL is set.
Come October 1st as the dev pages states on facebook you will be required to have a secure url. I just picked up a cheap SSL cert from godaddy for like 16 bucks for a year. i do not know if they still have the deal going on, but it definitively worth checking. Once the cert is installed on your server, you do not need to migrate anything, the whole process took like 2 hours most of which was waiting on godaddy.
Just researching this issue; I don't have an ssl cert and when I try to access my app as a Facebook app I get:
I think no ssl is the cause so looks like i need to buy one :(
I have come up with an interesting hack for this problem.
You can create a HTML file that is accessible over HTTPS that just redirects to your webpage. For example, you can use dropbox. Since Facebook loads your secure canvas URL page in an iframe, your code needs to redirect the top page. Something like this.
<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>
And provide this link as the secure canvas URL. I blogged about this in more detail - http://blog.almabase.com/post/84579042935/interesting-hack-for-facebook-secure-canvas-url