[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 ...
随机推荐
- Android之布局属性
1) 布局的相关属性 ① android:layout_weight="1.0",layout_weight 用于给一个线性布局中的诸多视图重要度赋值.所有的视图都有一个layou ...
- C++实现网格水印之调试笔记（一）
首先说一下我的一些简单的调试方法,除了常规的断点调试之外,我还会使用注释的方法来调试.当整个工程代码量相当多且调用层次关系较为复杂时,这种方法能够比较高效的定位到出错误的代码段或某个函数,然后在出现错 ...
- Linux中MySQL5.5解压版普通用户安装
#查看本机mysql 安装路径 [hadoop@SY-0134 toolkit]$ rpm -qa|grep -i mysql [hadoop@SY-0134 toolkit]$ whereis my ...
- 【Hadoop代码笔记】Hadoop作业提交之Child启动reduce任务
一.概要描述 在上篇博文描述了TaskTracker启动一个独立的java进程来执行Map任务.接上上篇文章,TaskRunner线程执行中,会构造一个java –D** Child address ...
- mac搭建PHP开发环境
在Mac系统上搭建Php服务器环境: LAMP: Linux Apache MySQL PHP MAMP: MACOS APACHE(自带) MYSQL(需自己安装) PHP(自带) 一.APACHE ...
- Jvm基础(1)-Java运行时数据区
最近在看<深入理解Java虚拟机>,里面讲到了Java运行时数据区,这是Jvm基本知识,把读书笔记记录在此.这些知识属于常识,都能查到的,如果我有理解不对的地方,还请指出. 首先把图贴上来 ...
- 新手指南：详解Linux Top 命令
Linux top命令简介 top 命令是最流行的性能监视工具之一,我们必需了解.它是一个优秀的交互式工具,用于监视性能.它提供系统整体性能,但报告进程信息才是 top 命令的长处.top 命令交互界 ...
- Linux 的进程组、会话、守护进程
一.进程组ID 每个进程都属于一个进程组.每个进程组有一个领头进程.进程组是一个或多个进程的集合,通常它们与一组作业相关联,可以接受来自同一终端的各种信号.每个进程组都有唯一的进程组ID(整数,也可以 ...
- UVaLive 7372 Excellence (水题，贪心)
题意:给定 n 个数,要求把其中两个分成一组,然后加和,问所有的都分好,最小数是几. 析:贪心策略,最大和是小的相加,就是最优的. 代码如下: #pragma comment(linker, &quo ...
- C#中托管与非托管
在.net 编程环境中,系统的资源分为托管资源和非托管资源. 对于托管的资源的回收工作,是不需要人工干预回收的,而且你也无法干预他们的回收,所能够做的 只是了解.net CLR如何做这些操作.也就是说 ...