ng-bind-html不加载图像src

Question

我有一个简单的演示文稿

<div id="{{item.id}}" ng-repeat="item in itemList">
        <div ng-bind-html="item.html"></div>
</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/9bZkp7q19f0/0.jpg" alt="Youtube"/></a>

此外，我可以使用ng-bind-html-unsafe加载所有图像。

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

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

来到我的问题：

1. 除了上面提到的内容之外，ng-bind-html和ng-bind-html-unsafe有什么区别。有没有关于此的文件？我找不到任何东西。

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

谢谢！

Answer 1

1. 没有更多内容可以添加到您所说的内容中。

   ng-bind-html允许您在使用$sanitise服务进行清理后将HTML内容加载到角度应用中。 另一方面，ng-bind-html-unsafe允许您加载任何HTML内容而不进行清理。

   清理过程包括使用众所周知的HTML标记/元素列表检查提供的HTML内容的每个元素。然后删除列表中没有的任何标记/元素。除此之外，还有一些关于特定HTML属性的验证（例如src）。

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

   有关详情，请查看ngBindHtml，ngBindHtmlUnsafe和$sanitize（以及AngularJS source code）

2. 我相信没有...尤其是如果您不控制正在加载的HTML。正如ngBindHtmlUnsafe文档中所述：

     

   仅当ngBindHtml指令也是如此时，您应该使用此指令   限制性，当你完全信任内容的来源时   你有约束力。

   因此，所有关于信任您正在加载的HTML内容的来源。在最后一种情况下，您始终可以自己处理/“清理”HTML内容，但这似乎并不容易实现，特别是如果内容是动态的。

Answer 2

Nenad最近回答了这样的问题。通过调用$ sce.trustAsHtml（$ scope.html），您将能够将HTML标记为有效，以便ng-bind-html接受它。即使img src是相对的，否则会被标记为无效。

You can find his post here