Chcę ustawić obraz tła DIV w szablonie komponentów w mojej aplikacji Angular 2. Jednak wciąż otrzymuję następujące ostrzeżenie w mojej konsoli i nie osiągam 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 uszkodzony.
To jest ostrzeżenie, które widzę na mojej konsoli (zmieniłem mój adres URL img na /img/path/is/correct.png
:
OSTRZEŻENIE: dezynfekcja adresu URL wartości niebezpiecznego stylu (SafeValue musi używać [property] = binding: /img/path/is/correct.png (patrz http://g.co/ng/security#xss )) (patrz http: // g.co/ng/security#xss ).
Chodzi o to, że dezynfekuję to, co jest wstrzykiwane do mojego szablonu za pomocą programu DomSanitizationService
w Angular2. Oto mój kod 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 element ...
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;
}
}
}
}
}
Zwróć uwagę, że kiedy po prostu związałem się z szablonem za pomocą [src] = "obraz", na przykład:
<div *ngIf="image">
<img [src]="image">
</div>
i image
został zaliczony, gdy bypassSecurityTrustUrl
wszystko wydawało się działać dobrze ... czy ktoś może zobaczyć, co robię źle?
źródło
Odpowiedzi:
Musisz zawrzeć całe
url
zestawienie wbypassSecurityTrustStyle
:I mają
W przeciwnym razie nie jest postrzegana jako prawidłowa właściwość stylu
źródło
Użyj tego, aby
<div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div>
rozwiązać problem za mnie.źródło
Jeśli obraz tła z liniowym gradientem (
*ngFor
)Widok:
Klasa:
źródło
thumbnailMediumIcon = this.sanitizer.bypassSecurityTrustUrl(
url ($ {thumbnail}))
i[style.backgroundImage]="thumbnailMediumIcon"
. Z jakiej wersji Angular korzystałeś? Spróbowałem także obrazu tła. Czy to nadal działa? Nie podoba mi się inne podejście?thumbnail
) zamiast adresu URLgetBackground
wewnątrz widoku, ponieważ Angular musi wywoływać zabypassSecurityTrustStyle
każdym razem, gdy ten widok jest odświeżany. Aby przetestować, dodaj console.log do środkagetBackground
i zobaczysz, że funkcja jest wywoływana przy każdym zdarzeniu kliknięcia lub przewijania użytkownikaSprawdź tę poręczną rurkę dla Angular2: Zastosowanie:
w
SafePipe
kodzie, zastąpićDomSanitizationService
zDomSanitizer
podaj,
SafePipe
jeśli twójNgModule
<div [style.background-image]="'url(' + your_property + ')' | safe: 'style'"></div>
źródło
Opierając się na dokumentach na https://angular.io/api/platform-browser/DomSanitizer , właściwym sposobem na to wydaje się być użycie sanitize. Przynajmniej w Angular 7 (nie wiem, czy to się zmieniło od wcześniej). To zadziałało dla mnie:
Ponownie SecurityContext, zobacz https://angular.io/api/core/SecurityContext . Zasadniczo to tylko to wyliczenie:
źródło
this.sanitizer.bypassSecurityTrustStyle(`url('${this.image} ')`);
bypassSecurityTrustStyle
ignoruje bezpieczeństwo, asanitize(SecurityContext.STYLE, style)
wzmacnia bezpieczeństwo. Polecam używaniesanitize
z odpowiednimSecurityContext
.bypassSecurityTrustStyle
zwraca obiekt, do którego nie można uzyskać dostępu (przynajmniej nie mogłem tego zrobić) w[ngStyle]
.sanitize(SecurityContext.STYLE, style)
zamiast tego zwraca zwykły ciąg.bypassSecurityTrustStyle
jest po prostu brutalnym wymuszaniem tego.Ten sam problem napotkałem podczas dodawania dynamicznego adresu URL w tagu obrazu w Angular 7. Dużo szukałem i znalazłem to rozwiązanie.
Najpierw napisz poniższy kod w pliku komponentu.
Teraz w swoim tagu graficznym HTML możesz pisać w ten sposób.
Możesz pisać zgodnie z wymaganiami zamiast item.imageUrl
Mam odniesienie z tej strony. dynamiczne adresy URL . Mam nadzieję, że to rozwiązanie Ci pomoże :)
źródło
Istnieje otwarty problem, aby wydrukować to ostrzeżenie tylko wtedy, gdy rzeczywiście coś zostało odkażone: https://github.com/angular/angular/pull/10272
Nie czytałem szczegółowo, kiedy to ostrzeżenie jest drukowane, gdy nic nie zostało odkażone.
źródło
Dla każdego, kto już robi to, co sugeruje ostrzeżenie, przed aktualizacją do Angular 5 musiałem zmapować moje
SafeStyle
typystring
przed użyciem ich w szablonach. Po Angular 5 już tak nie jest. Musiałem zmienić moje modele, aby miećimage: SafeStyle
zamiastimage: string
. Używałem już[style.background-image]
powiązania właściwości i pomijania zabezpieczeń na całym adresie URL.Mam nadzieję, że to komuś pomoże.
źródło
Ponieważ Angular nie jest wyspecjalizowaną biblioteką do odkażania, jest nadgorliwym wobec podejrzanych treści, aby nie podejmować żadnego ryzyka. Możesz delegować czyszczenie do dedykowanej biblioteki, na przykład - DOMPurify. Oto biblioteka opakowań, którą stworzyłem, aby łatwo używać DOMPurify z Angular.
https://github.com/TinkoffCreditSystems/ng-dompurify
Ma potok do deklaratywnego oczyszczenia HTML:
Należy pamiętać, że DOMPurify doskonale nadaje się do czyszczenia HTML / SVG, ale nie CSS. Możesz więc udostępnić narzędzie do odkażania CSS Angulara do obsługi CSS:
Jest to
ɵ
prefiks wewnętrzny - hense , ale tak i tak zespół Angular używa go również we własnych pakietach.źródło
W moim przypadku otrzymałem adres URL obrazu przed przejściem do komponentu wyświetlania i chcę go użyć jako obrazu tła, więc aby użyć tego adresu URL, muszę powiedzieć Angularowi, że jest bezpieczny i można go użyć.
W pliku .ts
W pliku .html
źródło