Facebook 身份验证 - 不安全的 JavaScript 尝试使用 URL 访问框架答案

【问题标题】：Facebook Authentication - Unsafe JavaScript attempt to access frame with URLFacebook 身份验证 - 不安全的 JavaScript 尝试使用 URL 访问框架
【发布时间】：2011-12-22 05:12:29
【问题描述】：

我正在尝试在我的网站中实施 Facebook 登录系统。

当它尝试连接到 facebook 时，我从控制台日志中收到一个错误：

Unsafe JavaScript attempt to access frame with URL https://s-static.ak.fbcdn.net/connect/xd_proxy.php?xxxxxxxxxxxxxxxx

我正在使用 JavaScript SDK

我在body 标签中添加了这个：

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'xxxxxxxxxxxxxx',
            status     : true, 
            cookie     : true,
            xfbml      : true
        });
    };
    (function(d){
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));
    </script>

Facebook 登录按钮：

<div class="fb-login-button"  data-perms="email">Login with Facebook</div>

我正在从 localhost 进行测试 - 我已经在 facebook 开发应用程序上注册了我的网站（网站 URL：http://localhost）

如何解决这个问题？还是我应该使用 PHP SDK？

编辑：当我上传到公共域的服务器时，同样的问题。

【问题讨论】：

您的脚本受到同源策略的阻碍 - en.wikipedia.org/wiki/Same_origin_policy
那么解决方法是什么？我正在使用 Chrome
与过去使用 Facebook API 的其他人交谈，以及在下面的一些答案中提到的内容，似乎从本地主机进行的测试有问题。尝试设置一个非本地主机测试服务器。
我在 Google +1 按钮上也看到了这个错误。它是特定于 chrome 的。 stackoverflow.com/questions/5660116/…
已知的 Chrome 问题。不要像我试图解决这个问题那样浪费时间:)

标签： php javascript facebook facebook-oauth

【解决方案1】：

在我的情况下，错误是由在已经有 FB 应用程序的网站上使用 addthis 加载的类似小部件引起的。

看起来问题与多个 fb js-sdk 冲突。

因此解决方案可以将 addthis facebook like wdiget 替换为 native facebook like widget。

当未加载 js-sdk 时，我在 webkit 中也遇到了另一个错误。我通过用 jQuery.getScript() 替换 window.fbAsyncInit 来解决这个问题。最终它还修复了错误“不安全的 JavaScript 尝试使用 URL 访问框架”。

示例如下：

$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function() {
  FB.init({
    appId: 'your app id',
    cookie: true,
    xfbml: true,
    oauth: true,
    status: true
  });
  // Trigger custom event so we can use it to run init dependent actions in different places.
  $(document).trigger('FBSDKLoaded');
  //...
});

【讨论】：

【解决方案2】：

请确保在页面顶部有这一行（它适用于我）：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">

【讨论】：

【解决方案3】：

您可以调整您的本地主机机器，使其看起来属于 facebook 所需的域。

在 linux 或 OSX 上，向 /etc/hosts 添加一个条目；在 Windows 上，编辑 c:\windows\system32\drivers\etc\hosts。添加这样的条目：

127.0.0.1 local-dev.mydomain.com local-dev

其中“mydomain.com”是您注册 FB 应用 ID 的域。

【讨论】：

【解决方案4】：

您只能使用您在 Facebook 应用中注册的同一个域名。

1.您需要一个公共域名（www.example.com）。 2. 您需要注册 Facebook 应用程序。 3. 从 Facebook 获取 2 个密钥并在代码中使用：

    appId      : 'xxxxxxxxxxxxxx',

【讨论】：

【解决方案5】：

您看到的错误是非致命错误。对此没有解决方法，因为您的浏览器建议您从外部域加载 JavaScript 不是一个好主意。如果您的脚本没有运行，请忽略此消息并在其他地方查找错误。 Sajith 也是正确的，您无法从 localhost 进行调试。

另见此处， "Unsafe JavaScript attempt to access frame with URL..." error being continuously generated in Chrome webkit inspector

【讨论】：

你可以在localhost中调试。您不能在localhost 中发布图像链接以在时间轴上共享，因为 Facebook 的 Imagehandler 会寻找在线图像。在 localhost 中显示 Facebook 内容和使用其他 Facebook 功能可以正常工作。

【解决方案6】：

无法使用域 localhost 测试所有 Facebook 集成。您需要将脚本放在任何公共访问域中，并且需要在开发者应用设置页面中更新 url。 JavaScript 显示的安全错误是由于 facebook 脚本的此 localhost 访问

【讨论】：

【解决方案7】：

当我实现fileglu 时出现此错误，它可能是CORS 错误，因为您正在运行本地主机。试试在 Facebook 上运行，能不能把下半部分换成下面的代码：

(function() {
  var e = document.createElement('script');
  e.src = document.location.protocol + 
     '//connect.facebook.net/en_US/all.js#appId=<your-app-id>&xfbml=1';
  e.async = true;
  document.getElementById('fb-root').appendChild(e);
}());

我还在我的 FB.init() 页面中启用了 Oauth 2.0 和自定义通道。请参阅：http://fbdevwiki.com/wiki/FB.init 了解更多信息。

【讨论】：