typescript - metatags - ADVERTENCIA: desinfección de URL de valor de estilo inseguro

meta tags angular 4

Question

Quiero establecer la imagen de fondo de un DIV en una plantilla de componente en mi aplicación Angular 2. Sin embargo, sigo recibiendo la siguiente advertencia en mi consola y no obtengo el efecto deseado ... No estoy seguro de si la imagen de fondo de CSS dinámico se está bloqueando debido a restricciones de seguridad en Angular2 o si mi plantilla HTML está rota.

Esta es la advertencia que veo en mi consola (he cambiado mi url img a /img/path/is/correct.png :

ADVERTENCIA: desinfección de URL de valor de estilo inseguro (SafeValue debe usar [propiedad] = enlace: /img/path/is/correct.png (consulte http://g.co/ng/security#xss )) (consulte http://g.co/ng/security#xss ).

La cuestión es que desinfecta lo que se inyecta en mi plantilla usando DomSanitizationService en Angular2. Aquí está mi HTML que tengo en mi plantilla:

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

Aquí está el componente ...

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

Tenga en cuenta que cuando me limito a la plantilla usando [src] = "image", por ejemplo:

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

y la image se pasó usando bypassSecurityTrustUrl todo parecía funcionar bien ... ¿Alguien puede ver lo que estoy haciendo mal?

Answer 1

Compruebe this práctica tubería para Angular2: Uso:

1. en el código SafePipe , sustituya DomSanitizationService con DomSanitizer

2. proporcione SafePipe si su NgModule

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

Answer 2

Existe un problema abierto para imprimir solo esta advertencia si realmente hubo algo desinfectado: https://github.com/angular/angular/pull/10272

No leí en detalle cuando se imprimió esta advertencia cuando no se desinfectó nada.

Answer 3

Para cualquiera que ya esté haciendo lo que la advertencia sugiere que haga, antes de la actualización a Angular 5, tuve que asignar mis tipos SafeStyle a una string antes de usarlos en las plantillas. Después de Angular 5, este ya no es el caso. Tuve que cambiar mis modelos para tener una image: SafeStyle lugar de image: string . Ya estaba usando el [style.background-image] propiedad [style.background-image] y eludiendo la seguridad en toda la url.

Espero que esto ayude a alguien.

Answer 4

Según los documentos en https://angular.io/api/platform-browser/DomSanitizer , la forma correcta de hacerlo parece ser usar sanitize. Al menos en Angular 7 (no sé si esto cambió desde antes). Esto funcionó para mí:

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, consulte https://angular.io/api/core/SecurityContext . Básicamente es solo esta enumeración:

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

Answer 5

Si la imagen de fondo con gradiente lineal ( *ngFor )

Ver:

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

Clase:

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 6

Tuve el mismo problema al agregar la URL dinámica en la etiqueta de imagen en Angular 7. Busqué mucho y encontré esta solución.

Primero, escriba el siguiente código en el archivo componente.

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

Ahora en su etiqueta de imagen html, puede escribir así.

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

Puede escribir según sus requisitos en lugar de item.imageUrl

Obtuve una referencia de este sitio. URL dinámicas . Espero que esta solución te ayude :)

Answer 7

Utilice este <div [ngStyle]="{''background-image'':''url(''+imageUrl+'')''}"></div> esto resolvió el problema para mí.

Answer 8

bypassSecurityTrustStyle ajustar toda la declaración de url en bypassSecurityTrustStyle :

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

Y tiene

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

De lo contrario, no se considera una propiedad de estilo válida.