Bezpieczna wartość powinna używać [właściwość] = bind po obejściu zabezpieczeń przez DomSanitizer


<pre class="lang-ts prettyprint-override">
<!--HTML CODE-->
<p #mass_timings>

<pre class="lang-ts prettyprint-override">
//Controller code@ViewChild('mass_timings') mass_timings: ElementRef;
constructor(private domSanitizer:DomSanitizer)
getInnerHTMLValue(){
this.mass_timings.nativeElement.innerHTML =
this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);}

ale dane wyjściowe wyświetlane wartości_masowe zawierają tekst: -

Bezpieczna wartość powinna używać [właściwość] = powiązanie

na początku
Jak usunąć tę linię.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jak mówi komunikat o błędzie, usunięty kod HTML należy dodać za pomocą powiązania właściwości:
<pre class="lang-ts prettyprint-override">
<p [innerHTML]="massTimingsHtml">

<pre class="lang-ts prettyprint-override">
constructor(private domSanitizer:DomSanitizer) {
this.massTimingsHtml = this.getInnerHTMLValue();
}
getInnerHTMLValue(){
return this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);
}

Przykład StackBlitz
https://stackblitz.com/edit/angular-bmxbmy

(na podstawie Plunker Swapnil Patshcha - patrz komentarze poniżej)
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Potrzebujesz sanitize () safevalue w ten sposób:
this.domSanitizer.sanitize(SecurityContext.HTML,this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings));
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Otrzymałem ten błąd podczas używania iframe, więc naprawiłem go za pomocą
[src]
, jak pokazano poniżej:

Zaimportuj to

:
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer, ....other DI){}


W pliku ts

getSafeUrl() {
return this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}


W pliku

html
<iframe [src]="getSafeUrl()" frameborder="0" *ngIf="url"></iframe>

Ta metoda jest dość czasochłonna, ponieważ będzie wywoływać funkcję wiele razy, więc lepiej jest wyczyścić adres URL wewnątrz lifeCycleHooks, takich jak
ngOnInit ()
.
Możesz również użyć potoków, aby poprawić wydajność:
<div [innerHtml]="htmlValue | byPassSecurity">
import { Pipe, PipeTransform, SecurityContext } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';@Pipe({
name: 'byPassSecurity'
})
export class ByPassSecurityPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) {} transform (value: string): SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml(value);
}
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Otrzymałem ten sam błąd podczas używania MATHJAX w kątowej 7. Rozwiązałem problem z poniższą transformacją potoku. 100% działa dobrze
// Oczyść potok HTML
import { Pipe, PipeTransform, SecurityContext } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';@Pipe({
name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform { constructor(private _sanitizer: DomSanitizer) {
} transform(value: string): SafeHtml {
return this._sanitizer.sanitize(SecurityContext.HTML, this._sanitizer.bypassSecurityTrustHtml(value))
}
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Moje rozwiązanie za pomocą rury.

HTML

<div [innerHtml]="htmlValue | byPassSecurity">
Trąbka

import { Pipe, PipeTransform, SecurityContext } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';@Pipe({
name: 'byPassSecurity'
})
export class ByPassSecurityPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) {} transform (value: string): SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml(value);
}
}

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się