Ng-bind-html does not load src image

Question

I have a simple presentation like this

<div id="{{item.id}}" ng-repeat="item in itemList"> <div ng-bind-html="item.html"></div> </div> 

The item.html element contains html as follows:

 <a href="http://www.youtube.com"><img src="icons/youtube.png" alt="Youtube"/></a> 

However, the resulting html does not load the image:

 <a href="http://www.youtube.com"><img alt="Youtube"/></a> 

After some searching, it looks like this: angularjs does this to avoid cross-site scripting, but I was able to download the image from youtube directly.

 <a href="http://www.youtube.com"><img src="http://img.youtube.com/vi/9bZkp7q19f0/0.jpg" alt="Youtube"/></a> 

In addition, I was able to download all the images using ng-bind-html-unsafe.

  <div id="{{item.id}}" ng-repeat="item in itemList"> <div ng-bind-html-unsafe="item.html"></div> </div> 

If I use ng-bind-html-unsafe, I no longer need the ngSanitize module, i.e. is my code less secure? I have use cases when I upload images from external sources.

Coming to my questions:

• What is the difference between ng-bind-html and ng-bind-html-unsafe, besides what I mentioned above. Is there any documentation about this? I could not find.

• How to download images from the host server and external servers and not use an insecure directive?

Thanks!

Answer 1

• There is not much to add to the above.

  ng-bind-html allows you to load HTML content into your angular application after cleaning it (using the $sanitise service). On the other hand, ng-bind-html-unsafe allows you to download any HTML content without being sanitized.

  The sanitation process consists in checking each element of the provided HTML content for a list of known HTML tags / elements. Any tag / item that is not in the list is then deleted. In addition, there are several additional checks for specific HTML attributes (e.g. src ).

  In your case, the <img src="icons/youtube.png" alt="Youtube"/> element does not have a valid src attribute, because it does not match the regular expression URI AngularJS: /^((ftp|https?):\/\/|mailto:|tel:|#)/

  For more information, check out ngBindHtml , ngBindHtmlUnsafe and $ sanitize (and AngularJS Source Code )

• I believe not ... especially if you are not in control of the HTML code that you are loading. As stated in the ngBindHtmlUnsafe documentation:

  You should use this directive only if the ngBindHtml directive is also restrictive and when you absolutely trust the source of the content you are attached to.

  So, this is all about how to trust the original content of the HTML content that you upload. In the latter case, you can always process / "sanitize" the HTML content yourself, however this does not seem to be easy to execute, especially if the content is dynamic.

Answer 2

Nenad answered this question recently. By calling $ sce.trustAsHtml ($ scope.html), you can mark HTML as valid so that ng-bind-html accepts it. Even if img src is relative, and therefore otherwise, it will be marked as invalid.

Here you can find his message