6

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

<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 指令？

谢谢！

4

2 回答 2

4

  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 内容，但这似乎并不容易完成，特别是在内容是动态的情况下。

于 2013-01-16T23:34:31.683 回答
0

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

你可以在这里找到他的帖子

于 2013-11-11T14:44:44.350 回答