Angular 2 앱의 구성 요소 템플릿에서 DIV의 배경 이미지를 설정하고 싶습니다. 그러나 콘솔에 다음 경고가 계속 표시되고 원하는 효과를 얻지 못합니다 ... Angular2의 보안 제한으로 인해 동적 CSS 배경 이미지가 차단되는지 또는 HTML 템플릿이 손상되었는지 확실하지 않습니다.
이것은 내 콘솔에 표시되는 경고입니다 (img URL을 /img/path/is/correct.png다음과 같이 변경했습니다 .
경고 : 안전하지 않은 스타일 값 url 삭제 (SafeValue는 [property] = binding : /img/path/is/correct.png를 사용해야합니다 ( http://g.co/ng/security#xss 참조 )) ( http : // 참조 ) . g.co/ng/security#xss ).
문제는 DomSanitizationServiceAngular2를 사용하여 템플릿에 주입 된 내용을 삭제하는 것입니다 . 내 템플릿에있는 HTML은 다음과 같습니다.
<div>
<div>
<div class="header"
*ngIf="image"
[style.background-image]="'url(' + image + ')'">
</div>
<div class="zone">
<div>
<div>
<h1 [innerHTML]="header"></h1>
</div>
<div class="zone__content">
<p
*ngFor="let contentSegment of content"
[innerHTML]="contentSegment"></p>
</div>
</div>
</div>
</div>
</div>다음은 구성 요소입니다 ...
Import {
DomSanitizationService,
SafeHtml,
SafeUrl,
SafeStyle
} from '@angular/platform-browser';
@Component({
selector: 'example',
templateUrl: 'src/content/example.component.html'
})
export class CardComponent implements OnChanges {
public header:SafeHtml;
public content:SafeHtml[];
public image:SafeStyle;
public isActive:boolean;
public isExtended:boolean;
constructor(private sanitization:DomSanitizationService) {
}
ngOnChanges():void {
map(this.element, this);
function map(element:Card, instance:CardComponent):void {
if (element) {
instance.header = instance.sanitization.bypassSecurityTrustHtml(element.header);
instance.content = _.map(instance.element.content, (input:string):SafeHtml => {
return instance.sanitization.bypassSecurityTrustHtml(input);
});
if (element.image) {
/* Here is the problem... I have also used bypassSecurityTrustUrl */
instance.image = instance.sanitization.bypassSecurityTrustStyle(element.image);
} else {
instance.image = null;
}
}
}
}
}예를 들어 [src] = "image"를 사용하여 템플릿에 바인딩 한 경우 다음과 같이하십시오.
<div *ngIf="image">
<img [src]="image">
</div>및 image사용하여 전달 된 bypassSecurityTrustUrl모든 것이 잘 작동하는 것 같았다 ... 깡통 사람이 내가 잘못을하고있는 중이 야 무엇을보고?
질문에 대한 해결책을 얻었습니까? 나는 똑같은 문제가 있으며 여전히 해결책을 찾으려고 노력하고 있습니다. 미리 감사드립니다!
—
SK.