[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 ...
随机推荐
- 基于Dubbo框架构建分布式服务
Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务应用场景来选择合适的集群容错模式,这个对于很多应用都是迫切希望的,只需要通过简单的配 ...
- MVC3.0在各个版本IIS中的部署
概述: 最近在做一个MVC 3的项目,在部署服务器时破费了一番功夫,特将过程整理下来,希望可以帮到大家! 本文主要介绍在IIS5.1.IIS6.0.IIS7.5中安装配置MVC 3的具体办法! 正文: ...
- 大连网络赛 1006 Football Games
//大连网络赛 1006 // 吐槽:数据比较水.下面代码可以AC // 但是正解好像是:排序后,前i项的和大于等于i*(i-1) #include <bits/stdc++.h> usi ...
- jsViews validates（验证）
概述:jsViews使得前端开发过程将js代码与html分离,通过模板实现数据与html元素关联,通过绑定方法用数据填充模板,达到渲染html要素的目的.采用该方法后js文件中再也不会出现 ...
- ubuntu开机自启动脚本编写
1.将启动脚本复制到/etc/init.d目录下面 2.chmod 755 /etc/init.d/xxx 3.sudo update-rc.d /etc/init.d/xxx defaults 95 ...
- 搭建Titanium开发环境
轻松制作 App 再也不是梦! Titanium Mobile 让你能够使用你所熟悉的 web 技术,制作出如同使用Objective-C 或 Java 写出的 Native App. 除了有多达三百 ...
- phonegap WebApp
打开网页浏览器,进入Android SDK网站(http://developer.android.com/sdk/index.html). 我们可以看到,Google官方提供了包括Windows平台在 ...
- 现代程序设计——homework-08
写在前面 以下内容出自一个对C++只有一点点了解,几乎没有写过C++程序的人,理解上的一定会很不到位,请各位路过神牛多多指点. 博客内容为对 http://www.cnblogs.com/softwa ...
- [iOS 多线程 & 网络 - 1.3] - NSOperation
A.NSOperation的基本使用 1.NSOperation的作用 配合使用NSOperation和NSOperationQueue也能实现多线程编程 NSOperation和NSOperatio ...
- [iOS UI进阶 - 5.0] 手势解锁Demo
A.需求 1.九宫格手势解锁 2.使用了绘图和手势事件 code source: https://github.com/hellovoidworld/GestureUnlockDemo B ...