如何在调用 API 时使用 DOMSANITIZER(bypassSecurityTrustUrl)
How to use DOMSANITIZER(bypassSecurityTrustUrl) while calling the API
在调用 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();
});
您可以通过以下方式在使用 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 获取数据时获取 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();
});
您可以通过以下方式在使用 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