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.