[typescript] 경고 : 안전하지 않은 스타일 값 URL 삭제

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모든 것이 잘 작동하는 것 같았다 … 깡통 사람이 내가 잘못을하고있는 중이 야 무엇을보고?

답변

<div class="header" *ngIf="image" [style.background-image]="image"></div>

this.image = this.sanitization.bypassSecurityTrustStyle(`url(${element.image})`);

<div [style.background-image]="getBackground(trendingEntity.img)" class="trending-content">
</div>

import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

constructor(private _sanitizer: DomSanitizer) {}

getBackground(image) {
    return this._sanitizer.bypassSecurityTrustStyle(`linear-gradient(rgba(29, 29, 29, 0), rgba(16, 16, 23, 0.5)), url(${image})`);
}

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

constructor(
    private sanitizer: DomSanitizer
) { }

this.sanitizer.sanitize(SecurityContext.STYLE, 'url(' + this.image + ')');

enum SecurityContext {
  NONE: 0
  HTML: 1
  STYLE: 2
  SCRIPT: 3
  URL: 4
  RESOURCE_URL: 5
}

constructor(private sanitizer: DomSanitizer) {}
public getSantizeUrl(url : string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

<img class="image-holder" [src]=getSantizeUrl(item.imageUrl) />