[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 ...
随机推荐
- POJ 3233 Matrix Power Serie
题意:给一个n×n的矩阵A,求S = A + A2 + A3 + … + Ak. 解法:从式子中可得递推式S(n) = S(n - 1) + An,An = An-1×A,可得矩阵递推式 [S(n), ...
- delete drop truncate
一.相同点 1 truncate.不带where子句的delete.drop都会删除表内的数据2 drop.truncate都是DDL语句(数据定义语言),执行后会自动提交 二.不同点 1trunca ...
- EasyHook远注简单监控示例 z
http://www.csdn 123.com/html/itweb/20130827/83559_83558_83544.htm 免费开源库EasyHook(inline hook),下面是下载地址 ...
- 恒天云技术分享系列5 – 虚拟化平台性能对比（KVM & VMware）
恒天云技术分享系列:http://www.hengtianyun.com/download-show-id-14.html 概述 本性能测试报告将详细陈述各虚拟化平台基准性能测试的主要结论和详细结果. ...
- Mahout应用（一）
Mahout应用(一) Mahout 是应用于hadoop上的数据挖掘工具(废话不多说) 这里先简单介绍一下mahout的一般使用方法. 拿kmeans为列子 Mahout中的kmeans所需要的输入 ...
- 【Hadoop代码笔记】Hadoop作业提交之Child启动map任务
一.概要描述 在上篇博文描述了TaskTracker启动一个独立的java进程来执行Map或Reduce任务.在本篇和下篇博文中我们会关注启动的那个入口是org.apache.hadoop.mapre ...
- ESXI安装
1.设置从USB启动 按DEL进入BIOS设置 参考http://www.upanok.com/jiaocheng/68.html 先插入USB,在选择ADVANCAED BIOS FEATURES ...
- discuz论坛apache日志hadoop大数据分析项目：清洗数据核心功能解说及代码实现
discuz论坛apache日志hadoop大数据分析项目:清洗数据核心功能解说及代码实现http://www.aboutyun.com/thread-8637-1-1.html(出处: about云 ...
- linux 系统常用命令
临时性的完全关闭防火墙,可以不重启机器: #/etc/init.d/iptables status ##查看防火墙状态 #/etc/init.d/iptable stop ...
- 安卓升级提示 phoneGap APK软件更新提示
以下代码由PHP200 阿杜整理 package com.example.syzx; import java.io.BufferedReader; import java.io.File; imp ...