React中直接为div设置innerHTML是否存在安全风险？

是否安全？ #

绝对不安全——不管是原生DOM操作的innerHTML还是React提供的dangerouslySetInnerHTML，本质都是直接将字符串解析为HTML并插入页面DOM，完全绕过了React默认的文本转义安全机制，存在明确的XSS（跨站脚本）攻击风险。

攻击风险的产生逻辑 #

以你遇到的登录场景为例：

• 假设后端返回的认证失败信息没有经过严格的HTML转义处理，攻击者可以通过构造请求，让后端返回包含恶意脚本的内容，比如<img src=x onerror=alert(document.cookie)>或者<script>window.location.href='钓鱼网站地址'</script>。
• 当你用innerHTML把这段内容插入页面时，浏览器会把它当成合法HTML解析并执行其中的脚本——轻则窃取用户Cookie、篡改页面内容，重则引导用户跳转到钓鱼网站，造成账号被盗等损失。
• 哪怕后端是你自己维护的，也可能因为输入验证疏漏中招：比如用户故意在用户名里输入<script>恶意代码</script>，后端返回“用户名<script>...</script>不存在”这类错误提示，同样会触发脚本执行。

原生DOM操作与dangerouslySetInnerHTML的区别 #

两者风险程度完全一致，唯一的不同是：React的dangerouslySetInnerHTML是官方提供的“危险操作入口”，用命名明确提醒开发者这是不安全的行为；而原生DOM操作是直接跳过React的管控，本质都是绕开了React的安全防护。

安全的替代方案 #

• 普通文本场景：直接用React的默认文本渲染，比如<div>{errorMessage}</div>——React会自动转义所有HTML标签，把<script>这类内容当成普通字符串显示，不会执行任何脚本。
• 必须插入HTML的场景：确保内容是完全可信的（比如你自己硬编码的静态HTML），如果是动态内容，必须用HTML过滤库先过滤掉所有恶意标签和脚本，再通过dangerouslySetInnerHTML插入。

内容的提问来源于stack exchange，提问作者Kamal Palei