Facebook：不安全的 JavaScript 问题（document.domain 值应该相同）

Facebook: Unsafe JavaScript issue (document.domain values should be same)

提问by Bhavesh Agarwal

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

我的是一个基于画布的 FB 应用程序。在 Chrome 和 Firefox 上都面临一个问题，（虽然通常是 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)

1.当我在新的隐身 Chrome 窗口 ( https://apps.facebook.com/myfbappnamespace/)上点击我批准的 fb 应用程序安全 URL 时，以下错误仅第一次出现，当我刷新页面时出现错误不见了（大多数时候）

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

about:blank 页面显示来自http://static.ak.facebook.com/connect/xd_arbiter.php?version=18#cb=f2e4fe7b…os.com%2Ff4aeadb2&domain=www.mydomain.com&relation=parent&error= 的不安全内容 未知用户。

不安全的 JavaScript 尝试从 URL http://static.ak.facebook.com/connect/xd_arbiter.php?version=18#cb= 的框架访问 URL http://www.mydomain.com/control/myfacebookapp/的框架 f2e4fe7b...os.com%2Ff4aeadb2&domain=www.mydomain.com&relation=parent&error=unknown_user。请求访问的框架将“document.domain”设置为“facebook.com”，但被访问的框架却没有。两者都必须将 'document.domain' 设置为相同的值以允许访问。
xd_arbiter.php:18

不安全的 JavaScript 尝试从 URL http://static.ak.facebook.com/connect/xd_arbiter.php?version=18#cb= 的框架访问 URL http://www.mydomain.com/control/myfacebookapp/的框架 f2e4fe7b...os.com%2Ff4aeadb2&domain=www.mydomain.com&relation=parent&error=unknown_user。请求访问的框架将“document.domain”设置为“facebook.com”，但被访问的框架却没有。两者都必须将 'document.domain' 设置为相同的值以允许访问。xd_arbiter.php:18

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

2.当我尝试 http url( http://apps.facebook.com/myfbappnamespace/) 时，控制台中显示的错误是：

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.

不安全的 JavaScript 尝试从具有 URL https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=18#channel= 的框架访问具有 URL http://apps.facebook.com/myfbappnamespace/的框架 …Fcontrol%2Ffacebookappchannelurl%3Ffb_xd_fragment%23xd_sig%3Df23e84e85c%26。请求访问的帧具有“https”协议，被访问的帧具有“http”协议。协议必须匹配。

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)

现在，当我登录到我的 fb 帐户以查看这些错误会发生什么时，它们消失了，只是偶尔出现。我知道我在查询中使用了“大部分时间”和“有时”，但这正是我正在发生的事情。我还搜索了论坛并意识到 fb 已经解决了这个应该是 chrome 特定的旧问题。我已经确保我的 FB.init 和其他调用是 location.protocol 特定的值。还在画布 url (http) 和安全画布 url (https) 中配置了正确的值。还尝试了两种设置：帐户设置 -> 安全 -> 安全浏览 ->（启用和禁用）

Can somebody please help if I am missing something somewhere?

如果我在某处遗漏了什么，有人可以帮忙吗？

回答by Francesco Casula

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">

• 协议必须相同（因此尝试访问 iframe 的页面必须与提供 iframe 的站点具有相同的协议），因此如果您在沙盒模式（http 而不是 https）下测试您的应用程序，请禁用“安全浏览”测试帐户的模式
• channelUrl on FB.init()（见下面的代码）
• 启用 apache 的 headers mod 并将以下几行放在您的 .htaccess 中
• <div id="fb-root"></div>按照 fb 文档中的说明将 body 标签放在后面：https: //developers.facebook.com/docs/reference/javascript/
• 尝试在用户操作之后放置所有自动登录代码（例如单击登录按钮）
• 从 Canvas URL（在应用程序→设置中）中删除尾部斜杠，例如 http://yoursite.com?
• <html>像这样编辑你的标签：<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">

Code for .htaccess

.htaccess 的代码

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

Code for channelsissue:

渠道问题代码：

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

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

您的服务器提供的channel.html应包含以下一行：

<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.

请参考这个问题：不安全的 JavaScript 尝试访问具有 URL 的框架：域、协议和端口必须匹配。

回答by user3516584

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

就我而言，我在“_Layout”视图中有一个“facebook-like-box”，我必须在global.css文件中为它自定义一些 CSS 。

.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:

然后，当我尝试加载具有 Facebook 共享按钮的内部页面（例如文章和新闻）时，它开始出现以下错误：

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.

不知何故，我认为这行 CSS 代码导致了这个问题（通过在全局范围内），试图访问和修改我的共享按钮的 iframe 的行为。

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.

1. 删除那行 CSS 代码解决了这个问题。
2. 将这行 CSS 代码移动到特定页面，该页面在 <style> 标签内具有“facebook-like-box”。