跨站腳本Cross-site scripting

簡稱XSS，是代碼注入的一種，是一種網(wǎng)站應(yīng)用程序的安全漏洞攻擊。它允許惡意用戶將代碼注入到網(wǎng)頁上，其他用戶在使用網(wǎng)頁時就會收到影響，這類攻擊通常包含了HTML和用戶端腳本語言（JS）。

XSS攻擊通常指的是通過利用網(wǎng)頁開發(fā)時留下的漏洞，通過巧妙的方法注入惡意指令代碼到網(wǎng)頁，使用戶加載并執(zhí)行攻擊者惡意制造的網(wǎng)頁程序。這些惡意網(wǎng)頁程序通常是JavaScript，但是實際上也可以是Java、VBScript、ACtiveX、Flash甚至是一些普通的HTML。攻擊成功后，攻擊者可能得到更高的操作權(quán)限、私密網(wǎng)頁內(nèi)容、會話和cookie等各種內(nèi)容。

Angular中的DomSanitizer服務(wù)

在Angular中，網(wǎng)站默認(rèn)將所有的輸入值視為不受信任的值，當(dāng)我們通過 property，attribute，樣式，類綁定或插值等方式，將一個值從模板中插入到DOM中時，Angular 2 會自幫我們清除和轉(zhuǎn)義不受信任的值。
DomSanitizer服務(wù)主要用于在Angular應(yīng)用中對HTML、CSS和URL進行安全的處理和轉(zhuǎn)換，以防止XSS安全漏洞。
在前端需要根據(jù)后端接口返回的數(shù)據(jù)進行顯示時，就需要使用DomSanitizer進行處理。

DomSanitizer的幾種用法

在Angular中使用DomSanitizer時，首先在組建中引入DomSanitizer服務(wù)，隨后在組建構(gòu)造器中通過依賴注入的方式獲取到它的實例，如下面代碼所示，這就是在一個最簡單的組件中引入DomSanitizer服務(wù)器的方法。

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.使用這個服務(wù)時發(fā)現(xiàn)，它有六個方法供開發(fā)者使用，如下所示：

abstract class DomSanitizer implements Sanitizer {abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null
abstract bypassSecurityTrustHtml(value: string): SafeHtml
abstract bypassSecurityTrustStyle(value: string): SafeStyle
abstract bypassSecurityTrustScript(value: string): SafeScript
abstract bypassSecurityTrustUrl(value: string): SafeUrl
abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl

bypassSecurityTrustHtml

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

@Component({
  selector: 'app-test',
  templateUrl: './app-test.component.html'
})
export class AppTestComponent implements OnInit {

  html='<h1>Hello world!<h1>';
  shtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.shtml =this.sanitizer.bypassSecurityTrustHtml(this.html);
  }
}

<div [innerHTML]="shtml"></div>

bypassSecurityTrustUrl

import { Component, OnInit, DomSanitizer } from '@angular/core';
 
@Component({
  selector: 'app-test',
  template: `
    <img [src]="formattedUrl">
  `
})
export class AppTestComponent 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);
  }
}

bypassSecurityTrustResourceUrl、 bypassSecurityTrustScript、 bypassSecurityTrustStyle這三種用法和上面兩種類似。文章來源地址http://www.zghlxwxcb.cn/news/detail-852499.html

<!-- bypassSecurityTrustStyle -->
<div [style]="sstyle"></div>
<!-- bypassSecurityTrustResourceUrl -->
<iframe [src]="surl"></iframe>  

sanitize

到了這里，關(guān)于Angular 使用DomSanitizer防范跨站腳本攻擊的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！