PhoneGap
Cordova
CSP

Cordova(PhoneGap)でアプリ開発する時のlocalhost指定についての注意点

More than 1 year has passed since last update.

Rails等でサーバーサイド、Cordova(PhoneGap)でクライアントサイドのアプリを開発する時、localhost(127.0.0.1)を指定してデバッグする時の注意点です。
確認したCordovaのバージョンは、"5.4.1" です。

$ cordova create <foldername> <uri> <AppName>

のように雛形を作成し、自動的に生成されたindex.htmlのmeta情報まま、locaohostにアクセスしようとしても、正常にアクセスできません。
CSPポリシーが設定されていないためのようです。
(APIを使用してサーバーからjsonデータを取得する様なソフトの開発でデバッグしようすると、その前に躓くことになってしまいます)

このような現象に遭遇した時は、自動生成されたindex.htmlに対して、以下のようにconnect-srcでlocalhostとポートの設定を追加すると、正常にアクセスできるようになります。

編集元

<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 *">

編集後(例)

<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 *; connect-src http://localhost:3000">