Webview restrictions for dynamic content injection

Question

I am developing winrt 8.1 app with webview component. I am using angular on the webview content. I have a problem with setting the image (html control) source as angular binding...The source is injected by angular controller and I get this prefix in the inage src: Prefix: "unsafe:ms-local-stream://01010101-0101-0101-0101-0101010101212_64656d6f32" Full path: unsafe:ms-local-stream://01010101-0101-0101-0101-0101010101212_64656d6f32/test.png. If I am changing the path to the "test.png" manually (removing the "unsafe" prefix), with the DOM Explorer - then the image appears. But when it's injected I get this prefix that shows no image since the path is not found on the LocalFolder. how can I disable this behavior?

The image source is injected by angular. If the source is static : It works, but as the same src replaced with injection , it gets this prefix... Usually webview is very restricted with dynamic content, i had problems with dynamic html injection when I used Angular on WinJS.

score 2 · Answer 1 · answered Apr 19 '15 at 05:52

It sounds like you need to use ng-src in your img tag rather than src since you are injection the value.

In other words rather than

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

Try this instead

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

(Hard to say without seeing your code though...)

score 2 · Accepted Answer · edited May 23 '17 at 10:27

2

It is because of $compileProvider which do compilation of html, you need tell the $compileProvider that you should allow ms-local-stream:// while adding in src tag that can be done inside $compileProvider.imgSrcSanitizationWhitelist method. If you don't specified the sanitization whitelist then angular will add unsafe: prefix in the value. This setting you could add in config of you app.

Markup

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

Code

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):/); 
}]);

Refer same SO question.

edited May 23 '17 at 10:27

Community

1
1

answered Apr 19 '15 at 08:35

Pankaj Parkar

134,766
23
234
299

I set ng-src and I get the same result, I think that the problem is on the webview side and not in my angular. – Apr 19 '15 at 11:18
@paveldurov did you added suggested code in you app config? – Pankaj Parkar Apr 19 '15 at 11:24
Yeah, sorry I was rushing... I added the code and now my application is crushing, so I'll try to figure it out. Thanks – Apr 20 '15 at 05:34
Thanks, adding ms-local-stream to $compileProvider.imgSrcSanitizationWhitelist definitely helped. But still the source that images are binded to, cannot be determined by webview as localstream or storageFile. So, right now, i am catching the "navigation" in my IUriToStreamResolver and I trimm the unsafe prefix.... – Apr 26 '15 at 09:33

Webview restrictions for dynamic content injection

2 Answers2