[AngularJS] Html ngSanitize, $sce
Safely render arbitrary HTML snippets by using ngSanitize and $sce.
By default angularJS consider user's input html is danger, so if you want to display html tag on the page will show unsafe error.
To remove this error and trust user's input, we can install ngSanitize:
bower install angular-sanitize
var egghead = angular.module("egghead", ["ngSanitize"]);
egghead.controller("AppCtrl", function () {
var app = this;
app.someHtml = '<a href="http://egghead.io" style="color:red">Learn stuff!</strong>';
});
<!DOCTYPE html>
<html>
<head>
<title>Egghead.io</title>
<link rel="stylesheet" href="bower_components/bootstrap.css/css/bootstrap.css"/>
</head>
<body ng-app="egghead" ng-controller="AppCtrl as app">
<textarea name="" id="" cols="30" rows="10" ng-model="app.someHtml"></textarea>
<div ng-bind-html="app.someHtml"></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="app.js"></script>
</body>
</html>
Then the error message has gone, but we didn't get the result which we want, we want "Learn stuff" shown in red color:
<a href="http://egghead.io" style="color:red">Learn stuff!</strong>
To overcome this, we can use $sce service:
var egghead = angular.module("egghead", ["ngSanitize"]);
egghead.controller("AppCtrl", function ($sce) {
var app = this;
app.someHtml = $sce.trustAsHtml('<a href="http://egghead.io" style="color:red">Learn stuff!</strong>');
});
Also you can trust as javascript, css && url:
see here: https://docs.angularjs.org/api/ng/service/$sce
[AngularJS] Html ngSanitize, $sce的更多相关文章
- 5、AngularJS 直接绑定显示html （$sce、$sanitize服务）
1.直接使用$sce服务(angularjs中:$sce.trustAsHtml($scope.snippet).html:ng-bind-html="snippet") 以下代码 ...
- 《AngularJS学习整理》系列分享专栏
<AngularJS学习整理>系列分享专栏 <AngularJS学习整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/re ...
- ngBind ngBindTemplate ngBindHtml
ng-bind: 只能绑定一个变量 在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: <p>{{titleStr}}</p> 另一种是使用基于属 ...
- 前端安全（XSS、CSRF防御）
一.网络安全 OWASP:开放式Web应用程序安全项目(OWASP,Open Web Application Security Project) OWASP是一个开源的 ...
- AngularJs $sce 和 $sceDelegate 上下文转义
$sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模 ...
- AngularJS 使用$sce控制代码安全检查
由于浏览器都有同源加载策略,不能加载不同域下的文件.也不能使用不合要求的协议比如file进行访问. 在angularJs中为了避免安全漏洞,一些ng-src或者ng-include都会进行安全校验,因 ...
- 【AngularJs】---$sce 输出Html
[问题描述] angular js的强大之处之一就是他的数据双向绑定功能----->ng-bind和针对form的ng-model 但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各 ...
- AngularJS通过$sce输出html的方法
不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候,发现用AngularJs输出html的时候,浏览器并不解析这些html标签,这里我们需要其显示angular输出的html能被浏览 ...
- angularjs通过ng-bind-html指令和$sce服务绑定html
代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
随机推荐
- C# chart绑定数据的方式整理
C#chart 画图曲线的条数决定是你的数据源也就Series.Series是对象 你动态创建就可以了. 一.数组, List 等简单Collection类型的方式 Series s1= new Se ...
- 用Apache Kafka构建流数据平台的建议
在<流数据平台构建实战指南>第一部分中,Confluent联合创始人Jay Kreps介绍了如何构建一个公司范围的实时流数据中心.InfoQ前期对此进行过报道.本文是根据第二部分整理而成. ...
- Corn Fields(POJ 3254状压dp)
题意: n*m网格1能放0不能放 放的格子不能相邻 求一共多少种可放的方案. 分析: dp[i][j]第i行可行状态j的的最大方案数,枚举当前行和前一行的所有状态转移就行了(不放牛也算一种情况) #i ...
- bjfu1238 卡特兰数取余
题目就是指定n,求卡特兰数Ca(n)%m.求卡特兰数有递推公式.通项公式和近似公式三种,因为要取余,所以近似公式直接无法使用,递推公式我简单试了一下,TLE.所以只能从通项公式入手. Ca(n) = ...
- UITableView 点击展开的实现
推介看下这里的 内容 http://www.cnblogs.com/kenshincui/p/3931948.html IOS8 above UITabliViewCell 利用 autolayou ...
- cocos2d-x 不能在android真机debug的问题
最近在做cocos2d-x开发的时候,发现在android真机上不能调试C++代码,显示如下警告信息 Ignoring packet error, continuing... warning: unr ...
- A题进行时--浙大PAT 1021-1030
1021: #include<stdio.h> #include<string.h> #include<vector> #include<queue> ...
- Centos6.4 coll linux 10.2
由于oracle10g太老了,只怪他娘Oracle生它生的太早了,差点就没赶上新时代(这家伙内心可也有些挺自豪的东东的,人家很有可能跟着它的主要干爹工程师为雅典奥运贡献了门票哩,生逢盛会啊!),较Ce ...
- Windows 下整理内存工具推荐——cleanmem
---恢复内容开始--- cleanmem 是个不错的内存整理工具,www.xdown.com 下载有便携版提供下载. 软件有pro版和free版,一般情况下,free版够用了,没必要用pro版. p ...
- RHEL安装配置JAVA
查看当前java版本 [root@esb-mmplus-04 ~]# java -version java version "1.6.0_24" OpenJDK Runtime E ...