如何在调用 API 时使用 DOMSANITIZER(bypassSecurityTrustUrl)

Question

在调用 API 获取数据时获取 XSS 漏洞。因此尝试添加 DOMSANITIZER，但失败了。试过下面的代码，请给我建议解决方案。

 this.http.get(this.domSanitizer.bypassSecurityTrustUrl(dataUrl),{headers:headers}).subscribe(response => {
      this.persons = response.data.map(x=>({...x,check:false,test:x.firstName}));
      this.dtTrigger.next();
    });

Stackblitz

Answer 1

您可以通过以下方式在使用 API 的同时使用 DOMSANITIZER。

导入这些：

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

在您使用此代码的项目中使用以下代码：

const dataUrl = this.domSanitizer.sanitize(
      SecurityContext.RESOURCE_URL,
      this.domSanitizer.bypassSecurityTrustResourceUrl(
        'https://raw.githubusercontent.com/l-lin/angular-datatables/master/demo/src/data/data.json'
      )
    );

    this.http.get(dataUrl).subscribe((response) => {
      this.persons = response.data.map((x) => ({
        ...x,
        check: false,
        test: x.firstName,
      }));
      this.dtTrigger.next();
    });

重要提示：

此代码适用于您的 stackblitz url。

我也保存了，你可以去看看。 https://stackblitz.com/edit/column-names-as-tooltip-wcw1f7?file=app%2Fapp.component.ts

如何在调用 API 时使用 DOMSANITIZER(bypassSecurityTrustUrl)

How to use DOMSANITIZER(bypassSecurityTrustUrl) while calling the API

angular

angular-datatables

angular-dom-sanitizer