Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

angularjs - ng-bind-html does not load image src

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 contains html like this:

<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, looks like angularjs does this to avoid cross-site scripting, but i was able to load an image from youtube directly.

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

Further more, I was able to load all the images by 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 don't need the ngSanitize module anymore, meaning my code is less secure? I do have use cases where I load images from external sources.

Coming to my questions:

  1. What is the difference between ng-bind-html and ng-bind-html-unsafe apart from what I have mentioned above. Is there any documentation about this? I could not find any.

  2. How do I accomplish loading images from the host server and external servers, and not having to use the unsafe directive?

Thanks!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
  1. There isn't much more to add to what you said.

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

    The sanitise process consists on checking each element of the provided HTML content with a list of well known HTML tags/elements. Any tag/element that isn't on the list is then removed. Apart from that there are a few more validations on specific HTML attributes (such as the src).

    In your case the element <img src="icons/youtube.png" alt="Youtube"/> doesn't have a valid src attribute because it doesn't match AngularJS' URI regexp: /^((ftp|https?)://|mailto:|tel:|#)/

    For more information check ngBindHtml, ngBindHtmlUnsafe and $sanitize (and AngularJS source code)

  2. I believe there isn't... especially if you don't control the HTML you are loading in. As stated on the ngBindHtmlUnsafe documentation:

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

    So, it's all about trusting the source of the HTML content you're loading. In last case you can always process/'sanitise' the HTML content yourself, however that doesn't seem to be easy to accomplish, specially if the content is dynamic.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...