OSTRZEŻENIE: odkażanie niebezpiecznego adresu URL w stylu stylu

Question

Chcę ustawić obraz tła elementu DIV w szablonie składnika w mojej aplikacji Angular 2. Jednak wciąż otrzymuję następujące ostrzeżenie w konsoli i nie uzyskujemy pożądanego efektu ... Nie jestem pewien, czy dynamiczny obraz tła CSS jest blokowany z powodu ograniczeń bezpieczeństwa w Angular2, czy też mój szablon HTML jest zepsuty.

To jest ostrzeżenie widzę w mojej konsoli (ja zmieniłem img URL do /img/path/is/correct.png:

UWAGA: odkażania wartość styl niebezpieczne url (SafeValue musi używać [Obiekt] = Oprawa:/img/ścieżki /is/correct.png (patrz http://g.co/ng/security#xss)) (patrz http://g.co/ng/security#xss).

Chodzi o to zrobić zdezynfekować co jest wstrzykiwane do mojego szablonu z wykorzystaniem DomSanitizationService w Angular2. Tu jest mój HTML, który mam w szablonie :

<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> 

Oto składnik ...

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

      } 
     } 
    } 
} 

Należy pamiętać, że kiedy tylko związany z wykorzystaniem szablonu [źródło] = "obraz", na przykład:

<div *ngIf="image"> 
    <img [src]="image"> 
</div> 

i image został przekazany za pomocą bypassSecurityTrustUrl wszystko wydawało się działać dobrze ... Czy ktoś może zobaczyć, co robię źle?

Answer 1

Jest kwestią otwartą, aby drukować tylko to ostrzeżenie, jeśli nie było faktycznie coś odkażane: https://github.com/angular/angular/pull/10272

Nie czytałem szczegółowo kiedy to ostrzeżenie jest drukowany, gdy nic nie zostało oczyszczone.

Answer 2

Trzeba owinąć całą url oświadczenie w bypassSecurityTrustStyle:

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

I mieć

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

przeciwnym razie nie jest postrzegane jako ważny kwatera

Answer 3

Jeśli obraz tła z liniowy gradient (*ngFor)

Widok:

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

Klasa:

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 4

Dla każdego, kto co robi ostrzeżenie sugeruje to zrobić, przed uaktualnieniem do kątowa 5 już miałem do mapowania mój SafeStyle typy do string przed użyciem ich w szablonach. Po Angular 5 już tak nie jest. Musiałem zmienić modele, aby mieć image: SafeStyle zamiast image: string. Używałem już wiązania własności [style.background-image] i pomijania zabezpieczeń całego adresu URL.

Mam nadzieję, że to komuś pomaga.