Custom SchemeプラグインとAngularJSのunsafe問題について

Monacaチームの小田川です。

前回投稿しました WKWebView環境でダウンロードした画像を表示してみる でも触れましたが、Monacaで利用しているCordovaでは、外部リソースにアクセスする際に、file:// スキームが使用されます。WKWebViewでは、セキュリティー制限により、file:// スキームでリソースにアクセスすることができません。

この問題に対応するために、MonacaではCustom Schemeプラグインを提供しています。

Custom Schemeプラグインでは、file://スキームをmonaca-app://スキームに変換します。カスタムビルドデバッガーの場合は、monaca-debugger://スキームに変換されます。

このようなカスタムスキームを使用した場合、AngularJSなどではセキュリティー対策として、カスタムスキームを使用したURLが無効化され、使用できなくなります。

AngularJSの場合は、カスタムスキームの前にunsafe:が追加されます。

AngularJSでカスタムスキームに対応する場合は、$compileProviderのaHrefSanitizationWhitelistを使用します。aHrefSanitizationWhitelistのデフォルトでは、下記のスキームが使用可能になっています。

• http:
• https:
• ftp:
• sftp:
• mailto:
• tel:
• file:

aHrefSanitizationWhitelistのデフォルト値は、$compileProvider.aHrefSanitizationWhitelist()で確認する事ができます。aHrefSanitizationWhitelistについては、こちらを参照してください。

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サポートを開始を参照してください。