ng-bind-html 不加载图像 src [英] ng-bind-html does not load image src

问题描述

我有一个像这样的简单演示

<div ng-bind-html="item.html"></div>

item.html 包含这样的 html:

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

然而，生成的 html 并没有加载图像:

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

经过一番搜索，看起来 angularjs 这样做是为了避免跨站点脚本，但我能够直接从 youtube 加载图像.

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

此外，我能够使用 ng-bind-html-unsafe 加载所有图像.

 
<div ng-bind-html-unsafe="item.html"></div>

如果我使用 ng-bind-html-unsafe，我就不再需要 ngSanitize 模块，这意味着我的代码不太安全?我确实有从外部来源加载图像的用例.

回答我的问题:

1. ng-bind-html 和 ng-bind-html-unsafe 除了我上面提到的还有什么区别.有没有关于这个的文件?我找不到任何.

2. 如何完成从主机服务器和外部服务器加载图像，而不必使用 unsafe 指令?

谢谢！

解决方案

1. 你所说的没有更多要补充的了.

   ng-bind-html 允许您在清理(使用 $sanitise 服务)后将 HTML 内容加载到您的 angular 应用程序中.另一方面，ng-bind-html-unsafe 允许您加载任何 HTML 内容而无需清理.

   清理过程包括使用众所周知的 HTML 标签/元素列表检查所提供 HTML 内容的每个元素.然后删除不在列表中的任何标签/元素.除此之外，还有一些对特定 HTML 属性(例如 src)的验证.

   在您的情况下，元素 <img src="icons/youtube.png" alt="Youtube"/> 没有有效的 src 属性因为它不匹配 AngularJS 的 URI 正则表达式:/^((ftp|https?):\/\/|mailto:|tel:|#)/

   有关更多信息，请查看 ngBindHtml、ngBindHtmlUnsafe 和 $sanitize(和 AngularJS 源代码)

2. 我相信没有...特别是如果您不控制正在加载的 HTML.如 ngBindHtmlUnsafe 文档中所述:

   <块引用>

   只有当 ngBindHtml 指令太限制性并且当您绝对信任内容的来源时您具有约束力.

   因此，关键在于信任您正在加载的 HTML 内容的来源.在最后一种情况下，您始终可以自己处理/清理" HTML 内容，但这似乎并不容易实现，尤其是在内容是动态的情况下.

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!

解决方案

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.

这篇关于ng-bind-html 不加载图像 src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！