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 内容加载到您的 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 内容，但这似乎并不容易完成，特别是如果内容是动态的。