动态内容注入的 Webview 限制答案

【问题标题】：Webview restrictions for dynamic content injection动态内容注入的 Webview 限制
【发布时间】：2015-06-25 21:42:48
【问题描述】：

我正在开发带有 webview 组件的 winrt 8.1 应用程序。我在 webview 内容上使用 angular。我在将图像（html 控件）源设置为角度绑定时遇到问题...源是由角度控制器注入的，我在 inage src 中得到了这个前缀：字首： “不安全：ms-local-stream://01010101-0101-0101-0101-0101010101212_64656d6f32” 完整路径：不安全：ms-local-stream://01010101-0101-0101-0101-0101010101212_64656d6f32/test.png。如果我使用 DOM Explorer 手动更改“test.png”的路径（删除“不安全”前缀） - 然后会出现图像。但是当它被注入时，我得到了这个前缀，它没有显示任何图像，因为在 LocalFolder 上找不到路径。如何禁用此行为？

图片源是通过angular注入的。如果源是静态的：它可以工作，但是由于相同的 src 替换为 injection ，所以它得到了这个前缀...... 通常 webview 对动态内容有很大的限制，当我在 WinJS 上使用 Angular 时，我遇到了动态 html 注入的问题。

【问题讨论】：

标签： javascript angularjs webview windows-runtime

【解决方案1】：

这是因为$compileProvider 编译html，你需要告诉$compileProvider 你应该允许ms-local-stream:// 同时添加src 标签可以在$compileProvider.imgSrcSanitizationWhitelist 方法中完成。如果您未指定清理白名单，则 Angular 将在值中添加 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。

【讨论】：

我设置了 ng-src 并且得到了相同的结果，我认为问题出在 webview 方面而不是我的角度。
@paveldurov 您是否在应用配置中添加了建议的代码？
是的，对不起，我着急了……我添加了代码，现在我的应用程序崩溃了，所以我会试着弄清楚。谢谢
谢谢，将 ms-local-stream 添加到 $compileProvider.imgSrcSanitizationWhitelist 肯定有帮助。但是仍然无法通过 webview 将图像绑定到的源确定为 localstream 或 storageFile。所以，现在，我在 IUriToStreamResolver 中捕捉到“导航”，并修剪了不安全的前缀......

【解决方案2】：

听起来您需要在img 标记中使用ng-src 而不是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 -->

（虽然没有看到你的代码很难说......）

【讨论】：