在 Facebook 上使用安全浏览时，不安全的 JavaScript 尝试访问框架

Question

我上周启动了一个应用程序，并注意到在 Chrome 中，只有画布的高度并不总是被调整。我花了很多时间研究这些问题，并注意到有时会出现以下错误。

不安全的 JavaScript 尝试从 URL 为 https://apps.facebook.com/tabletr/ 的框架访问框架

<一href="http://static.ak.facebook.com/connect/canvas_proxy.php?version=3#behavior=p&method=getPageInfo&par ams=%7B%22channelUrl%22%3A%22https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df3 782154e%26origin%3Dhttps%253A%252F%252Ftabletr.herokuapp.com%252Ff2951037b%26relation%3Dtop.frames%255Biframe_ca nvas_fb_https%255D%26transport%3Dpostmessage%22%2C%22frame%22%3A%22iframe_canvas_fb_https%22%7D&relation=top" rel="nofollow noreferrer">http://static.ak.facebook.com/connect/canvas_proxy.php?version=3#behavior=p&method=getPageInfo& params=%7B%22channelUrl%22%3A%22https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df 3782154e%26origin%3Dhttps%253A%252F%252Ftabletr.herokuapp.com%252Ff2951037b%26relation%3Dtop.frames%255Biframe_canv as_fb_https%255D%26transport%3Dpostmessage%22%2C%22frame%22%3A%22iframe_canvas_fb_https%22%7D&relation=top。 域、协议和端口必须匹配。

现在，了解了有关编程的一两件事后，我推断这可能是由于 https 和 http 可以互换使用。我在 Facebook 上“打开”安全浏览时（有时）会收到错误消息，而在“关闭”安全浏览时则不会。

但我发现真正奇怪的是，通过 HTTPS 浏览时，该问题偶尔会发生。我仍然没有找到任何出现问题的模式或我的代码按预期工作。我知道这里有一些关于这个主题的帖子，我已经尝试了很多解决方法，但似乎没有一个解决了我的问题。这是我的代码的一部分 -

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : '<myid>', // App ID
            channelUrl : '//tabletr.herokuapp.com/channel.php', // Channel File
            status     : false, // Check login status
            cookie     : true, // Enable cookies to allow the server to access the session
            xfbml      : false  // Parse XFBML
        });

        // Additional initialization code here
        FB.Canvas.setSize({ height: 1200 });
    };

    // If I comment out this function I don't get any unsafe URL errors
    // anymore. I'm guessing that the include of the JavaScript code either
    // fails to use the right protocol or is faulty in its implementation
    // by Facebook. My money is on the former.
    (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";
        js.src = "//tabletr.herokuapp.com/js/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));
</script>

我该如何解决这个问题？老实说，我已经脱离了他们。也许我的频道文件实现是错误的？

更新的代码

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : '<myid>', // App ID
            channelUrl : '//tabletr.herokuapp.com/channel.php', // Channel File
            status     : false, // Check login status
            cookie     : true, // Enable cookies to allow the server to access the session
            xfbml      : false  // Parse XFBML
        });

        // Additional initialization code here
        FB.Canvas.setSize({ height: 1200 });
    };

    // If I comment out this function I don't get any unsafe URL errors
    // anymore. I'm guessing that the include of the JavaScript code either
    // fails to use the right protocol or is faulty in its implementation
    // by Facebook. My money is on the former.
    (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";
        //js.src = "//tabletr.herokuapp.com/js/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));
</script>

我已经根据 Stack OVerflow 问题更新了我的代码Facebook JavaScript SDK 通过 HTTPS 加载非安全项目 - 然而，这还没有解决问题。我在 2012 年 1 月 19 日发现了以下错误报告，它显示了我所面临的相同症状。祈祷 Facebook 很快就能解决这个问题！

https://developers.facebook.com/bugs/192507854181725?browse=search_4f2bbd593f8798794293016

Answer 1

 //js.src = "//connect.facebook.net/en_US/all.js";
 js.src = "//tabletr.herokuapp.com/js/all.js";

看起来您已将 http://connect.facebook.net/en_US/all.js 复制到本地服务器，如下所示
https://tabletr.herokuapp.com/js/all.js。

http://connect.facebook.net/en_US/all.js 和 https://connect.facebook.net/en_US/all.js 的差异显示少数 URL 中分别硬编码了“http”和“https”。如果你想在本地复制这些，你将必须像 Facebook 那样托管两个单独的版本。

但我建议直接指向 Facebook 官方脚本，这样你就不必一直同步它。

Answer 2

当您错误配置 Facebook 应用程序时，也可能会发生这种情况，请检查接下来的三个步骤

1 - 确保您的 Facebook 应用程序的 redirect_uri 不丢失

转到您的应用程序>>设置>>高级>>安全。然后设置redirect_uri

2- 确保您的应用允许登录客户端 OAuth 登录 和 嵌入式浏览器 OAuth 登录

转到您的应用程序>>设置>>高级>>安全。然后为客户端 OAuth 登录 和嵌入式浏览器 OAuth 登录 选择“是”

3- 不要忘记将您的应用配置为接受来自您网站的登录

转到您的应用程序>>设置>>添加平台>>网站。然后使用您的域设置Site URL。

Answer 3

完全有可能。

您的错误消息指出：

域、协议和端口必须匹配

您正在访问包含以下脚本的框架

https://apps.facebook.com/tabletr/

来自带有 URL 的框架

http://static.ak.facebook.com/connect/canvas_proxy.php< /a>? ...

所以这看起来肯定是 http/https 不匹配。我不认为这会扩展到子域，但这可能会出现问题。

但这是您的代码还是框架的代码？基本上，您需要确保这两种协议在安全或常规浏览场景中匹配。

Answer 4

Facebook 已承认这是一个错误，并指派给一名工程师。您可以在 https://developers.facebook.com/bugs/192507854181725?browse=search_4f2bbd593f8798794293016