Angular

Question

我运行遇到了这个问题。

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

现在，经过一些研究，我发现我必须使用 DomSanitizer，它应该像这样注入到组件中：

constructor(private sanitizer: DomSanitizer)

我遇到的问题是我的 class 需要清理的是一个简单的打字稿 class，它不是一个组件。如何注射消毒剂？或者以其他方式清理此值。

相关代码如下：

模板：

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

Class:

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

作为参考，如果我 return 纯 "transform" 值只有一个平移或一个旋转，它接受字符串，但将它们组合起来被标记为不安全。

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

Angular - 如何清理普通打字稿中的样式 class？

Angular - How do I sanitize a style inside a plain typescript class?

styles

sanitize