Angular - 如何防止来自事件的 RxJs 中的 XSS 攻击？

Question

I often use fromEvent method from RxJS. To be honest, I was expecting some magic from Angular, but apparently there is no. How can I prevent XSS attacks while using fromEvent ?

Code example:

<input #myInput />

fromEvent(this.muInput.nativeElement, 'input').pipe(
  tap(inputEvent => this.saveToDatabase(inputEvent.data)
)

Answer 1

To your question, use fromEvent you get the same output as valueChanges in reactive form, in terms of security measure, it is pretty much the same.

<input formcontrol="myInput"/>
myInput.valueChanges.subscribe(console.log) 

vs

<input #myInput />
fromEvent(this.muInput.nativeElement, 'input').subscribe(console.log)

Angular will sanitize the output if you wrap them in expressions curly brace in your view

{{ .. }} 

but it won't sanitize form input, so this is still a valid form input and sanitization still needs to be in place in the server side.

<script>alert('kdfkf')</script>

I won't recommend use fromEvent to handle changes as in most cases you only bind once to a certain element (supposingly in ngOnInit), if that element removed from DOM by *ngIf , your event is gone unless you have code to handle rebinding.

this answer might also help Need to insert Script tag in angular 2

as well as this https://angular.io/guide/security