在 angularJS 1.x 中渲染 HTML

Question

我有一个指令，我正在用 img src 替换 IMG url 以显示内联图像

function message($filter) {

    var directive = {
        restrict: 'EA',

        scope: {
            data: '='
        },

        link: function(scope, elem, attrs) {
            scope.data.content = scope.data.content.replace(/(https?:\/\/\S+(\.png|\.jpeg|\.jpg|\.gif))/g, "<img src='$1' alt=''>");
        },

        template: '<span>{{data.nickname}}:</span> {{data.content}}'

    };

    return directive;
}

但我没有看到内联图像，而是将 HTML 标记视为文本，我正在调查 $sce 但我不确定如何在指令中使用它。

Answer 1

你更近了！使用 ngSanitize 模块是对的。

它基本上允许您在模板中编写原始 HTML（使用 ng-bind-html 指令）。您需要将它包含在您的页面中，并将其声明为您的模块中的依赖项，如下所示：

<!-- HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.2/angular-sanitize.min.js"></script>

// JavaScript
angular.module("yourapp", ['ngSanitize']);

然后，使用 ng-bind-html 指令将您的 HTML 内容绑定到 div（或其他）中，如下所示：

template: '<span>{{data.nickname}}:</span> <div ng-bind-html="data.content"></div>'

现在，data.content 的原始 HTML 内容将被替换为指令模板中的原样。这是一个working plunker 供您参考。

Answer 2

因此，一种更直观、更安全的方法是不直接将 html 写入模板。相反，您可以使用大括号将图像 url 放入模板中，如下所示：

template: `
    <span>{{data.nickname}}:</span>
    <img ng-if="{{data.hasImage}}" src="{{data.url}}" alt="">
`

这保留了模板/数据的分离。

按照您的方式，您将自己置于 XSS 的风险之中。为了将生成的 html 放入模板中，Angular 让您跳过障碍是有原因的。如果用户能够在 url 中上传带有 js 的图像，那么您的网站可能会被黑客入侵。 Angular 的普通模板会自动阻止这种攻击。

如果你需要多张图片，你可以为你的数据中的每个对象添加一个 url 属性，将数据数组放在作用域上，然后使用 ng-repeat 渲染对象数组。