0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

MonacaでMapboxを使う際のCSP設定について

Posted at

Monacaに限った話ではありませんが、Mapbox JS SDKを使う際にはCSP( Content Security Policy)の設定が必要です。

Framework7でMapboxを使って開発を行っている再、開発時にはGoogle Chromeを使っていました。Framework7プロジェクトでは npm run starthttp://localhost:8080/ が開くので便利です。

そして、Google Chromeでアクセスすると、最初に次のようなエラーが出ます。

Refused to create a worker from 'blob:http://localhost:8080/〜' because it violates the following Content Security Policy directive: "default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.

ということで、 CSP に worker-src を追加します。

<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:; worker-src blob:">

これでGoogle Chromeでは問題なく動くのですが、MonacaやCordovaでiOSアプリとして動作確認を行おうとするとエラーが出ます。

Refused to load blob:app://localhost/〜 because it appears in neither the child-src directive nor the default-src directive of the Content Security Policy.

なんとSafari(WKWebView)ではworker-srcディレクティブが存在しないようです。ということでCSPを次のように修正します。 default-src 側で設定せざるを得ないようです。

<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content: blob:">

こうするとGoogle Chrome、iOSアプリのどちらでも動くようになります。

ついでに

WKWebViewになってからなのか、CordovaアプリでHTML5 APIとしての navigator.geolocation.getCurrentPosition が使えなくなっていました。開発策としてはGeolocation - Apache Cordovaを使ってCordovaプラグインを使って位置情報を取得することになります。APIはHTML5 APIと同じなので、コードの修正は不要です。

cordova plugin add cordova-plugin-geolocation
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?