3

我正在尝试从我的 Chrome 扩展程序中弹出一个带有 Facebook 登录示例代码的选项卡。到目前为止，我在这个例子中使用了直接的教程代码。

该选项卡正确打开，但是，由于跨站点安全策略问题，facebook 的 javascript 无法加载，而且我也收到了内联脚本错误 - 这似乎很奇怪（除非动态添加的元素具有触发错误的内联脚本信息？）

我在哪里可以学习如何正确地做这种事情？

错误：

Refused to load script from 'https://connect.facebook.net/en_US/all.js' because of Content-Security-Policy.
Refused to execute inline script because of Content-Security-Policy.

背景.js：

chrome.tabs.create({url: 'popup.html'})

popup.html: //来自 facebook api 文档的登录代码示例

  <head>
    <title>Facebook Client-side Authentication Example</title>
    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <div id="fb-root"></div>
    <script>

    </script>

    <h1>Facebook Client-side Authentication Example</h1>
      <div id="auth-status">
        <div id="auth-loggedout">
          <a href="#" id="auth-loginlink">Login</a>
        </div>
        <div id="auth-loggedin" style="display:none">
          Hi, <span id="auth-displayname"></span>  
        (<a href="#" id="auth-logoutlink">logout</a>)
      </div>
    </div>

  </body>
</html>

popup.js://facebook dev 的示例代码

// Load the SDK Asynchronously
(function (d) {
    var js, id = 'facebook-jssdk',
        ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "https://connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
}(document));

// Init the SDK upon load
window.fbAsyncInit = function () {
    FB.init({
        appId: '', // App ID
        channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true // parse XFBML
    });

    // listen for and handle auth.statusChange events
    FB.Event.subscribe('auth.statusChange', function (response) {
        if (response.authResponse) {
            // user has auth'd your app and is logged into Facebook
            FB.api('/me', function (me) {
                if (me.name) {
                    document.getElementById('auth-displayname').innerHTML = me.name;
                }
            })
            document.getElementById('auth-loggedout').style.display = 'none';
            document.getElementById('auth-loggedin').style.display = 'block';
        } else {
            // user has not auth'd your app, or is not logged into Facebook
            document.getElementById('auth-loggedout').style.display = 'block';
            document.getElementById('auth-loggedin').style.display = 'none';
        }
    });

    // respond to clicks on the login and logout links
    document.getElementById('auth-loginlink').addEventListener('click', function () {
        FB.login();
    });
    document.getElementById('auth-logoutlink').addEventListener('click', function () {
        FB.logout();
    });
}
4

1 回答 1

4

http://developer.chrome.com/extensions/contentSecurityPolicy.html将是一个好的开始，HTML5Rocks 上的“内容安全策略简介”也是如此。

在这种情况下，您似乎需要将https://connect.facebook.net列入白名单；您可以通过添加"content_security_policy": "script-src 'self' https://connect.facebook.net; object-src 'self'"到您的manifest.json文件来做到这一点。

内联脚本错误可能是由于 中的空script标签popup.html，但也可能是由于 Facebook 的脚本正在注入页面。只有一种方法可以找出... :)

于 2012-09-20T21:42:46.467 回答