Angular has a very robust security model. Dynamically inserted html, style or url values into the DOM open up possibilities for attackers to compromise your site. Thus Angular treats all values as untrusted by default. In this lesson we learn how to “sanitize” values where we are sure they are trustful.

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; @Component({
selector: 'sanitized-component',
template: `
<div [style]="getStyle()">
</div>
`
})
export class SanitizedComponent { constructor(private sanitizer: DomSanitizer) {}
getStyle() {
const gravatarUrl = 'https://cdn1.lelynx.fr/wp-content/uploads/2016/02/chat-pleure-1-150x150.jpg';
const style = `background-image: url(${gravatarUrl}); width:150px; height:150px; border:1px solid black;`;
return this.sanitizer.bypassSecurityTrustStyle(style);
}
}

[Angular] Use Angular style sanitization to mark dynamic styles as trusted values的更多相关文章

  1. ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频

    视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...

  2. angular 2 angular quick start Could not find HammerJS

    Angular2 的material中 引用了 hammerjs,遇到Could not find HammerJS错误,正确的步骤如下: 需要在如下位置增加 对material 和 hammerjs ...

  3. [Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2

     Just like passing in an array to *ngFor, you can pass in any value into your structural directive s ...

  4. 简话Angular 03 Angular内置表达式大全

    一句话: 大多数html标签属性和事件都有一个对应的ng指令 说明:这些指令和原生html最大的区别就是可以动态更新.比如一个div的样式用ng-class后,我们就可以随意应用css class. ...

  5. [Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself

    One thing that we can do is to add styles directly to HTML elements that live within our component. ...

  6. [Angular] Configurable Angular Components - Content Projection and Input Templates

    We are going to have a modal component: <au-modal > </au-modal> And we can pass default ...

  7. angular+selecte2(angular ng-repeat渲染)

    一.页面代码 <select id="sponsorId" select2 ng-model="sponsorSelectedObj" ng-change ...

  8. [Angular 2] Angular 2 Smart Components vs Presentation Components

    Both Smart Components and Presentation Components receive data from Services in entirely different w ...

  9. Intergate flot with Angular js ——Angular 图形报表

    下面这篇文章最终的结论就是 Flot 插件 结合 Angular 的Directive 来处理 图表的绘制 给出github上的一个demo源码.https://gist.github.com/fly ...

随机推荐

  1. AOP 动态添加函数

    Function.prototype.before = function(beforefn) { // 保存原函数的引用 var self = this; // 返回包含了原函数和新函数的代理函数 r ...

  2. POJ 1014 Dividing 背包

    二进制优化,事实上是物体的分解问题. 就是比方一个物体有数量限制,比方是13,那么就须要把这个物体分解为1. 2, 4, 6 假设这个物体有数量为25,那么就分解为1, 2, 4. 8. 10 看出规 ...

  3. session timer(一)

    功能介绍 SIP并没有为所建立的会话定义存活机制. 虽然用户代理能够通过会话特定的机制推断会话是否超时,可是代理server却做不到这点. 如此一来.代理server有时会无法推断会话是否还是活动的. ...

  4. Es61

    ECMAScript和JavaScript的关系 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础 ...

  5. php数组合并有哪三种方法

    php数组合并有哪三种方法 一.总结 一句话总结:array_merge():array_merge_recursive():‘+'号 $a = array('color'=>'red',5,6 ...

  6. 分享js寄生组合模式继承

    function person(){ this.name = 'taobao'; this.showMess = function(){ return this.name; } } person.pr ...

  7. mount 命令

    命令格式:mount [-t vfstype] [-o options] device dir 嵌入式设备挂载命令mount -o nolock -t nfs 192.168.1.24:/home/t ...

  8. 解决 Ubuntu 下解压 .zip 文件时出现乱码

    Ubuntu 下解压含中文名的 .zip 文件时,有时候会出现乱码的情况.我们可以通过下列命令来解决此类问题: $ unzip -O CP936 xxx.zip 原文网址 http://www.cnb ...

  9. IntelliJ IDEA如何导入maven结构的web工程

    第一步:打开一个现有(也可以不打开,直接用import选择Maven类型)的IntelliJ IDEA工程,点击菜单的"File"->"new"-> ...

  10. [RxJS] Marbles Testings

    Install: npm install — save-dev jasmine-marbles Basic example: import {cold, getTestScheduler} from ...