Cordova网址和图片src在Windows中的网页上有"不安全"

Question

我正在使用Angular开发一个Cordova应用程序,而且我正在为Windows开发一些东西.

我正在尝试这样的事情:

<img ng-src="{{dataDirectory + buildingPhoto.FilenamePhoto}}" class="full-width">

dataDirectory ="ms-appdata:/// local"
buildingPhoto.FilenamePhoto ="VOL-00122kaftfoto_thumb.png"

但这只会导致使用此代码损坏图像:

<img class="full-width" src="unsafe:ms-appdata:///local/VOL-00122kaftfoto_thumb.png" ng-src="ms-appdata:///local/VOL-00122kaftfoto_thumb.png">

我认为这unsafe意味着前缀被视为不安全而且需要列入白名单,因此我在我的中添加了app.js:

.config(['$compileProvider', function($compileProvider) {

    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|ghttps?|ms-appx|ms-appdata|x-wmapp0):/);
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|ms-appx|ms-appdata|x-wmapp0):|data:image\//);
}])

我还在index.html中添加了这个元标记:

<meta http-equiv="Content-Security-Policy" content="ms-appdata *; default-src *; img-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />

但它不起作用,所以我有点卡在这里,希望有人能把我推向正确的方向.

Answer 1

使用以下代码的图像src白名单修复了该问题:

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|content|blob??|ms-appx|ms-appdata|x-wmapp0|unsafe|local):|data:image\//);

还要确保$ appProvider在app.js初始设置后的其他任何地方都没有被覆盖,这实际上导致了Joris的问题.