안전값은 DomSanitizer를 사용하여 우회 보안 후 [binding]=binding을 사용해야 합니다.

안전값은 DomSanitizer를 사용하여 우회 보안 후 [binding]=binding을 사용해야 합니다.

<!--HTML CODE-->
<p #mass_timings></p>

//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);

}

그러나 mass_timings가 표시하는 출력에는 다음과 같은 텍스트가 포함됩니다.-

안전 값은 [safe]=binding을 사용해야 합니다.

처음에

이 문자열을 제거하는 방법.

오류 메시지에서 알 수 있듯이 속성 바인딩을 사용하여 검사된 HTML을 추가해야 합니다.

<p [innerHTML]="massTimingsHtml"></p>

constructor(private domSanitizer:DomSanitizer) {
  this.massTimingsHtml = this.getInnerHTMLValue();
}
getInnerHTMLValue(){
  return this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);
}

스택블리츠 예제(Swapnil Patwa의 Plunker를 기반으로 함 - 아래 주석 참조)

다음과 같이 안전 값을 소독해야 합니다.

this.domSanitizer.sanitize(SecurityContext.HTML,this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings));

iframe을 사용할 때 이 오류가 발생하여 수정했습니다.[src]아래와 같이

참고: 성능 향상을 위해 파이프를 사용

가져오기:

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

ints파일

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

html 파일에서

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

이 방법은 함수를 여러 번 호출하기 때문에 상당히 사이클 소모가 크므로 lifeCycleHooks와 같은 내부의 URL을 소독하는 것이 좋습니다.ngOnInit().

성능 향상을 위해 파이프를 사용할 수도 있습니다.

파이프 사용하기

HTML:

<iframe [src]="url | byPassSecurity"></iframe>

sanitize.pipe.

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);
    }
}

파이프를 이용한 나의 솔루션.

HTML

<div [innerHtml]="htmlValue | byPassSecurity"></div>

파이프

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);
    }
}

각도 7에서 MATHJAX를 사용하다가 같은 오류가 발생했습니다.아래 파이프 변환으로 해결했습니다.100% 완벽하게 작동

//HTML PIPE 위생화

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))
    }
}

에 구속할 필요가 없습니다.[innerHtml]온통.

를 사용하여 작동합니다.sanitize()그리고.bypassSecurityTrustHtml()이와 같이 함께:

this.mass_timings.nativeElement.innerHTML = (
    this.domSanitizer.sanitize(SecurityContext.HTML, this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings))
);

언급URL : https://stackoverflow.com/questions/45351434/safe-value-must-use-property-binding-after-bypass-security-with-domsanitizer