Monacaチームの小田川です。
前回投稿しました WKWebView環境でダウンロードした画像を表示してみる でも触れましたが、Monacaで利用しているCordovaでは、外部リソースにアクセスする際に、file:// スキームが使用されます。WKWebViewでは、セキュリティー制限により、file:// スキームでリソースにアクセスすることができません。
この問題に対応するために、MonacaではCustom Schemeプラグインを提供しています。
Custom Schemeプラグイン
Custom Schemeプラグインでは、file://スキームをmonaca-app://スキームに変換します。カスタムビルドデバッガーの場合は、monaca-debugger://スキームに変換されます。
このようなカスタムスキームを使用した場合、AngularJSなどではセキュリティー対策として、カスタムスキームを使用したURLが無効化され、使用できなくなります。
AngularJSの場合は、カスタムスキームの前にunsafe:が追加されます。
aHrefSanitizationWhitelist
AngularJSでカスタムスキームに対応する場合は、$compileProviderのaHrefSanitizationWhitelistを使用します。aHrefSanitizationWhitelistのデフォルトでは、下記のスキームが使用可能になっています。
- http:
- https:
- ftp:
- sftp:
- mailto:
- tel:
- file:
aHrefSanitizationWhitelistのデフォルト値は、$compileProvider.aHrefSanitizationWhitelist()で確認する事ができます。aHrefSanitizationWhitelistについては、こちらを参照してください。
monaca-app:// スキームに対応する
AngularJSで monaca-app:// スキームを使用する場合は、aHrefSanitizationWhitelistにmonaca-appを登録します。カスタムビルドデバッガーを使用する場合は、monaca-debuggerも登録します。
<script>
// サンプルコード
var app = angular.module('myApp', []);
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|s?ftp|mailto|tel|file|monaca-app|monaca-debugger):/);
}]);
app.controller('myController', ['$scope', function($scope) {
$scope.url = 'sample.html';
}]);
</script>aHrefSanitizationWhitelistにカスタムスキームを登録すると、スクリーンショットのようにunsafe:が追加されないURLが設定されます。
おわりに
Cordova iOS 6.0.0以降では、UIWebViewコードが削除され、WKWebViewに移行しました。WKWebViewへの移行に伴い、WKURLSchemeHandlerがサポートされ、カスタムスキームを設定する事ができるようになりました。Cordova iOS 6.0.0以降の情報については、こちらを参照してください。
今後は、WKWebViewが標準になり、カスタムスキームを使用するケースも増えてくると思います。既存のMonacaプロジェクトでUIWebViewを使用している場合は、一度、WKWebViewでの動作チェックをしてみてはいかがでしょうか。
MonacaのWKWebView対応については、最新情報やWKWebViewサポートを開始を参照してください。