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.

  1. import { Component } from '@angular/core';
  2. import { DomSanitizer } from '@angular/platform-browser';
  3.  
  4. @Component({
  5. selector: 'sanitized-component',
  6. template: `
  7. <div [style]="getStyle()">
  8. </div>
  9. `
  10. })
  11. export class SanitizedComponent {
  12.  
  13. constructor(private sanitizer: DomSanitizer) {}
  14. getStyle() {
  15. const gravatarUrl = 'https://cdn1.lelynx.fr/wp-content/uploads/2016/02/chat-pleure-1-150x150.jpg';
  16. const style = `background-image: url(${gravatarUrl}); width:150px; height:150px; border:1px solid black;`;
  17. return this.sanitizer.bypassSecurityTrustStyle(style);
  18. }
  19. }

[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. node.js 中 events emitter 的实现(发布、订阅模式)

    const EventEmitter = require('events'); const myEmitter = new EventEmitter(); myEmitter.on('event', ...

  2. 学习《人人都是产品经理2.0:写给泛产品经理》高清中文PDF+苏杰(作者)

    <人人都是产品经理2.0--写给泛产品经理>将从人开始,以人结束,中间说事,以一个产品从无到有的过程为框架--想清楚.做出来.推出去,外加一章综合案例.其中,最重要的想清楚.做出来.推出去 ...

  3. 洛谷 P3040 [USACO12JAN]贝尔分享Bale Share

    P3040 [USACO12JAN]贝尔分享Bale Share 题目描述 Farmer John has just received a new shipment of N (1 <= N & ...

  4. 利用HTTP代理录制Jmeter脚本

    1 測试计划中加入一个线程组1 2在"工作台"-非測试元件-加入"HTTP代理server" port: 代理server的port,默认8080,可自行改动, ...

  5. RvmTranslator6.2 is released

    RvmTranslator6.2 is released eryar@163.com RvmTranslator can translate the RVM file exported by AVEV ...

  6. jQuery11 data() : 数据缓存

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. thinkphp5多文件上传如何实现

    thinkphp5多文件上传如何实现 一.总结 一句话总结:官方文档,测试一下,一定要测试,打印中间变量,就知道每句话是什么意思,一定要测试一下.又简单有快. 测试一下,你就能确定中间变量和你的是不是 ...

  8. HUD——T 3836 Equivalent Sets

    http://acm.hdu.edu.cn/showproblem.php?pid=3836 Time Limit: 12000/4000 MS (Java/Others)    Memory Lim ...

  9. HDU 1043 八数码(A*搜索)

    在学习八数码A*搜索问题的时候须要知道下面几个点: Hash:利用康托展开进行hash 康托展开主要就是依据一个序列求这个序列是第几大的序列. A*搜索:这里的启示函数就用两点之间的曼哈顿距离进行计算 ...

  10. mac自己定义tree命令

    编辑文件: vim ~/.bash_profile 在文件末尾追加: alias tree="find . -print | sed -e 's;[^/]*/;|____;g;s;____| ...