¿Por qué ElementRef no es seguro de usar? Si es así, ¿qué podemos usar en su lugar?
He estado usando este ElementRef para ver o mirar una etiqueta html específica y luego enviarla como un ancho específico después de inicializar, pero si esto abre un riesgo de seguridad, no lo usaré y, para ser honesto, no entiendo por qué angular 2 equipos permiten este tipo de fallas de seguridad en su marco.
¿Cuál es la mejor y más segura técnica para usar? Mi componente de prueba a continuación:
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() { } }Referencia de página de Angular 2:
https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html
El uso ElementRef no hace que su sitio sea directamente menos seguro. El equipo de Angular solo dice "Oye, puedes usar esto, solo ten cuidado con eso" .
Si solo está utilizando un ElementRef para obtener información, como en su ejemplo, un cierto ancho, no hay ningún riesgo de seguridad involucrado. Es una historia diferente cuando usas un ElementRef para modificar el DOM . Allí, pueden surgir amenazas potenciales. Tal ejemplo podría ser:
@ViewChild('myIdentifier') myIdentifier: ElementRef ngAfterViewInit() { this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser; } El problema con esto es que se inserta directamente en el DOM, omitiendo los mecanismos de sanitización de Angular. ¿Qué son los mecanismos de sanitización? Por lo general, si algo en el DOM se cambia a través de Angular, Angular se asegura de que no sea nada peligroso. Sin embargo, cuando se usa ElementRef para insertar algo en el DOM, Angular no puede garantizarlo. Por lo tanto, es su responsabilidad que nada malo ingrese al DOM cuando use ElementRef . Una palabra clave importante aquí es XSS (Cross-Site Scripting).
Para resumir: si sondeas el DOM para obtener información, estás a salvo. Si modifica el DOM usando ElementRef , asegúrese de que las modificaciones no contengan código malicioso.