We are using a Custom Tab on our Facebook Page and it is built in an iframe on our own website.
All of a sudden we are getting this error and the iframe is blocked:
Refused to frame 'https://www.mywebsite.com/' because it violates the following Content Security Policy directive: "default-src 'self' facebook.com *.facebook.com fbcdn.net *.fbcdn.net fbsbx.com *.fbsbx.com cdninstagram.com *.cdninstagram.com data: blob: *.whatsapp.com whatsapp.com *.whatsapp.net whatsapp.net". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
We haven't changed anything so would guess it is a change that Facebook have made.
I have tried adding <meta> tags to the header, but am still getting the error message and the iframe is not loading in the custom tab on the Facebook Page.
Any ideas on how to resolve this?
Update : Looks like this might be a current bug with Facebook : https://developers.facebook.com/support/bugs/386260146322594/?join_id=f28b0ca1724537c
Update : This bug is now here https://developers.facebook.com/support/bugs/268717971719721/?join_id=ff134a3080fdec
Related
We have a Facebook app that has been around for a long time. It's a page-based app, loading up in an iframe. Of late, it is failing to load, and this error appears in the Chrome console:
[Report Only] Refused to frame 'https://edit.ihouseelite.com/' because it violates the following Content Security Policy directive: "frame-src *.doubleclick.net *.google.com *.facebook.com www.googleadservices.com *.fbsbx.com".
You can see the problem in our test page:
https://www.facebook.com/Test-page-1158553550884937/app/451851288205481
First - this message starts with "Report Only". Does that mean that this error is not really an error, but perhaps an indication of future problems?
Assuming that it really is an error, how do I fix it? It seems like the CSP is something set by Facebook, so they only permit specific domains to load up in iframes within a Facebook page. Or am I reading that incorrectly? I figured that setting the domain in the App Settings (basic) would adjust the CSP, but it doesn't seem to have done that. We have a couple thousand customers who are using our app, so I would really like to figure out how to fix this. All suggestions welcome.
Yes it's a CSP of facebook, it publishes two CSPs: content-security-policy and content-security-policy-report-only, you can see it in the Dev tool:
Using CSP in Report-Only mode, facebook just test something, there is no real blocking just violation reports sending.
Facebook's CSP cannot be affected just like that, but when creating a legitimate application, facebook should automatically add app's domain to the frame-src directive.
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've got an FB page tab app - basically a web page inside an iframe and gets displayed when a user clicks on the page tab.
Inside the web page I've got a Twitter button. I'm using Twitter's API to find out when the user has successfully tweeted. Here's the code I use for this:
twttr.events.bind('tweet', function(event) {
alert("tweet's ocured");
});
The thing is - if I view the page normally I'm receiving the alert() after a tweet. If I view it from Facebook it doesn't work.... It's as though Twitter's response is not getting passed to the page on Fb?
Additionally in my console I get the following warnings:
TWITTER: Content Security Policy restrictions may be applied to your
site. Add to supress
this warning.
.
TWITTER: Please note: Not all embedded timeline and embedded Tweet
functionality is supported when CSP is applied.
.
Blocked a frame with origin "http://giveaway-testing.herokuapp.com"
from accessing a frame with origin "http://www.facebook.com". The
frame being accessed set "document.domain" to "facebook.com", but the
frame requesting access did not. Both must set "document.domain" to
the same value to allow access.
.
Blocked a frame with origin "http://platform.twitter.com" from
accessing a frame with origin "http://www.mysitehere.com". The frame
requesting access set "document.domain" to "twitter.com", but the
frame being accessed did not. Both must set "document.domain" to the
same value to allow access.
Has anyone dealt with these issues before? If so help is greatly appreciated!
To resolve the "TWITTER" console messages add the following code to your page header:
<meta name="twitter:widgets:csp" content="on">
Use of the meta tag is explained at the bottom of the Twitter developer doc here: https://dev.twitter.com/web/overview/widgets-meta-elements.
The other warnings relate to JavaScript's same-origin policy. The http://giveaway-testing.herokuapp.com in one of the warnings mentioned in your original post is no longer operational. Do you still have a version of the page to look at?
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;
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.