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等内容时发挥重要作用，确保这些内容在应用中是安全的，不会引发安全漏洞。