Angular 使用DomSanitizer

跨站脚本Cross-site scripting

简称XSS,是代码注入的一种,是一种网站应用程序的安全漏洞攻击。它允许恶意用户将代码注入到网页上,其他用户在使用网页时就会收到影响,这类攻击通常包含了HTML和用户端脚本语言(JS)。

XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript,但是实际上也可以是Java、VBScript、ACtiveX、Flash甚至是一些普通的HTML。攻击成功后,攻击者可能得到更高的操作权限、私密网页内容、会话和cookie等各种内容。

Angular中的DomSanitizer服务

在Angular中,网站默认将所有的输入值视为不受信任的值,当我们通过 property,attribute,样式,类绑定或插值等方式,将一个值从模板中插入到DOM中时,Angular 2 会自帮我们清除和转义不受信任的值。
DomSanitizer服务主要用于在Angular应用中对HTML、CSS和URL进行安全的处理和转换,以防止XSS安全漏洞。
在前端需要根据后端接口返回的数据进行显示时,就需要使用DomSanitizer进行处理。

DomSanitizer的几种用法

在Angular中使用DomSanitizer时,首先在组建中引入DomSanitizer服务,随后在组建构造器中通过依赖注入的方式获取到它的实例,如下面代码所示,这就是在一个最简单的组件中引入DomSanitizer服务器的方法。

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-index',
  templateUrl: './app-index.component.html',
  styleUrls: ['./app-index.component.less'],
})
export class AppIndexComponent implements OnInit{

  constructor(
    public sanitizer: DomSanitizer,
  ) {}

  ngOnInit() {}
}

通过this.sanitizer.使用这个服务时发现,它有六个方法供开发者使用,如下图所示:
在这里插入图片描述

相关推荐

  1. Angular——DomSanitizer服务

    2024-04-10 07:50:05       59 阅读
  2. 关于angular使用

    2024-04-10 07:50:05       31 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-10 07:50:05       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-10 07:50:05       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-10 07:50:05       87 阅读
  4. Python语言-面向对象

    2024-04-10 07:50:05       96 阅读

热门阅读

  1. 技术即服务:产品预告-1

    2024-04-10 07:50:05       34 阅读
  2. Redis+lua脚本限制ip多次输入错误密码

    2024-04-10 07:50:05       38 阅读
  3. 【AIGC调研系列】号称搜索引擎革命的Perplexity AI

    2024-04-10 07:50:05       40 阅读
  4. Ribbon负载均衡

    2024-04-10 07:50:05       34 阅读
  5. vue 组件间传值

    2024-04-10 07:50:05       28 阅读