AngularJS中页面呈现html代码段

最新推荐文章于 2023-03-20 21:38:04 发布

weixin_33817333

最新推荐文章于 2023-03-20 21:38:04 发布

阅读量357

点赞数

文章标签： javascript ViewUI

本文讲解了在Angular应用中如何安全地将HTML代码插入到页面上，避免XSS攻击。通过使用angular-sanitize模块和$sce服务，可以信任并安全地显示动态HTML内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何在页面呈现一段html代码段呢？

在textarea中我们这样写：

<textarea name="" id="" cols="30" rows="" ng-model="app.someHtml"></textarea>

也可以这样写：

<div ng-bind-html="app.someHtml"></div>

在controller中大致这样写：

var app = angular.module('app',[]);

app.controller("AppCtrl", function(){
    var app = thisj;
    app.someHtml = '<a href="#">Hello</a>';
})

但，这样会报错。

如何避免呢？

--需要安装angular-sanitize

npm install angular-sanitize

controller中改成这样：

var app = angular.module('app',["ngSanitize"]);

app.controller("AppCtrl", function($sce){
    app.someHtml = $sce.trustAsHtml('<a href="#" style="color:red">Hello</a>');
})

$sce用来信任html代码段。好让类似style这种属性生效、被信任。