ElementRef and @ViewChild, is not recommended?

Question

I new in Angular and I try to understand:

The directive @ViewChild have any use without Elementref?

Elementref access to DOM direcly? or to Virtual DOM?

Why angular team say: "Permitting direct access to the DOM can make your application more vulnerable to XSS attacks." That mean Vanila JS is danger due the claim: JavaScript access DOM?

Answer 1

ViewChild is a property decorator that helps you to inject a reference to a component, or to a DOM reference.
In your case, you're concern about the latter. ElementRef wraps a reference to the DOM element.

Angular provides tools for DOM manipulation - such as Renderer - with built-in sanitization mechanisms, if you use ElementRef to modify the DOM, you need to handle your own sanitization mechanism (because you bypass Angular DOM sanitization) in order to avoid XSS Attacks. If you don't modify the DOM, you're safe by design.

Answer 2

I disagree with using the DOM directly risks XSS attacks.

Afterall, Angular runtime is doing so! Also, whatever is given to the browser from the server the client solely owns. Nothing can intercede between server and the browser.

1. Someone would have to be at the clients house and type in a malicious parameter in the client's url. That param would then have to be inserted in a input box.
2. Someone would actually have to modify the source code on the server side to call untrusted code.

At that point(point #2), you have much bigger issues with server integrity. Point is, modifying the dom directly is what every website does(DOM parses html) and Angular runtime does it extensively since it builds every element rather than the DOM parsing the html sheets.

I know many will flame me for this.