元素
元素
工具
博客
问答

安全培训中如何避免React里的XSS漏洞？

UE丶沐希 阅读 56
安全

最近公司搞安全开发生命周期培训，提到前端也要防XSS。我在用React写一个动态渲染用户输入内容的功能，但不确定这样写会不会有风险。

我试过直接用{userInput}插值，但听说dangerouslySetInnerHTML更危险。下面是我现在的写法，是不是已经安全了？还是说还得额外处理？

function MessageDisplay({ message }) {
  return (
    <div>
      {message}
    </div>
  );
}
我来解答 赞 6 收藏
二维码
手机扫码查看
反馈
1 条解答
UP主～誉馨
UP主～誉馨 Lv1
你的写法是安全的。

React 默认的 {message} 插值会自动对内容进行 HTML 转义，比如用户输入 ，会直接变成文本显示出来，不会执行。这点比直接操作 innerHTML 的原生 JS 安全多了。

但需要注意几个坑：

一是别滥用 dangerouslySetInnerHTML，这货相当于直接操作 innerHTML，如果你非要渲染用户给的 HTML，必须用 dompurify 这类库先过滤一遍：

import DOMPurify from 'dompurify';







二是如果 message 用在 href、src、onClick 这些属性里，要小心 javascript: 协议和事件处理。比如：



<pre class="pure-highlightjs line-numbers"><code class="language-javascript">// 危险写法

<a href={userUrl}>链接</a>



// 防御方式：检查协议

const safeUrl = userUrl.startsWith('http://') || userUrl.startsWith('https://') 

  ? userUrl 

  : 'about:blank';

<a href={safeUrl}>链接</a>




总结一下：你的代码没问题，放心用。记住别手贱用 dangerouslySetInnerHTML 就行，除非特殊情况必须渲染 HTML，否则能不用就不用。
                

                

                    
                    

                        点赞
                        
                    

                    
                    
                    2026-03-17 21:01
相关推荐
元素
元素
工具
博客
问答
登录/注册