角度 - プレーンなtypescriptクラスの中でスタイルをサニタイズするにはどうしたらいいですか？

Question

この問題が発生しています。

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

さて、いくつかの研究内容の後、私はそうのような構成要素の中に注入されなければならないDomSanitizerを使用する必要が見つかりました

constructor(private sanitizer: DomSanitizer)

私が持っている問題は、私のクラスということですそれは墨塗りを必要とする単純なtypescriptクラスです、それはコンポーネントではありません。消毒剤をどのように注入すればよいですか？そうでなければ、この値を消毒する。

ここでは、関連するコードです：

テンプレート：

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

クラス：だけで私は、プレーンを返す場合

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

は、参考のため、 "変換" 値文字列を受け入れますが、それらを組み合わせると安全でないとマークされます。

Answer 1

私は、テンプレートの親コンポーネントで定義されている関数の中で安全でないスタイルをラップすることで、これを解決することができました。

テンプレート

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

テンプレートの親（コンポーネント）

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