Angular - Comment est-ce que je désinfecte un style à l'intérieur d'une classe de caractères dactylographiés?

Question

Je suis confronté à ce problème.

WARNING: sanitizing unsafe style value rotate(36.362868584929245deg)translate(91px,67px) (see http://g.co/ng/security#xss).

Maintenant, après quelques Reseach, je trouve que je dois utiliser le DomSanitizer qui doit être injecté dans le composant comme ceci:

constructor(private sanitizer: DomSanitizer)

Le problème était que ma classe qui a besoin de la désinfection est une classe de type simple, ce n'est pas un composant. Comment injecter le désinfectant? Ou sinon, désinfectez cette valeur.

Voici les codes pertinents:

Modèle:

<div class="transition" *ngFor="let transition of state.transitions" 
    [style.transform]="transition.transformPosition" 
    [style.width.px]="transition.width"></div> 

Classe:

export class Transition { 
    origin: State; 
    destination: State; 
    conditions: AlphabetSymbol[]; 

    constructor(origin: State, destination: State) { 
    this.origin = origin; 
    this.destination = destination; 
    } 

    get transformPosition() { 
    let x = (this.origin.layoutPosition.x + this.destination.layoutPosition.x)/2, 
     y = (this.origin.layoutPosition.y + this.destination.layoutPosition.y)/2, 
     angle = Math.atan( (this.destination.layoutPosition.y - this.origin.layoutPosition.y) 
         /(this.destination.layoutPosition.x - this.origin.layoutPosition.x)), 
     finalString; 

    x -= this.origin.layoutPosition.x; 
    y -= this.origin.layoutPosition.y; 
    angle *= 180/Math.PI; // Convert to degrees 
    finalString = "rotate(" + angle + "deg)translate(" + x + "px," + y + "px)";   

    return finalString;        
    } 

    get width() { 
    return this.origin.layoutPosition.distanceTo(this.destination.layoutPosition) - 60; 
    } 
} 

Pour référence, si je retourne la valeur simple "Transform" avec juste traduire ou juste une rotation, il accepte la chaîne, mais la combinaison de ceux-ci est marquée comme dangereuse.

Answer 1

J'ai réussi à résoudre ce problème en enveloppant le style non sécurisé à l'intérieur d'une fonction définie dans le composant parent du modèle.

Modèle

<div class="transition" *ngFor="let transition of state.transitions" 
    [style.transform]="sanitizeStyle(transition.transformPosition)" 
    [style.width.px]="transition.width"></div> 

Parent de modèle (Component)

constructor(private sanitizer: DomSanitizer) 
... 
sanitizeStyle(unsafeStyle: string): SafeStyle { 
    return this.sanitizer.bypassSecurityTrustStyle(unsafeStyle); 
}