前端input输入框中输入html标签，数据加载不正常(DOM型XSS)

最近测试同学在测试功能时，往输入框中输入<script>、<h1>等标签，反显输入框中的内容时，显示不正常，输入DOM型XSS。
使用原生HTML实现的就会解析HTML标签，但经过React渲染的内容正常展示。

输入的内容以element形式展示

React如何防止DOM型XSS

由于React DOM在渲染之前会将渲染内容转换成字符串，进行转义，所以可以有效防止XSS攻击。 同样的代码经过Babel编译后可以正常展示。
在真实DOM中以字符串形式展示。

解决办法

如果目标是让HTML标签文本内容正常显示而不被解析，最简单的方案是嵌入到<script type="text/html">或<script type="text/template">内部，并加上display: block即可。但是若输入内容为script还是会被浏览器解析。于是用createTextNode(data)来创建文本节点。

const remarkNode = document.getElementById('remark');
const remarkInfo = document.createTextNode(remark);
remarkNode!.appendChild(remarkInfo); 

最后，展示正常了。