コンテンツ セキュリティ ポリシー(CSP)について詳しくは、コンテンツ セキュリティ ポリシーの概要をご覧ください。このドキュメントでは CSP のウェブ プラットフォームの視点を包括的に取り上げていますが、Chrome アプリの CSP はそれほど柔軟ではありません。
CSP はクロスサイト スクリプティングの問題を軽減するためのポリシーであり、クロスサイト スクリプティングが不適切であることは周知の事実です。CSP が暖かみがあり、あいまいな新しいポリシーであると確信してもらうつもりはありません。そのため、基本的なタスクのやり方をこれまでとは異なる方法で学ぶ必要があります。
このドキュメントの目的は、Chrome アプリに対する CSP ポリシーの内容、これに準拠するために必要なこと、CSP に準拠した方法でこれらの基本的なタスクを行う方法を正確に説明することです。
Chrome アプリ向けの CSP とは
Chrome アプリのコンテンツ セキュリティ ポリシーにより、次の操作は行えません。
- Chrome アプリのページではインライン スクリプトを使用できません。この制限により、
<script>
ブロックとイベント ハンドラ(<button onclick="...">
)の両方が禁止されます。 - アプリファイル内では、外部リソースは参照できません(動画リソースと音声リソースを除く)。iframe に外部リソースを埋め込むことはできません。
eval()
やnew Function()
などの文字列から JavaScript へのメソッドは使用できません。
次のポリシー値で実装します。
default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' data: 'unsafe-inline';
img-src 'self' data:;
frame-src 'self' data:;
font-src 'self' data:;
media-src * data: blob: filesystem:;
Chrome アプリが参照できるのは、アプリ内のスクリプトとオブジェクトのみです。ただし、メディア ファイルは例外です(アプリはパッケージの外部の動画や音声も参照できます)。Chrome 拡張機能を導入した際 デフォルトのコンテンツセキュリティポリシーを緩和できますが Chrome アプリでは適用できません
CSP の遵守方法
JavaScript およびリソースはすべてローカルに配置する必要があります(すべて Chrome アプリにパッケージ化されます)。
「では、どうすればいいか」
テンプレート ライブラリを使用している可能性は非常に高いですが、その多くが CSP で機能しません。アプリ内の外部リソース(外部の画像、ウェブサイトのコンテンツ)にアクセスしたい場合もあるでしょう。
テンプレート ライブラリを使用する
プリコンパイル済みのテンプレートを提供するライブラリを使えば、準備は完了です。プリコンパイルに対応していないライブラリを使用することもできますが、なんらかの作業が必要になるうえ、制限があります。
サンドボックスを使用して、「評価」するコンテンツを分離する必要があります。サンドボックス化は、指定したコンテンツで CSP のリフトを行います。非常に強力な Chrome API を Chrome アプリで使用する場合、サンドボックス化されたコンテンツからこれらの API を直接操作することはできません(ローカル コンテンツをサンドボックス化するをご覧ください)。
リモート リソースにアクセスする
XMLHttpRequest
でリモート リソースを取得し、blob:
、data:
、または filesystem:
の URL から提供できます(外部リソースを参照するをご覧ください)。
動画と音声は、オフラインの場合や不安定な接続状況でも良好なフォールバック動作を備えているため、リモート サービスから読み込むことができます。
ウェブ コンテンツの埋め込み
iframe を使用する代わりに WebView タグを使用して外部 URL を呼び出すこともできます(外部ウェブページを埋め込むをご覧ください)。