NG-绑定HTML的不加载图片src [英] ng-bind-html does not load image src

问题描述

我有一个简单的presentation这样

 ＆LT; D​​IV ID ={{item.id}}NG重复=，在ITEMLIST项目＆GT;
        ＆LT; D​​IV NG绑定-HTML =item.html＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

该item.html包含HTML这样的：

 ＆LT; A HREF =htt​​p://www.youtube.com＆GT;＆LT; IMG SRC =图标/ youtube.pngALT =YouTube的视频/＆GT; ＆所述; / A＆GT;
 

然而，由此产生的HTML不加载图像：

 ＆LT; A HREF =htt​​p://www.youtube.com＆GT;＆LT; IMG ALT =YouTube的视频/＆GT;＆LT; / A＆GT;
 

经过一番搜索，貌似angularjs这样做是为了避免交叉站点脚本，但我可以从YouTube直接加载图像。

 ＆LT; A HREF =htt​​p://www.youtube.com＆GT;＆LT; IMG SRC =htt​​p://img.youtube.com/vi/9bZ​​kp7q19f0/ 0.jpgALT =YouTube的视频/＆GT;＆LT; / A＆GT;
 

更进一步，我能够通过使用加载所有图像NG绑定-HTML不安全的。

 ＆LT; D​​IV ID ={{item.id}}NG重复=，在ITEMLIST项目＆GT;
        ＆LT; D​​IV NG绑定HTML的不安全=item.html＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

如果我用NG-绑定-HTML不安全的，我不需要ngSanitize模块了，这意味着我的code是不太安全？我确实有使用情况下，我打开图片来自外部来源。

来到我的问题：

1. 什么是NG绑定，html和NG绑定HTML的不安全除了我上面提到的区别。有没有这方面有任何文档？我找不到任何。




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

谢谢！

解决方案

1. 有没有更添加到你的话。

   NG-绑定-HTML 允许您已经消毒后的HTML内容加载到你的角度应用程序（使用 $消毒服务）。
   在另一方面， NG-结合HTML的不安全可加载任何HTML内容未经消毒。

   的sanitize方法过程包括上检查所提供的HTML内容的每个元素与公知的HTML标记/元素的列表。然后任何标记/元素不在列表上被去除。除了有特定的HTML属性几个验证（如的src ）。

   在你的情况元素＆LT; IMG SRC =图标/ youtube.pngALT =YouTube的视频/＆GT; 不具有有效的的src 属性，因为它不符合AngularJSURI正则表达式： / ^（（FTP | HTTPS）：\\ / \\ / |至mailto：？|联系电话：| ＃）/

   有关详细信息，请检查 ngBindHtml ，的 ngBindHtmlUnsafe 和的 $的sanitize （和 AngularJS源$ C ​​$ C ）




2. 我相信没有......特别是如果你不控制你加载的HTML作为对 ngBindHtmlUnsafe 文件指出：

   
     

   只有ngBindHtml指令是太应该使用这个指令
     限制性当你绝对信任的内容源
     要绑定到。

   
   

   所以，它是所有关于信任你加载HTML内容的来源。在最后一种情况下，你可以随时处理/'的sanitizeHTML内容自己，不过这似乎并不容易实现，特别是如果内容是动态的。

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-绑定HTML的不加载图片src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！