24

Mine is a FB App based on canvas. Facing an issue both on Chrome and Firefox, (although usually Chrome):

1.When I hit my approved fb app secure URL on a new incognito Chrome window (https://apps.facebook.com/myfbappnamespace/), the below error comes only for the first time, and when I refresh the page the error is gone (most of the times)

The page at about:blank displayed insecure content from http://static.ak.facebook.com/connect/xd_arbiter.php?version=18#cb=f2e4fe7b…os.com%2Ff4aeadb2&domain=www.mydomain.com&relation=parent&error=unknown_user.

Unsafe JavaScript attempt to access frame with URL http://www.mydomain.com/control/myfacebookapp/ from frame with URL http://static.ak.facebook.com/connect/xd_arbiter.php?version=18#cb=f2e4fe7b…os.com%2Ff4aeadb2&domain=www.mydomain.com&relation=parent&error=unknown_user. The frame requesting access set 'document.domain' to 'facebook.com', but the frame being accessed did not. Both must set 'document.domain' to the same value to allow access.
xd_arbiter.php:18

Unsafe JavaScript attempt to access frame with URL http://www.mydomain.com/control/myfacebookapp/ from frame with URL http://static.ak.facebook.com/connect/xd_arbiter.php?version=18#cb=f2e4fe7b…os.com%2Ff4aeadb2&domain=www.mydomain.com&relation=parent&error=unknown_user. The frame requesting access set 'document.domain' to 'facebook.com', but the frame being accessed did not. Both must set 'document.domain' to the same value to allow access. xd_arbiter.php:18

2.When I try the http url(http://apps.facebook.com/myfbappnamespace/), the error shown in console is:

Unsafe JavaScript attempt to access frame with URL http://apps.facebook.com/myfbappnamespace/ from frame with URL https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=18#channel=…Fcontrol%2Ffacebookappchannelurl%3Ffb_xd_fragment%23xd_sig%3Df23e84e85c%26. The frame requesting access has a protocol of 'https', the frame being accessed has a protocol of 'http'. Protocols must match.

Now when I login to my fb account to see what happens with these errors, they are gone, again only sometimes. I know that I am using "most of the times" and "sometimes" here in my query but that is exactly what is happening with me. I have also searched forums and realize that fb has already fixed this old issue which was supposed to be chrome specific. I have made sure that my FB.init and other calls are location.protocol value specific. Also configured correct values in canvas url (http) and secure canvas url (https). Also tried with both the settings: Account Settings -> Security -> Secure Browsing -> (Enabled as well as Disabled)

Can somebody please help if I am missing something somewhere?

Bhavesh Agarwal
  • 603
  • 2
  • 6
  • 13

2 Answers2

23

There are a lot of possible issues. Try with one of these solutions:

  • protocols must be the same (so the page that attempts to access the iframe must have the same protocol of the site that deliver the iframe), so if you are testing your app in sandbox mode (http instead of https), disable the "Secure browsing" mode of your testing account
  • channelUrl on FB.init() (see code below)
  • enable the headers mod of apache and put the below lines in your .htaccess
  • put the <div id="fb-root"></div> after the body tag as explained in the fb doc here: https://developers.facebook.com/docs/reference/javascript/
  • try to put all the automated login code after a user action (like a click on a login button)
  • remove the trailing slash from the Canvas URL (in app→settings) like http://yoursite.com?
  • edit your <html> tag like this: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">

Code for .htaccess

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Code for channels issue:

FB.init({
    appId: '1234567890',
    status: true,
    cookie: true,
    xfbml: true,
    channelUrl : '//yoursite.com/channel.html'
});

The channel.html delivered by your server should contain this single line:

<script src="//connect.facebook.net/en_US/all.js"></script>

EDIT

About your first issue:

The page at about:blank displayed insecure content from http://static.ak.facebook.com/connect/xd_arbiter.php?version=18#cb=f2e4fe7b…os.com%2Ff4aeadb2&domain=www.mydomain.com&relation=parent&error=unknown_user.

This is an expected exception that is used to test for a condition - this has no side effects so don't care about it.

Please refer to this question: Unsafe JavaScript attempt to access frame with URL: Domains, protocols and ports must match.

Community
  • 1
  • 1
Francesco Casula
  • 26,184
  • 15
  • 132
  • 131
  • Thanks for the exhaustive list of fixes, I have tried all of them (except the .htaccess one, will search for a equivalent settings file for tomcat) but unfortunately, the problem still exists. In addition, as per the error, I tried to set the document.domain value to "facebook.com" but can't do that because mine is totally different domain and we can set this value only to sub-domains or similar domains. – Bhavesh Agarwal Mar 06 '13 at 06:21
  • The document.domain workaround doesn't work, so I didn't include it in my list. Now, have you some code or app url to show? – Francesco Casula Mar 06 '13 at 09:47
  • Hi, Thanks for your reply, I have emailed you some fb.init code and app URL on your contacts page (http://www.realizzazione-sito.info/francesco_casula), sorry couldn't write the same on this forum. Would highly appreciate if you can please let us know the fix on this post and other users here who may be doing similar/same mistakes may be benefited. – Bhavesh Agarwal Mar 08 '13 at 07:14
  • I tested your app with a fake account (with and without Secure Browsing on Chrome 25). With Secure Browsing enabled there is no issue, the app works correctly, I answered a few questions and I landed to the final screen (get 100 vouchers). Without Secure Browsing there is only one issue, but this issue doesn't affect the functionality of your application. I answered a few questions and I landed to the final screen again. Please see the EDIT note in my answer. – Francesco Casula Mar 08 '13 at 08:14
  • Thanks for trying the app. Did you try hitting the https://apps.facebook.com/fbNamespace (mentioned in my mail) in "INCOGNITO" mode of Chrome 25? (Please note that the errors mentioned above come only for the first time, when you refresh they are all gone, hence you have to re-open INCOGNITO mode if you want to try for different SECURE BROWSING setting). I am also using Chrome 25 on Ubuntu but able to reproduce the issue everytime. The about:blank issue you mentioned in the EDIT section is indeed a warning and I am ignoring that. – Bhavesh Agarwal Mar 18 '13 at 06:44
  • I am concerned about the document.domain ERRORS mentioned above in my question which are actually freezing the app and not allowing to even display the first question screen in the app. – Bhavesh Agarwal Mar 18 '13 at 06:45
  • Unfortunately, no help till now. I am using a workaround (hack), where I recognize that the control doesn't enter the FB.getLoginStatus callback function, so I show the user to refresh the browser screen (as we can't do that by document.location.reload on fb iframe) after 5 seconds on load of my page. In case the load is successful and it enters the FB.getLoginStatus callback function, I clear the timeout for showing the message for reloading. – Bhavesh Agarwal Apr 08 '13 at 09:00
  • `code`function handleFirstScreen(){ $("body").addClass("loading"); var checkFBObject; checkFBObject=setTimeout(function(){ $("body").removeClass("loading"); $("body").addClass("fb_error"); },5000); FB.getLoginStatus(function(response) { clearTimeout(checkFBObject); $("body").removeClass("loading"); }); }`code` – Bhavesh Agarwal Apr 08 '13 at 09:04
0

In my case I had a "facebook-like-box" at "_Layout" view and I had to customize some CSS for it, at the global.css file.

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

Then, when I tried to load internal pages, such as Articles and News, which has a share button for facebook, it starts to give me this error:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://localhost:51826" from accessing a frame with origin "http://static.ak.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.

Somehow I think that line of CSS code was causing this issue (by being at the global scope), trying to access and modify behavior of the iframe for my share button.

  1. Removing that line of CSS code solved the problem.
  2. Moving that line of CSS code to the specific page which has the "facebook-like-box" inside < style > tags.
user3516584
  • 51
  • 2