ElementRef安全风险角度2

Question

为什么ElementRef不安全,如果是这样,我们可以使用什么呢？

我一直在使用这个ElementRef来查看或观看特定的html标签,然后在初始化之后作为特定宽度发送,但是如果这打开了安全风险我将不会使用它,并且说实话我不明白为什么角度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无法保证这一点.因此,在使用时,没有什么不好的东西进入DOM 是你的责任ElementRef.这里一个重要的关键字是XSS(跨站点脚本).

总结一下:如果您在DOM中查询信息,那么您就是安全的.如果使用修改DOM ElementRef,请确保修改不可能包含恶意代码.