外部コンテンツ

Chrome アプリのセキュリティ モデルでは、iframe の外部コンテンツとインラインの使用が禁止されています スクリプトと eval() を使用します。この制限はオーバーライドできますが、外部コンテンツは アプリから分離されます。

分離されたコンテンツは、アプリのデータや API に直接アクセスできません。クロスオリジンを使用する イベントページとサンドボックス化されたコンテンツの間で通信するための XMLHttpRequests とポストメッセージ API にアクセスするだけです。

外部リソースの参照

アプリのコンテンツ セキュリティ ポリシーでは、さまざまな種類のリモート URL の使用が許可されていないため、 では、アプリページの外部画像、スタイルシート、フォントを直接参照できません。代わりに クロスオリジンの XMLHttpRequests を使用してこれらのリソースを取得し、blob: URL を介して提供します。

マニフェストの要件

クロスオリジンの XMLHttpRequest を実行できるようにするには、リモート URL の host:

"permissions": [
    "...",
    "https://supersweetdomainbutnotcspfriendly.com/"
  ]

クロスオリジンの XMLHttpRequest

リモート URL をアプリにフェッチし、その内容を blob: URL として提供します。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://supersweetdomainbutnotcspfriendly.com/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  var img = document.createElement('img');
  img.src = window.URL.createObjectURL(this.response);
  document.body.appendChild(img);
};

xhr.send();

これらのリソースをローカルに保存して、オフラインで使用できるようにすることをおすすめします。

外部のウェブページの埋め込み

webview タグを使用すると、外部のウェブ コンテンツ（ウェブなど）をアプリに埋め込むことができます。 できます。Chrome アプリ内では無効になるリモート URL を指す iframe を置き換えます。高評価を取り消す iframe の場合、webview タグは別のプロセスで実行されます。つまり、内部の脆弱性を悪用された場合、 まだ分離されており、昇格した権限を取得することはできません。さらに、このストレージは （Cookie など）がアプリから分離されるため、ウェブ コンテンツから アプリのデータを更新します。

WebView 要素を追加する

webview 要素には、ソース コンテンツの URL を含め、そのサイズを指定する必要があります。

<webview src="http://news.google.com/" width="640" height="480"></webview>

プロパティを更新する

webview タグの src、width、height プロパティを動的に変更するには、次のいずれかを行います。 これらのプロパティを JavaScript オブジェクトで直接設定するか、setAttribute DOM 関数を使用します。

document.querySelector('#mywebview').src =
    'http://blog.chromium.org/';
// or
document.querySelector('#mywebview').setAttribute(
    'src', 'http://blog.chromium.org/');

ローカル コンテンツをサンドボックス化する

サンドボックス化では、指定したページをサンドボックス化された固有のオリジンで配信できます。これらのページは コンテンツ セキュリティ ポリシーから除外されます。サンドボックス化されたページでは、iframe、インライン スクリプト、 eval()。マニフェスト フィールドの説明で sandbox を確認します。

ただし、サンドボックス化されたページでは Chrome を使用できません*。APIたとえば、 eval() 様、CSP の適用対象外にするにはこちらを利用してください。ただし、新しい機能は使用できません。

サンドボックスでインライン スクリプトを使用する

次に、インライン スクリプトと eval() を使用するサンドボックス化されたページの例を示します。

<html>
  <body>
    <h1>Woot</h1>
    <script>
      eval('console.log(\'I am an eval-ed inline script.\')');
    </script>
  </body>
</html>

マニフェストにサンドボックスを含める

マニフェストに sandbox フィールドを含め、 サンドボックス：

"sandbox": {
  "pages": ["sandboxed.html"]
}

サンドボックス化されたページをウィンドウで開く

他のアプリページと同様に、サンドボックス化されたページを開くウィンドウを作成できます。こちらが 2 つのウィンドウを作成するサンプルで、1 つはサンドボックス化されていないメインアプリ ウィンドウ用、もう 1 つは サンドボックス化されたページ：

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 400,
      'height': 400,
      'left': 0,
      'top': 0
    }
  });

  chrome.app.window.create('sandboxed.html', {
    'bounds': {
      'width': 400,
      'height': 400,
      'left': 400,
      'top': 0
    }
  });
});

サンドボックス化されたページをアプリページに埋め込む

サンドボックス化されたページは、iframe を使用して別のアプリページ内に埋め込むこともできます。

<!DOCTYPE html>
<html>
<head>
</head>
  <body>
    <p>I am normal app window.</p>

    <iframe src="sandboxed.html" width="300" height="200"></iframe>
  </body>
</html>

サンドボックス化されたページへのメールの送信

メッセージの送信には、送信者のページ/ウィンドウからメッセージを投稿する、 受信ページ/ウィンドウでメッセージをリッスンします

メッセージを投稿

postMessage を使用すると、アプリとサンドボックス コンテンツの間で通信できます。サンプル 開かれるサンドボックス化されたページにメッセージを投稿するバックグラウンド スクリプト:

var myWin = null;

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('sandboxed.html', {
    'bounds': {
      'width': 400,
      'height': 400
    }
  }, function(win) {
       myWin = win;
       myWin.contentWindow.postMessage('Just wanted to say hey.', '*');
     });
});

一般的にウェブでは、メッセージの送信元の正確な送信元を指定します。 Chrome アプリはサンドボックス化されたコンテンツの元の場所にアクセスできないため、許可リストにはすべて 使用可能なオリジン（「*」）として指定できます。受信側では、通常は送信元を確認します。 Chrome アプリのコンテンツは含まれているため、必須ではありません。詳細については、 window.postMessage.

メッセージを聞いて返信する

サンドボックス ページに追加されるメッセージ レシーバーの例を次に示します。

var messageHandler = function(event) {
  console.log('Background script says hello.', event.data);

  // Send a reply
  event.source.postMessage(
      {'reply': 'Sandbox received: ' + event.data}, event.origin);
};

window.addEventListener('message', messageHandler);

詳しくは、sandbox サンプルをご覧ください。