browser API [Firefox OS]

Firefox OS の browser API を調べてみました。

browser API とは

browser API は Firefox OS のアプリでブラウザを実装するための API です。browser API は <iframe> 要素を拡張して、Web アプリによるブラウザの実装を可能にします。

browser API では <iframe> に以下のような拡張が加えられています。

1. 拡張属性
   • <iframe> に特別な性質を与える属性。
   • 特に mozbrowser 属性の指定で <iframe> は特別な browser <iframe> となります。
2. 拡張メソッド
   • browser <iframe> を外部から操作する一連のメソッド。
3. 拡張イベント
   • browser <iframe> から発生する一連のイベント。

Firefox OS のブラウザは mozbrowser 属性を指定した browser <iframe> に URL を設定して Web サイトなどの埋め込みコンテンツを表示します。 そして、browser <iframe> の goBack() / goForward() などの拡張メソッドを使って「戻る」 / 「進む」といった操作を行います。

パーミッション

browser API の利用には特権 (privileged) レベルのパーミッション "browser" が必要です。以下のようにマニフェストに指定します。

{
  "permissions": {
    "browser": {}
  }
}

特権レベルのアプリなので Marketplace の審査が必要ですが、審査を通過すれば一般の開発者でもブラウザの機能を持つアプリを配布できることになります。

拡張属性

mozbrowser 属性

<iframe src="http://mozilla.org" mozbrowser>

• mozbrowser 属性は browser API のキモとなる属性です。
• mozbrowser 属性を追加することで、<iframe> が特別な browser <iframe> となります。
• browser <iframe> では window.top, window.parent, window.frameElement がフレーム階層を引き継がず、埋め込みコンテンツからは browser <iframe> がトップレベル・ウインドウに見えます。
  • 具体的には、(window.top === window), (window.parent === window), (window.frameElement === null) となります。
• また、X-Frame-Options ヘッダで <iframe> での表示が禁止されているコンテンツも表示できるようになります。

remote 属性

<iframe src="http://mozilla.org" mozbrowser remote>

• remote 属性を付けることで埋め込みコンテンツが別プロセスでロードされます。
• 埋め込みコンテンツ由来のフリーズやクラッシュ、悪意あるコンテンツによる攻撃といった問題からブラウザ本体を守るために基本的に常に付けておくようです。

mozapp 属性

<iframe src="http://mozilla.org" mozapp='http://path/to/manifest.webapp' mozbrowser>

• Open Web App (Firefox アプリ) を <iframe> でロードするための属性です。属性値としてマニフェストファイルへの URL を指定します。
• マニフェストファイル内でリクエストされたパーミッションでアプリがロードされます。
• この属性の利用には "embed-apps" の認定 (certified) パーミッションが必要です。一般のアプリでは利用できません。
• mozapp 属性は browser API の一部としてドキュメントで説明されていますが、この属性はブラウザよりむしろ Firefox OS のサンドボックスを実現するための機能のようです。
• このあたりの資料を見ると、browser API はブラウザだけでなく、Firefox OS のサンドボックスを実現するための仕組みとして利用されていることが分ります。

拡張メソッド

browser <iframe> がサポートする拡張メソッドです。

• ナビゲーション系

  • reload(), stop()
  • goBack(), goForward()
  • getCanGoBack(), getCanGoForward()

• リソース管理系

  • setVisible(), getVisible() … 隠れているタブのリソースを節約するのに使う？？？
  • purgeHistory() … <iframe> のリソース (cookie, localStorage, cache 等) を削除する。

• イベント系

  • addEventListener(), removeEventListener(), dispatchEvent() の <iframe> でのサポート。
  • sendMouseEvent(), sendTouchEvent()
  • addNextPaintListener() / removeNextPaintListener() … MozAfterPaint イベントのハンドラを設定・削除する。

• その他

  • getScreenshot() ... 埋め込みコンテンツのサムネイルを取る。

拡張イベント

browser <iframe> が送出する拡張イベントです。

サンプルコード

MDN のサンプルをインストール出来るようにしたものを GitHub に置きました。

https://github.com/flatbird/FxOS-MdnBrowser-Example

マニフェストでは type を "privileged" にして "browser" パーミッションを設定しています。

"type": "privileged",
"permissions": {
  "browser": {}
}

特権アプリなので以下のデフォルト CSP が適用され、外部のスクリプトやインラインスクリプトは使用できません。

"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"

リファレンス

• Using the browser API - WebAPI | MDN

参考資料

• WebAPI/BrowserAPI - MozillaWiki
• Security/B2G/Browser API - MozillaWiki

• Insight Gaia - OS Shell in a

  • MozBrowser API について説明している。

• FirefoxOS Application Security

  • Ruxcon 2012の資料。動画 もある。
  • こちらも、browser API について触れている。