Angular 2中ElementRef存在安全风险

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

- jcdsr

---

请查看此博客文章：http://angularjs.blogspot.com.tr/2016/04/5-rookie-mistakes-to-avoid-with-angular.html - ulubeyn

你的链接中推荐的解决方案仍然使用ElementRef，不确定是否安全。 - jcdsr

风险并不等同于缺陷。而且风险与Angular无关，也与ElementRef本身无关。你的代码并没有引入任何风险。 - a better oliver

Answer 1

使用ElementRef并不会直接使您的网站 less secure。 Angular 团队只是在说: "嘿，您可以使用它，但要小心"。

如果您只使用ElementRef来获取信息，例如在您的示例中获取某个宽度，那么根本没有安全风险。但如果您使用ElementRef来修改 DOM，潜在的威胁就可能出现了。例如：

@ViewChild('myIdentifier')
myIdentifier: ElementRef

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

问题在于这会直接插入到 DOM 中，跳过 Angular 的清理机制。什么是清理机制？通常情况下，如果通过 Angular 更改了 DOM 中的某些内容，Angular 会确保它不会造成任何危险。但是，当使用 ElementRef 将某些内容插入到 DOM 中时，Angular 无法保证这一点。因此，在使用 ElementRef 时，你需要负责确保没有恶意代码进入 DOM。一个重要的关键词在于 XSS（跨站脚本攻击）。

总之：如果您从 DOM 中获取信息，则是安全的。如果您使用 ElementRef 修改 DOM，请确保修改的内容不可能包含恶意代码。

- bersling

---

但是黑客不能在那里设置断点并使用元素引用做任何他们想做的事情吗？ - squirrelsareduck

如果我理解你的问题正确，那么黑客将会攻击自己的电脑。 - thank_you

@thank_you 这就是关键所在。这似乎不是一个有效的安全问题，因为用户随时都可以访问开发控制台，并且可以使用或不使用nativeElement进行这些更改。 - Jason Long

@Jason Long 风险主要在于由他人生成的内容。如果我在这篇帖子中写上<script>alert("Hello!")</script>，当你打开这个页面时不会发生任何事情，因为SO会对我的评论进行清理（可能是在前端和后端都进行）。但是，如果通过ElementRef插入内容，这种清理不会自动发生，这就会带来XSS的风险。 - undefined