Monaca アプリはHTML/JavaScript/CSSでアプリのコンテンツを作ります。外部からデータを取得して利用する仕組みを使っている時に、悪意を持ったユーザによってXSSを引き起こされる可能性があります。例えばJavaScriptを実行されたり、CSSでデザインを変えられてしまうかも知れません。
そうした問題を防ぐのに使えるのがコンテンツ セキュリティ ポリシー(CSP)です。Monacaアプリではデフォルトで次のような設定になっています。
<meta http-equiv="Content-Security-Policy" content="
default-src * data: gap: content: https://ssl.gstatic.com;
style-src * 'unsafe-inline';
script-src * 'unsafe-inline' 'unsafe-eval'">
デフォルトでは以下の3つが指定されています。各項目は ; で繋ぎます。
-
default-src
基本設定です。指定しなかった設定(ディレクティブ)に対して使われます。 -
style-src
スタイルシートの設定です。 -
script-src
JavaScriptの設定です。
https://ssl.gstatic.com
はAndroidで必要なドメインのようです(via https://github.com/apache/cordova-plugin-whitelist)。`gap:` は逆にiOSで必要な設定で、JavaScriptからネイティブの機能を呼び出すときに使われるスキームです。 data:
は data://ではじまる、いわゆるdataURIを許可するという指定です。 content:
はAndroidでファイル選択した時のスキームです。 file:
も併用すると良いようです(via fileスキームのURIに変換する(Android) - 闘うITエンジニアの覚え書き)。
unsafe-inline
はHTML中の <script />
、 <style />
タグの許可であったり、HTMLタグの中の onclick
の許可になります。 unsafe-eval
はevalの許可です。
その他に指定できる値としては以下があります。
- 'self'
- 'none'
- mediastream
- blob
- filesystem
- https:
後はドメイン指定(ワイルドカード可)で利用できるソースのドメインを指定できます。
ソース
ソースは上記3つの他にも以下があります。他にもありますが、Corodvaアプリでは対象にならないものなのでリストに載せていません。
-
child-src
iframeで読み込めるドメインを指定します。 -
connect-src
Fetch、XMLHttpRequest、WebSocket、EventSourceなど外部接続系の制限を行います。 -
font-src
@font-face
で読み込める対象を制限します。 -
img-src
画像の読み込める対象を制限します。 -
media-src
<audio />
、<video />
に対して利用する対象を制限します。
CSPの設定を間違えると、出るはずのデータが表示されなかったり、コンテンツが読み込めなかったりします。かといってあまり大らかにしすぎると万一の時にセキュリティ上のリスクが高くなります。バランスを考えつつ、指定するのが良いでしょう。