[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# 中的static静态变量
logitechyan原文关于C#中static静态变量 C#静态变量使用static 修饰符进行声明,在类被实例化时创建,通过类进行访问不带有 static 修饰符声明的变量称做非静态变量,在对象被 ...
- 浅谈Linux容器和镜像签名
导读 从根本上说,几乎所有的主要软件,即使是开源软件,都是在基于镜像的容器技术出现之前设计的.这意味着把软件放到容器中相当于是一次平台移植.这也意味着一些程序可以很容易就迁移,而另一些就更困难. 我大 ...
- [原创]C语言利用pcre正则表达式库
C语言使用正则表达式,可以利用pcre库,这个比较不错的哦. 在使用过程中,利用python进行测试正则表达式是否OK,后发现出现了问题.如下所示: regex.c:11:18: warning: u ...
- Chromuim开发机配置
一个出色的程序员需要一台给力的电脑. 之前使用ThinkPad R400笔记本编译Chromium,确实太痛苦了,第一次编译未使用SSD,超过了24小时都没有编译完.后来断断续续折腾了将近一个月才编译 ...
- linux常用命令之--目录与文件的操作命令
1.linux的目录与文件的增.删.改.复制 pwd:用于显示当前所在的目录 ls:用于显示指定目录下的内容 其命令格式如下: ls [-option] [file] 常用参数: -l:显示文件和目录 ...
- STM32的JTAG、SWD和串口下载的问题
最近有一个项目用到STM32,为了使PCB布线方便一些所以改了一些引脚,占用了JTAG接口的PA15和PB3,所以要禁用一下JTAG,下载采用SWD模式.这样在实际操作中做出一些总结(方法网上都有.这 ...
- 【九度OJ】题目1201-二叉排序树
题目 建树过程是递归,"递归的思路不是很复杂",经过题目1078的训练,直接开始编码.提交及修改的过程告诉自己,这是一个错觉,对递归的理解还应该再进一步. 自己的实现 #inclu ...
- 在NodeJS中配置aws ec2
获取access key和secret access key 自己账户下有security credentials的选项 然后点击Acce ...
- jquery validate easyui tooltip
jquery validate.js onfocusin: function (element, event) { this.lastActive = element; // hide error l ...
- Delimiter must not be alphanumeric or backslash 问题及解决
Warning: preg_match() [function.preg-match]: Delimiter must not be alphanumeric or backslash in 正则表达 ...