警告:清理不安全的样式值url

Question

我想在我的Angular 2应用程序中的组件模板中设置DIV的背景图像.但是我在我的控制台中不断收到以下警告,但是我没有达到预期的效果......我不确定动态CSS背景图像是否因为Angular2中的安全限制或者我的HTML模板被破坏而被阻止.

这是我在控制台中看到的警告(我已将我的img网址更改为/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一切似乎运作良好...谁能看到我做错了什么？

Answer 1

你必须将整个url语句包装在bypassSecurityTrustStyle:

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

并且有

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

否则,它不被视为有效的样式属性

Answer 2

如果背景图像具有线性渐变(*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})`);
}

Answer 3

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

Answer 4

根据https://angular.io/api/platform-b​​rowser/DomSanitizer上的文档，正确的方法似乎是使用消毒。至少在 Angular 7 中（不知道这是否与以前不同）。这对我有用：

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 + ')');

关于 SecurityContext，请参见https://angular.io/api/core/SecurityContext。基本上它只是这个枚举：

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

Answer 5

检查这个方便的管道Angular2:用法:

1. 在SafePipe代码中,替换DomSanitizationService为DomSanitizer

2. 提供SafePipe你的NgModule

3. <div [style.background-image]="'url(' + your_property + ')' | safe: 'style'"></div>

Answer 6

在Angular 7的Image标签中添加动态url时遇到了相同的问题。我进行了很多搜索并找到了此解决方案。

首先，在组件文件中编写以下代码。

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

现在在您的html图像标签中，您可以这样编写。

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

您可以根据需要编写内容，而不是item.imageUrl

我从该站点获得了参考。动态网址。希望此解决方案可以为您提供帮助：)

Answer 7

有一个未解决的问题，仅在确实有某些内容已清理的情况下才打印此警告： https://github.com/angular/angular/pull/10272

当没有清理任何内容时打印此警告时，我没有详细阅读。