Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – Angular 1.2:ng-bind-html删除img上的src属性大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在客户端使用Angular(1.2 RC2)开发CMS驱动的网站.由于内容来自CMS,我不幸被迫在 JSON字符串中使用接收HTMl.大多数HTML都被注入并渲染得很好,但是图像标签的src被剥离了.从我读到的src应该以“unsafe:”为前缀,如果这是Angular中的XSS安全问题,则不会完全删除..但我可能会弄错.

我已经在这个问题上待了一段时间,感觉我已经尝试了从合理到彻头彻尾的愚蠢的一切.将我的CMS网址列入白名单,将所有内容列入白名单,禁用$sce,强制html通过$sce.trustAsHtml()并且好……到目前为止,没有运气.由于该网站是CMS驱动的,我不幸的是不能创造一个掠夺者/小提琴,但我希望一个善良的灵魂无论如何都会尝试帮助.

更新:忘记提到我也尝试过ng-src,效果相同.
更新II:如果我使用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')

角度控制器

.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": "
  

  
\r\n
\r\n

angularjs – Angular 1.2:ng-bind-html删除img上的src属性

\r\n

\r\n
\r\n

Sulvat Quis 1

\r\n

– Nullam Dictum ac enim@H_607_36@\r\n

\r\n

Proin 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.

\r\n
\r\n
\r\n
","articlePriority": 0,"category": { "cmcaId": 9,"corp": { "corpId": 2,"guiSELEcted": false },"name": "carousel","visibleInMenu": false },"published": true

}

@H_801_49@ 你在这里遗失的作品是通过$sce.trustAsresourceURL();来信任图片网址.有关文档,请参见 here.

编辑:此外,它似乎你没有将ng-src值包装在引号中(以及它作为HTML属性所需的引号).这不起作用 – ng-src期望一个javascript字符串作为表达式的最终结果,并且你为它提供了一个无效的javascript文字.

大佬总结

以上是大佬教程为你收集整理的angularjs – Angular 1.2:ng-bind-html删除img上的src属性全部内容,希望文章能够帮你解决angularjs – Angular 1.2:ng-bind-html删除img上的src属性所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。