我遇到了这个问题。
警告:正在清理不安全的样式值rotate(36.362868584929245deg)translate(91px,67px)(请参见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;
}
}
参考一下,如果我只返回带有translate或rotate的普通“transform”值,则它会接受该字符串,但将这些组合在一起标记为不安全。