警告:消毒不安全样式值url

Question

我想在我的角2应用程序中的组件模板中设置DIV的背景图像。然而，我总是在我的控制台中得到以下警告，但没有达到预期的效果.我不确定动态CSS背景图像是否由于Angular2中的安全限制而被阻塞，或者我的HTML是否被破坏。

这是我在控制台中看到的警告(我已将img url更改为/img/path/is/correct.png )。

警告:清除不安全的样式值url(SafeValue必须使用property=binding: /img/path/is/rectit.png(参见http://g.co/ng/security#xss)) (参见http://g.co/ng/security#xss)。

问题是，我使用DomSanitizationService在Angular2中对注入到模板中的内容进行了消毒。下面是我在模板中的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通过的一切看起来都很好..。有人能看出我做错了什么吗？

Answer 1

必须将整个url语句包装在bypassSecurityTrustStyle中。

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

并有

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

否则，它将不被视为有效的样式属性。

Answer 2

使用这个<div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div>，这为我解决了问题。

Answer 3

带线性梯度的中频背景图像(*ngFor)

视图：

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