ElementRef安全风险角度2

问题描述

为什么使用ElementRef并不安全，我们可以使用什么呢?

Why ElementRef is not secure to use if so, what we can use instead?

我一直在使用此ElementRef来查看或观看特定的html标签，然后在初始化后以特定的宽度发送，但是如果这样做会带来安全隐患，则我不会使用它，老实说我不会了解为什么有组织的2级团队会在其框架中允许此类安全漏洞.

I'm been using this ElementRef to see or watch a specific html tag and then to send as specific width after is initialize, but if this open a security risk I will not use it, and to be honest I don't understand why angular 2 teams allow this kind security flaws in their framework.

使用哪种安全和最佳技术是什么?我的测试组件如下:

What is the secure and best technique to use? My test component below:

        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页面参考:

Angular 2 page reference:

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

推荐答案

使用ElementRef并不会直接降低您网站的安全性. Angular团队只是说嘿，您可以使用它，请小心使用它." .

Using ElementRef doesn't directly make your site less secure. The Angular team is just saying "Hey, you may use this, just be careful with it".

如果仅使用ElementRef来获取信息(例如在您的示例中为特定宽度)，则完全没有安全风险.当您使用ElementRef来修改DOM 时，情况就完全不同了.在那里可能会出现潜在的威胁.这样的例子可能是:

If you are only using an ElementRef to get information, like in your example a certain width, there is no security risk involved at all. It's a different story when you use an ElementRef to modify the DOM. There, potential threats can arise. Such an example could be:

@ViewChild('myIdentifier')
myIdentifier: ElementRef

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

此问题是它被直接插入DOM中，从而跳过了Angular清除机制.什么是消毒机制?通常，如果通过Angular更改了DOM中的某些内容，Angular会确保它没有任何危险.但是，当使用ElementRef将某些内容插入DOM时，Angular不能保证这一点.因此，使用ElementRef时，没有任何不好的东西进入DOM成为了您的责任.这里一个重要的关键字是XSS(跨站点脚本).

The problem with this is that it gets inserted directly into the DOM, skipping the Angular sanitisation mechanisms. What are sanitisation mechanisms? Usually, if something in the DOM is changed via Angular, Angular makes sure it's nothing dangerous. However, when using ElementRef to insert something into the DOM, Angular can't guarantee this. So it becomes your responsibility that nothing bad enters the DOM when using ElementRef. An important keyword here is XSS (Cross-Site Scripting).

总结:如果轮询DOM以获得信息，那是安全的.如果使用ElementRef修改DOM，请确保所做的修改不包含恶意代码.

To summarise: If you poll the DOM for information, you are safe. If you modify the DOM using ElementRef, make sure the modifications don't possibly contain malicious code.

这篇关于ElementRef安全风险角度2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！