angularjs - Angular 1.2 : ng-bind-html removes src attribute on img

Question

我正在客户端使用 Angular (1.2 RC2) 开发一个 CMS 驱动的网站。由于内容来自 CMS，不幸的是，我不得不在 JSON 字符串中使用接收 HTML。大多数 HTML 都被注入(inject)并渲染得很好，但是图像标签的 src 被剥离了。从我读过的内容来看，src 应该以“unsafe:”为前缀，如果这是 Angular 中的 XSS 安全问题，则不会完全删除......但我可能弄错了。

我在这个问题上已经有一段时间了，感觉我已经尝试了从合理到完全愚蠢的所有方法。将我的 CMS 网址列入白名单，将所有内容列入白名单，禁用 $sce , 强制 html 低谷 $sce.trustAsHtml() 嗯......到目前为止，没有运气。由于该网站是由 CMS 驱动的，我很遗憾无法创建一个 plunker/fiddle，但我希望一个善良的灵魂无论如何都会尝试提供帮助。

更新 : 忘了说我也试过 ng-src ，同样的效果。
更新二 :如果我使用 HTTPS，src 属性会保留并显示图像。这是可以接受的，因为它将在生产环境中在 HTTPS 上运行，但我仍然想知道为什么禁用 $sce 不起作用。

浏览器看到的 HTML (slide.body 的内容)

<div class="row">
    <div class="col-md-6 visible-md visible-lg">
        <img alt="none" class="img-responsive">
    </div>
    <div class="col-xs-12 col-md-6">
        <div class="itx-article-header">
             <h1>Sulvat Quis 1</h1>

             <h2>– Nullam dictum ac enim</h2>

        </div>
        <p>Proin quis justo vel felis varius sodales sit amet ut diam.</p>
    </div>
</div>

Jade (HTML)

.my-carousel(ng-controller='CarouselCtrl')
    carousel(interval='myInterval')
        slide(ng-repeat='slide in slides', active='slide.active')
            .my-carousel-item(ng-bind-html='slide.body')

Angular Controller

.controller('CarouselCtrl', ['$sce', 'Article', '$scope',
    function($sce, Article, $scope) {
        $scope.myInterval = -1;
        $scope.slides = Article.query(
            {category: 'carousel'},
            function(data){
                for (var i = 0; i < data.length; i++) {
                    $scope.slides[i].body = $sce.trustAsHtml(data[i].body);                     
                }
            },
            function() {
                // Fail
            });
    }])

JSON 响应示例(幻灯片)
对不起，宽框，没有设法格式化。

{
"cmarId": 16,
"corp": {
    "corpId": 2,
    "guiSelected": false
},
"createdAt": "Sep 27, 2013",
"articleTag": "slide-1",
"headline": "Slide 1",
"highlighted": false,
  "body": "\u003cdiv class\u003d\"container my-carousel-container-small\"\u003e\r\n\u003cdiv class\u003d\"row\"\u003e\r\n\u003cdiv class\u003d\"col-md-6 visible-md visible-lg\"\u003e\u003cimg ng-src\u003d\"img/illustrative/laptop.jpg\" alt\u003d\"none\" class\u003d\"img-responsive\" /\u003e\u003c/div\u003e\r\n\u003cdiv class\u003d\"col-xs-12 col-md-6\"\u003e\r\n\u003cdiv class\u003d\"my-article-header\"\u003e\r\n\u003ch1\u003eSulvat Quis 1\u003c/h1\u003e\r\n\u003ch2\u003e– Nullam dictum ac enim\u003c/h2\u003e\r\n\u003c/div\u003e\r\n\u003cp\u003eProin quis justo vel felis varius sodales sit amet ut diam. Fusce auctor sapien nec purus sagittis, in venenatis turpis luctus. Nullam dictum ac enim sed commodo. Vivamus et placerat sapien.\u003c/p\u003e\r\n\u003c/div\u003e\r\n\u003c/div\u003e\r\n\u003c/div\u003e",
"articlePriority": 0,
"category": {
    "cmcaId": 9,
    "corp": {
        "corpId": 2,
        "guiSelected": false
    },
    "name": "carousel",
    "visibleInMenu": false
},
"published": true

}

Answer 1

您在这里缺少的部分是通过 $sce.trustAsResourceURL(); 信任图像 url .见 here相关文件。

编辑:此外，您似乎没有将 ng-src 值包含在引号中(以及作为 HTML 属性所需的引号)。那是行不通的——ng-src 期望一个 javascript 字符串作为表达式的最终结果，而你为它提供了一个无效的 javascript 文字。