动态内容注入的Webview限制

Question

我正在开发带有webview组件的WinRT8.1应用程序。我使用的角度在网页上的内容。在将图像(html控件)源设置为角binding...The源由角控制器注入时，我遇到了问题，我在硬币src:前缀: unsafe:ms-local-stream://01010101-0101-0101-0101-0101010101212_64656d6f32/test.png.全路径中得到了这个前缀。如果我用DOM资源管理器手动更改"test.png“的路径(删除”不安全“前缀)，那么图像就会出现。但是当它被注入时，我得到了这个前缀，它没有显示图像，因为在LocalFolder上找不到路径。如何禁用此行为？

图像源由角度注入。如果源是静态的:它可以工作，但是当相同的src替换为注入时，它会得到以下前缀.通常webview受动态内容的限制，当我在WinJS上使用角时，我在使用动态html注入时遇到了问题。

Answer 1

因为$compileProvider做了html的编译，所以您需要告诉$compileProvider，在添加src标记时，应该允许ms-local-stream://在$compileProvider.imgSrcSanitizationWhitelist方法中完成。如果您没有指定消毒白名单，那么角将在值中添加unsafe:前缀。此设置可以添加到应用程序的配置中。

标记

<img ng-src="{{url}}" alt="Title"/>

码

app.config(['$routeProvider', '$compileProvider', 
  function($routeProvider, $compileProvider) {
    //this is for anchor href
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ms-local-stream):/); 
    //this is for img src
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ms-local-stream):/); 
}]);

引用相同的SO question。

Answer 2

听起来您需要在您的ng-src标记中使用img，而不是src，因为您正在注入该值。

换句话说，不是

<img src="{{hash}}" /> <!-- this won't work as the browser will try to fetch the literal value {{hash}} -->

试一试这个

<img ng-src="{{hash}}" /> <!-- this will interpolate {{hash}} before fetching the image -->

(很难说不看你的代码.)