[Facebook] FBJSでFacebookアプリ内でJavaScriptを利用

Facebook では、FBML という HTML サブセットの独自言語で
サードパーティの開発者が誰でもアプリケーションを作成できる。
FBML では当初は <script> 要素は利用できなかったが、
現在は暫定仕様ながら FBJS として、JavaScript が利用可能になった。

facebook.com ドメイン内のページ上でフル機能の JavaScript が
利用できてしまうと、セキュリティの問題があるため、
FBJS では安全対策が施された機能制限版の JavaScript となっている。

#こういう仕組みは、どこか穴が出来て
#セキュリティホールが見つかるパターンも多いけど
#今のところ見ている限りでは問題なさそう。。。

変数名・関数名のプリフィックス


まず FBJS では、スクリプト中の全ての変数・function 名に
各アプリケーションごとのプリフィックスが付けられる。
このため window、document などのグローバル変数は取得できない。
また、eval、alert などの JS 標準関数も利用できない。

FBJS で書いたアプリケーション例:
var foo = 'Hello';
function bar ( obj ) {
    alert( foo );
}

実際にブラウザに渡されるコード:

var a235394XXXX_foo = 'Hello';
function a235394XXXX_bar ( a235394XXXX_obj ) {
    a235394XXXX_alert( a235394XXXX_foo );     // error!
}

上の例では、a235394XXXX_alert() 関数が未定義なので、エラーとなる。

DOM 操作


FBJS でも DOM エレメントの生成~ページへの描画は可能。
ただし、エレメントのプロパティを直接操作できず、
FBJS 独自のアクセサを利用して制御する。

var image = document.createElement( 'img' );
image.setSrc( 'http://www.kawa.net/xp/images/xp-title-256.gif' );
image.setStyle( { border: '2px solid black' } );
obj.appendChild( image );

詳しくはFBJS DOM objects を参照。

document オブジェクト


document.createTextNode は利用できない。
document オブジェクトで利用できるのは、
getElementById、createElement、setLocation の3メソッドみ。
getElementById は FBML アプリケーション内の要素のみ検索可能。
createElement は許可された要素のみ作成可能。

document.getElementById = function (id) {
    var appid = fbjs_private.get(this).appid;
    return fbjs_dom.get_instance(document.getElementById("app" + appid + "_" + id), appid);
};
document.createElement = function (element) {
    var mix = fbjs_sandbox.safe_string(element.toLowerCase());
    if (fbjs_main.allowed_elements[mix]) {
        return fbjs_dom.get_instance(document.createElement(mix), fbjs_private.get(this).appid);
    } else {
        switch (mix) {
            case "fb:swf":
                return new fbjs_fbml_dom("fb:swf", fbjs_private.get(this).appid);
                break;
            default: fbjs_console.error(mix + " is not an allowed DOM element");
                break;
        }
    }
};
document.setLocation = function (url) {
    url = fbjs_sandbox.safe_string(url);
    if (fbjs_dom.href_regex.test(url)) {
        document.location.href = url;
    } else {
        fbjs_console.error(url + " is not a valid location");
    }
    return this;
}


FBJS 面白そう。
 

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 9

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

この記事へのコメント

この記事へのトラックバック