Angular——DomSanitizer服务

概念:

DomSanitizer服务主要用于在Angular应用中对HTML、CSS和URL进行安全地处理和转换,以防止跨站脚本攻击(XSS)等安全漏洞。常见的使用场景包括将不受信任的HTML内容转换为安全的HTML以进行显示,或者对URL进行安全地转换以在应用中使用。

使用场景:

https://blog.csdn.net/qq_44327851/article/details/134917322有提到使用DomSanitizer服务如何将包含换行符的字符串转换为安全的HTML以在Angular模板中显示出换行效果。这篇博客将记录DomSanitizer服务可以用于处理其他安全性相关的场景。特别是在前端需要根据后端返回的内容(比如返回的字符串有换行符、网站url、图片地址等)进行显示时,优先考虑使用DomSanitizer服务。

1. 处理动态生成的HTML内容:当需要在应用中动态生成HTML内容并将其显示在页面上时,可以使用`DomSanitizer`服务来确保生成的HTML内容是安全的,以避免XSS攻击。

javascript 复制代码
import { Component, OnInit, DomSanitizer } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div [innerHTML]="formattedHtml"></div>
  `
})
export class ExampleComponent implements OnInit {
  originalHtml: string = '<p>Hello, <strong>{{ name }}</strong>!</p>';
  formattedHtml: any;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    let interpolatedHtml = this.originalHtml.replace('{{ name }}', '<script>alert("XSS attack!");</script>');
    this.formattedHtml = this.sanitizer.bypassSecurityTrustHtml(interpolatedHtml);
  }
}

2. 处理动态生成的URL:当需要在应用中使用动态生成的URL时,例如通过`[src]`属性加载图片、视频等资源,可以使用`DomSanitizer`服务对URL进行安全地处理,以确保URL不包含恶意代码或攻击。

javascript 复制代码
import { Component, OnInit, DomSanitizer } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <img [src]="formattedUrl">
  `
})
export class ExampleComponent implements OnInit {
  originalUrl: string = 'https://example.com/images/{{ imageName }}.jpg';
  formattedUrl: any;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    let interpolatedUrl = this.originalUrl.replace('{{ imageName }}', 'malicious-script');
    this.formattedUrl = this.sanitizer.bypassSecurityTrustUrl(interpolatedUrl);
  }
}

3. 处理动态生成的样式表:如果应用中需要动态生成样式表,可以使用`DomSanitizer`服务来确保生成的样式表是安全的,以避免CSS注入攻击。

javascript 复制代码
import { Component, OnInit, DomSanitizer } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <style [innerHTML]="formattedCss"></style>
  `
})
export class ExampleComponent implements OnInit {
  originalCss: string = 'body { background-image: url("{{ backgroundImage }}"); }';
  formattedCss: any;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    let interpolatedCss = this.originalCss.replace('{{ backgroundImage }}', 'javascript:alert("CSS injection!");');
    this.formattedCss = this.sanitizer.bypassSecurityTrustStyle(interpolatedCss);
  }
}

总之,DomSanitizer服务可以在需要处理动态生成的HTML、URL和CSS等内容时发挥重要作用,确保这些内容在应用中是安全的,不会引发安全漏洞。

相关推荐
万少1 分钟前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
掘金约基奇_2 分钟前
JS-SDK开发企微侧边栏
前端·javascript
FlowGram8 分钟前
低代码设计态变量挑战与设计 — 前端变量引擎介绍
前端·低代码
大西瓜瓜瓜14 分钟前
PS2020,将所有图片不剪切,调整为800×800像素的文档尺寸。
前端
sjin16 分钟前
React源码 - 大名鼎鼎的Fiber
前端
子兮曰18 分钟前
🚀从单体到Monorepo:四川省xxx协会官网架构重生记
前端·next.js·turbopack
bosscheng18 分钟前
0到1理解web音视频从采集到传输到播放系列之《Jessibuca系列篇音视频解封装》
javascript·音视频开发
白水清风22 分钟前
CI/CD学习记录(基于GitLab)
前端·自动化运维·前端工程化
齐杰拉23 分钟前
源码精读:拆解 ChatGPT 打字机效果背后的数据流水线
前端·chatgpt
文心快码BaiduComate32 分钟前
“一人即团队”——一句话驱动智能体团队
前端·后端·程序员