ВНИМАНИЕ: очистка URL значения небезопасного стиля

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

Это предупреждение, которое я вижу на своей консоли (я изменил свой URL-адрес img на /img/path/is/correct.png:

ПРЕДУПРЕЖДЕНИЕ: дезинфицирующий небезопасным значение типа URL (SafeValue должны использовать [свойство] = связывание: /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все, казалось, работает хорошо ... может ли кто-нибудь увидеть, что я делаю не так?

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

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

И имеют

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

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

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

Если фоновое изображение с linear-gradient ( *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})`);
}

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

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

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

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

Судя по документации на 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 + ')');

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

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

У меня возникла та же проблема при добавлении динамического URL-адреса в тег изображения в 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-адреса . Надеюсь, это решение вам поможет :)

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

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

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

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

Поскольку Angular не является специальной библиотекой для очистки, она слишком ревностно относится к подозрительному контенту, чтобы не рисковать. Вы можете делегировать дезинфекцию в специальную библиотеку, например, DOMPurify. Вот библиотека-оболочка, которую я сделал, чтобы легко использовать DOMPurify с Angular.

https://github.com/TinkoffCreditSystems/ng-dompurify

У него есть канал для декларативной дезинфекции HTML:

<div [innerHtml]="value | dompurify"></div>

Следует иметь в виду, что DOMPurify отлично подходит для очистки HTML / SVG, но не CSS. Таким образом, вы можете предоставить дезинфицирующее средство CSS Angular для обработки CSS:

import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    // ...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
        },
    ],
    // ...
})
export class AppModule {}

Это внутренний ɵпрефикс hense , но в любом случае команда Angular использует его в своих пакетах именно так.

В моем случае я получил URL-адрес изображения, прежде чем перейти к компоненту отображения, и хочу использовать его в качестве фонового изображения, поэтому, чтобы использовать этот URL-адрес, я должен сообщить Angular, что он безопасен и может быть использован.

В файле .ts

userImage: SafeStyle;
ngOnInit(){
    this.userImage = this.sanitizer.bypassSecurityTrustStyle('url(' + sessionStorage.getItem("IMAGE") + ')');
}

В файле .html

<div mat-card-avatar class="nav-header-image" [style.background-image]="userImage"></div>