ElementRef 安全风险角度 2

Question

为什么 ElementRef 使用起来不安全，如果是，我们可以用什么代替？

我一直在使用此 ElementRef 来查看或观看特定的 html 标记，然后在初始化后以特定宽度发送，但如果这会带来安全风险，我不会使用它，老实说我不会了解为什么 Angular 2 团队在他们的框架中允许这种安全漏洞。

什么是最安全和最好的技术？我的测试组件如下：

        import { Component, OnInit } from '@angular/core';

        @Component({
          selector: 'app-standard',
          template: ` <button type="button" #buttonW></button>`,

        })
        export class standardComponent implements OnInit {

          name: string = 'app-standard';
          viewWidthButton: any;

          @ViewChild( 'buttonW' ) elButtonW: ElementRef; 


          constructor() { 

            this.viewWidthButton = this.elButtonW.nativeElement.offsetWidth;
            console.log ('button width: ' + this.viewWidthButton);
          }

          ngOnInit() {
          }

        }

Angular 2 页面参考：

https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

Answer 1

使用ElementRef 不会直接降低您网站的安全性。 Angular 团队只是说“嘿，你可以用这个，小心点”。

如果您仅使用ElementRef 来获取信息，例如在您的示例中具有一定宽度，则根本不存在安全风险。当您使用 ElementRef 来修改 DOM 时，情况就不同了。在那里，可能会出现潜在的威胁。这样的例子可能是：

@ViewChild('myIdentifier')
myIdentifier: ElementRef

ngAfterViewInit() {
  this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;
}

这样做的问题是它直接插入到 DOM 中，跳过了 Angular 的清理机制。什么是消毒机制？通常，如果 DOM 中的某些内容通过 Angular 进行了更改，Angular 会确保它没有危险。但是，当使用 ElementRef 向 DOM 中插入内容时，Angular 无法保证这一点。因此，当使用ElementRef 时，没有任何不好的东西进入 DOM，这成为你的责任。这里的一个重要关键字是 XSS（跨站脚本）。

总结：如果您轮询 DOM 以获取信息，那么您是安全的。如果您使用ElementRef 修改 DOM，请确保修改不可能包含恶意代码。