ChromeAppsのSandBox化について

以前
ChromeAppとかExtensionsでVue.jsを使うためにを書いたんですが

SandBoxするとどうなるのか？

実際のコードは？

を書いてなかったので　自分でも忘れないようにメモをしておこうと思います。

これからPolymerをChromeAppsでも使いたいという人には避けては通れないSandBoxだと思います。(てか避けて通れる方法が欲しい...)

SandBox？

SandBoxはChromeAppsやExtensionsで制限されているevalを使うためにあります。

そもそも、なぜevalが使えないのか？

ChromeAppsは通常のWebサイトではアクセスできないユーザーの様々なデータにアクセスすることができるので
通常のWEBページ以上にユーザーのセキュリティとプライバシーに影響を与える可能性がでてくるためです。

SandBoxの使い方

参考先ではChromeExtensionsを使って説明してますので
ここではChromeAppsのサンプルを使いながら説明させてもらいます。

サンプル: https://github.com/k2wanko/chromeapp-polymer-example

manifestで宣言

SandBoxさせるhtmlファイルをmanifest.jsonで宣言する必要があります。

manifest.json

{
  ...
  "manifest_version": 2,
  ...
  "sandbox": {
    "pages": [
      "index.html"
    ]
  }
}

SandBox化されたページとのやりとり

SandBox化されたページはevalが使える代わりにChromeAppsやExtentionsのAPIが使えなくなります。(全部使えないのかは調べてないです。)

なのでAPIを使おうと思ったら
SandBox化されていないページにメッセージを投げて
実行しなければなりません。

HTML5でアプリケーションを作ったことある人なら(たぶん)お馴染みの
window.postMessageを使います。

以下サンプルコード抜粋です。

toolbar.coffee

window.parent.postMessage
  command: "close"

window.jade

window.addEventListener 'message', (e)->
  switch e.data?.command
    when "close" then chrome.app.window.current().close()

window.parent.postMessageメソッドを使い
親Windowにメッセージを親ウィンドウに対して送り

window.addEventListenerの第一引数をmessageにし第二引数のFunctionで受け取ります。

後は　APIが使える側でSandBoxのWindowを操作してあげればセキュリティ的に安全かつ普通のChromeAppsと同じ物を提供できます。

参考

Using eval in Chrome Extensions. Safely.