Cordova アプリの Content-Security-Policy 設定について

HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド (DESIGN & WEB TECHNOLOGY)

$ cordova create コマンドで Cordova アプリの雛形を作ると、www/index.html に以下のような meta 要素が書き込まれている。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

今回はこの設定に関するお話。

CSP とは？

コレは Content-Security-Policy、略して CSP と呼ばれるセキュリティレイヤーの設定情報だ。CSP とは、サーバサイドからクライアントサイドのブラウザに対して「このコンテンツはこういう範囲で扱っていいよ (それ以外の扱い方はしないでね)」というポリシーを伝えることで、クロスサイトスクリプティングなどの脆弱性攻撃を軽減するために設定する。

それを踏まえて中身を読んでみると、何が書いてあるか少し分かるだろう。

<meta http-equiv="Content-Security-Policy"
      content="default-src  'self' data: gap: https://ssl.gstatic.com 'unsafe-eval';
               style-src    'self' 'unsafe-inline';
               media-src    *;
               img-src      'self' data: content:;">

こうすると分かりやすいか。細かな設定内容は以下の2サイトをご参照いただきたいが、

• default-src (基本的な設定) として 'self' (自身のホスト) や data: プロトコルなどを許容していて、
• style-src (CSS ファイル向けの設定) として 'unsafe-inline' (インライン CSS) を許容するようにしていたり、

という設定内容になっている。

• 参考：Cordovaを4.0.0から5.2.0にしてみる - Qiita
• 参考：Content Security Policy CSP Reference & Examples

めちゃユル CSP 設定

書き方が分かれば、あとは自分の Cordova アプリの作りに応じて適切に CSP 設定を書けると思うが、コレがなかなかに面倒臭かったりする。開発段階だったり、個人で使うだけだったら、イチイチ CSP の設定でつまづいたりしたくない。

というワケで、あらゆるコンテンツのアクセスを許容するようにするには、以下のように指定すれば良い。

<meta http-equiv="Content-Security-Policy" content="default-src gap: 'unsafe-inline' *">

基本は default-src、つまり全コンテンツに対する基本的な指定として *、全てのホストへのアクセスを許容すれば良い (コレで 'self' も含まれる)。ただしコレだけだとインライン JavaScript やインライン CSS が有効にならないので 'unsafe-inline' を追加しておく。さらに、Cordova プラグインが動作するためには gap: プロトコルを追加で指定しておかないといけないので、gap: も追加している。

コレが最小構成となるだろう。あとは eval 呼び出しがある場合は 'unsafe-eval' を追加すればよいかと。

CSP 設定が原因で何か表示がうまくいっていない場合は、コンソールにエラーログが出力されているので、適宜開発者コンソールを開いて確認するようにしよう。

• 参考：White screen on iOS 10 · Issue #6928 · ionic-team/ionic · GitHub
• 参考：iOS 10 で Cordova/Phonegap アプリが動かなくなった - Qiita

HTML5とJavaScriptによるiPhone／Android両対応アプリ開 （DESIGN　＆　WEB　TECHNOLOGY） [ 大友聡之 ]