i have javascript game on my facebook tab.
When user is done with the game, it has option to submit his name and so on - it's done by clicking on a link that leads to same domain, even same folder where my app is located, it's just different file with form.
But I'm getting Refused to display document because display forbidden by X-Frame-Options in every browser except google chrome.
What m'i doing wrong ?
Adding:
Header always unset X-Frame-Options
to my the top of my .htaccess file helped me fix this issue on a shared hosting site where a Facebook Page Tab APP was located.
Related
Hi I wan't to create a facebook app to use it for the auth in my new site locally installed(my machine),but from yesterday I don't succeed to install it and use it, all time I have this very strange error when I wan't write a domain in the "App Domains" :
This must be derived from Canvas URL, Secure Canvas URL, Site URL, Mobile Site URL, Page Tab URL or Secure Page Tab URL. Check and correct the following domains
the domain of my application is http://localhost/project/app_dev.php/ it dosn't work I change it by a real url such as : http://www.exemple.com/,but I had the same error,and just I notice that I see this error when I create an app with new look of facebook (yesterday)...
In my case the problem was I hadn't completed the "+ Add Platform > Website" section. Once I did that the contents of App Domains became valid and the error went away.
I had this same problem yesterday, the stackoverflow answers that helped me the most were
Make local development work with Facebook/Google APIs and Canvas URL / Secure Canvas URL error message ( Also checkout How to handle OmniAuth callbacks in multiple environments?)
The Facebook developer UI has changed a bit. I'm writing this answer to consolidate all the info that helped me.
1. Make local.host Point to Your Computer
First thing you need to do is (as answered in the first link), facebook won't take localhost as a valid callback site, because it confuses localhost with a top level domain (com org etc.) in other words there is not dot . in your domain name. So change your /etc/hosts to add the entry
127.0.0.1 local.host
Now youcan access your app at http://local.host/... (this will take effect as soon as you save /etc/hosts file, no need to restart anything)
2. Add local.host as the Site URL on the facebook Dev Console
The second thing you need to do is add local.host as the site url on the facebook page
Now don't use your production app. Add a dummy app on your https://developers.facebook.com account Because your production app will have to set the site URL to your production URL and not local.host
Configure the dummy app as shown in the screenshot. But that website section(shown in the screenshot) won't be visible on the Basic settings page from the beginning.
First you will have to click + Add Platform button at the bottom, and select Website.
Notice I added http://local.host:3000/. That's where my ruby server runs in dev mode.
Also, be sure to use App Id and App Secret for the dummy app when running your webapp in dev mode.
HTH.
My problem was that logging in with facebook wasn't working for my app.
It turned out that I just needed to fill in the "Valid OAuth redirect URIs" field on the "Advanced" tab.
e.g. http://example.com/auth/google/callback
I'd a similar problem, Facebook have changed now on left pane file login (After selecting you app from top left corner) -> Valid OAuth redirect URIs
If you work on desktop app like WPF or winforms and use a WebBrowser Control to log in with the Facebook SDK.
You have to set to yes the Embedded Browser OAuth Login in Advance Tab of your facebook apps setting.
hope I help
Chose "Add platform" at the bottom and give your localhost url. "http://localhost:port/".
After this step. Facebook allows you to add localhost:port as your domain url.
After these 2 steps you can test "login with facebook" without any trouble.
It looks like a recent Chrome update broke this by tightening mixed content (https/http) security policies, and I read that Firefox plans to do this too.
Here's the issue:
Say I set the Secure Canvas URL of my app to https://themediadudes.com/httpstest/
That page contains only a link to Google:
Google
When I view the app on Facebook and click the link, nothing happens. An error appears in the console:
[blocked] The page at https://apps.facebook.com/myappname/ ran insecure
content from http://www.google.com/.
I understand that having insecure scripts/stylesheets etc. on an https page isn't allowed, but a simple link to a different website shouldn't be blocked right?. I assume Facebook is running some scripts which do something with the page before sending the user there? Which causes the error.
If I set the target of the link to _top or _blank it works.
Ideally I want to be able to use a javascript window.location to send the user to this insecure URL, or header('Location: blah'); in PHP. But neither of those work either. And it looks like this is a bigger problem than that if even a simple link to an insecure URL doesn't work.
I thought it may be caused by whatever makes the 'fluid' canvas width and canvas height settings work. But I tried setting both width and height to fixed and the problem still happens.
Does anybody have a solution or workaround, or can anybody at least shed some more light on this?
Thanks
I've been struggling with a similar issue and the answer seems to be that it is not possible at all to reference any non-https resources from within your page tab app. Of course if a google link is all you require then that is simply resolved (as google has a https version of course) but referencing external non-https sites will always turn up this warning/block in chrome
Additionally, I should add that I have noticed that the 'page tab URL' section requires a url to a particular page, whereas the 'canvas URL' needs to link to a directory. This does not seem to be documented and will also give the insecure content message in chrome and prevent the page tab app from loading
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;
If I have an app on facebook that's pulling the content from http://example.com for instance, is there a way I can stop people visting the example.com site and instead redirect them to the facebook app page?
Facebook is sending a POST variable called signed_request when the page is opened within a Fan Page Tab or the Canvas page of your App. Simply check if the POST variable is there and redirect to your App's Canvas page if not ;-)
Here you can read a bit how the signed_request is used inside an App.
Kalvin is close. Props to Kalvin :)
Setup your website to default to index.html
Move the real content of your site from index.html to index-fb.html
In index.html then place either the meta tag for redirection or just javascript for location.href='' script for redirection. The url to redirect to will be in the https://apps.facebook.com/{yourappname} format.
In facebook, update the app settings canvas app url from http://example.com to http://example.com/index-fb.html
1) Pull your content from your website from a subfolder
2) Redirect them from the index.html using a meta tag:
http://www.web-source.net/html_redirect.htm
A better way would be to check if the content is being displayed inside facebook and then redirect but I have no idea how to do that
Edit the .htaccess or conf.d file on your Apache web server (or the rewrite rules in IIS) to give a 301 Permenant Redirect.
Assuming you have Apache:
1.) Log into the box using ssh or some terminal emmulation program
2.) cd /etc/httpd/conf.d
3.) Locate the the configuration file for your site, edit it using vi, emacs, nano, or some text editor
4.) See here on how to write the rewrite rule.
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.