

Monacaを使ったアプリ作りに挑戦しています。  
やりたいことは、cdvfile プロトコルでアプリ内サンドボックスの画像を表示しようとしています。  
そこで、以下のようなソースがあるのですが、上部の直接指定した場合、問題なく表示出来ました。  
次に、場所を動的に作成したかった為、バインドさせようと下部のように試してみたところ、画像が表示されませんでした。  
これは仕様なのでしょうか？  
分かる方居ましたら、よろしくお願いします。

[code]

    <!DOCTYPE html>
    　　<html ng-app="myApp">
    　　　　<head>
    　　　　　　<meta charset="UTF-8" />
    　　　　</head>
    
    　　　　<body ng-controller="test">
    　　　　　　<div>
     　　　　　　　<img src="cdvfile://localhost/library-nosync/image/test.jpg" />
    　　　　　　</div>
    
    　　　　　　<div>
     　　　　　　　<img src={{dir}} />
    　　　　　　</div>
    
    　　　　　　<script>
    　　　　　　　　angular.module('myApp', [])
     　　　　　　　　　.controller('test', function($scope){
                        $scope.dir= "cdvfile://localhost/library-nosync/image/test.jpg";
                      }]);
               </script>
          </body>
     </html>
    
[/code]


CC BY-SA 3.0
2017-06-06T14:21:39.230
35350
2017-06-07T14:13:32.517
19752
question
monaca angularjs filesystems
AngularJS cdvfile プロトコルでバインドが使えない


自己解決しました。  
ソースを良く見てみると、src unsafeとあった為、画像が表示できませんでした。  
cdvfileを使う際はセキュリティポリシーを設定しないといけない、と各サイトにありますが、Monacaを参考に設定すると上手く動作せず。

[code]

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap:cdvfile:https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    
[/code]

この、fefault-src 'self' の間にあるスペースを消すことで、認識してくれました。  
ここは動作しない原因がわからず、本当に苦労しました・・・。

さらに認識させるにはもう人工夫が必要で、

[code]

    var app = angular.module('myApp');
    app.config(function($compileProvider) {
        $compileProvider.imgSrcSanitizationWhitelist(/^\s*(cdvfile|file):|data:image\//);
    });
    
[/code]

ホワイトリストにcdvfileを追加しないといけませんでした。  
なお、このconfigを追加してしまうと、ローカルsrcが認識しなくなった為、fileを追加しています。  
詳しい動きは不明ですが、これで解決しましたので、今度参考になればと思います。


CC BY-SA 3.0
2017-06-07T14:13:32.517
35375
2017-06-07T14:13:32.517
19752
35350
answer