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

相关推荐
鸡吃丸子21 分钟前
Next.js 入门指南
开发语言·javascript·next.js
罚时大师月色34 分钟前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
漂流瓶jz1 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom1 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1231 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023371 小时前
包资源管理器NPM 使用
前端·npm·node.js
宁&沉沦1 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
Dragonir2 小时前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
古一|2 小时前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript