ПРЕДУПРЕЖДЕНИЕ: очистка небезопасного значения значения стиля

Я хочу установить фоновое изображение DIV в шаблоне компонентов в приложении Angular 2. Однако я продолжаю получать следующее предупреждение в своей консоли, и я не получаю желаемого эффекта... Я не уверен, что фоновое изображение динамического CSS блокируется из-за ограничений безопасности в Angular2 или если мой HTML-шаблон поврежден.

Это предупреждение, которое я вижу в моей консоли (я изменил свой URL-адрес 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).

Дело в том, что я дезинфицирую то, что вводится в мой шаблон, используя 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 все, казалось, работало хорошо... может ли кто-нибудь увидеть, что я делаю неправильно?

Ответы

Ответ 1

Вы должны обернуть весь оператор url в bypassSecurityTrustStyle:

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

И

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

В противном случае он не рассматривается как допустимое свойство стиля

Ответ 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})`);
}

Ответ 3

Используйте это <div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div> это решило проблему для меня.

Ответ 4

Проверьте эту удобную трубу для Angular2: Использование:

  1. в SafePipe коде, заменить DomSanitizationService с DomSanitizer

  2. предоставить SafePipe если ваш NgModule

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

Ответ 5

Существует открытая проблема только для печати этого предупреждения, если на самом деле было что-то дезинфицированное: https://github.com/angular/angular/pull/10272

Я не читал подробно, когда это предупреждение печатается, когда ничего не было очищено.

Ответ 6

У меня возникла та же проблема при добавлении динамического URL в тег Image в Angular 7. Я много искал и нашел это решение.

Сначала напишите код ниже в файле компонента.

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

Теперь в вашем HTML-теге изображения вы можете написать так.

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

Вы можете написать согласно вашему требованию вместо item.imageUrl

Я получил ссылку с этого сайта. динамические URL. Надеюсь, что это решение поможет вам :)

Ответ 7

Для тех, кто уже делает то, что предлагает предупреждение, перед обновлением до Angular 5 мне пришлось SafeStyle типы SafeStyle со string прежде чем использовать их в шаблонах. После Angular 5 это уже не так. Мне пришлось изменить мои модели, чтобы иметь image: SafeStyle вместо image: string. Я уже использовал [style.background-image] и [style.background-image] защиту по всему URL.

Надеюсь, это кому-нибудь поможет.

Ответ 8

Основываясь на документах по адресу https://angular.io/api/platform-browser/DomSanitizer, кажется, что правильным способом сделать это является использование sanitize. По крайней мере, в 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 + ')');

Re SecurityContext, см. Https://angular.io/api/core/SecurityContext. В основном это просто перечисление:

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