angularjs - 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 模块，这意味着我的代码不那么安全了吗？我确实有从外部来源加载图像的用例。

来回答我的问题:

除了我上面提到的之外，ng-bind-html 和 ng-bind-html-unsafe 之间有什么区别。有这方面的文件吗？我找不到任何东西。

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

谢谢!

Answer 1

你说的没有什么要补充的了。
ng-bind-html允许您在清理后将 HTML 内容加载到您的 Angular 应用程序中(使用 $sanitise 服务)。
另一方面，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 source code )

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

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.

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