angular - ElementRef 安全风险 Angular 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 清理机制。什么是 sanitizer 机制？通常，如果通过 Angular 更改了 DOM 中的某些内容，Angular 会确保它没有危险。但是，当使用 ElementRef 向 DOM 中插入内容时，Angular 无法保证这一点。因此，您有责任在使用 ElementRef 时确保没有不良内容进入 DOM。这里的一个重要关键字是 XSS(跨站点脚本)。

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