このページは、2020 年にサポートが終了した Chrome アプリプラットフォームに関するドキュメントの一部です。Enterprise および Education のお客様については、少なくとも 2025 年 1 月までは ChromeOS で引き続きサポートされます。詳しくは、アプリの移行をご覧ください。

このページは Cloud Translation API によって翻訳されました。

外部コンテンツ

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 サンプルをご覧ください。