nz-select组件multiple模式安全问题

facelesswu commented 3 years ago

Reproduction link

https://stackblitz.com/edit/angular-q2g3qd?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

在select输入框输入<img src='x' onerror='alert(1)'>，此时浏览器会出现alert弹窗

What is expected?

不应该弹出浏览器对话框

What is actually happening?

弹出浏览器对话框

Environment	Info
ng-zorro-antd	10.1.1
Browser	chrome 87.0.4280.88

经查阅源码发现，在 components/select/select-search.component.ts 文件 syncMirrorWidth 方法中使用了不安全的 innerHTML 赋值，应改为使用 textContent 或者 renderer2.createText() 方法

zhengsansan commented 3 years ago

到底是咋修复的？需要升级到11.0.0版本才行吗？

tyzh commented 3 years ago

mirrorDOM.innerHTML = this.renderer.createText(${inputDOM.value} );

the result of createText is an object, so this code will cause the innerHTML of mirrorDOM is '[object Text]'

createText方法的返回结果是一个对象，这样赋值会导致mirrorDOM元素的innerHTML为 [object Text]

NG-ZORRO / ng-zorro-antd