基于React+PHP(Codeigniter)的AJAX应用需防范跨站脚本攻击吗？

嘿，这个问题问到点子上了！很多人以为纯AJAX的单页应用就不用管XSS，但其实这里面有不少细节要注意，我来给你拆解清楚：

首先，React自带的XSS防护机制 #

你尝试把<script>alert('hey');</script>直接渲染到React组件的HTML元素里，发现脚本没执行对吧？这是因为React在渲染JSX文本内容时，默认会自动转义所有特殊字符——它会把<转成<，>转成>，这样恶意脚本就变成了纯文本，不会被浏览器解析执行。这一步是React帮你做的，确实能挡住大部分基础的XSS攻击。

但仅依赖AJAX的应用，依然需要做XSS处理！ #

别因为React的默认防护就掉以轻心，原因有这几点：

• 前端防护不是万能的：如果你在项目中用到了dangerouslySetInnerHTML（用来直接渲染HTML内容），这时候React会关闭自动转义，恶意脚本就有可能被执行。这种场景下，不管数据是不是AJAX来的，你都必须手动对内容做安全处理。
• 数据可能被复用在其他场景：你通过AJAX拿到的用户输入，说不定哪天会被后端用来生成PDF、发送邮件，或者在非React的页面中展示——这些场景没有React的转义保护，后端的XSS处理就成了最后一道防线。
• 纵深防御是安全最佳实践：前端+后端双重防护，能最大程度降低风险，毕竟没人能保证前端代码永远没有漏洞（比如第三方组件的安全问题）。

CodeIgniter端的XSS处理怎么做？ #

CodeIgniter其实有现成的XSS防护工具，你可以这么用：

• 接收用户输入时，开启XSS过滤：$this->input->post('your_input', TRUE)，第二个参数设为TRUE就会自动对输入做XSS清理。
• 或者手动调用安全类的方法：$clean_data = $this->security->xss_clean($user_input)，把处理后的数据再传给前端。

总结一下 #

1. React默认渲染文本是安全的，但不要把它当成唯一的防护手段。
2. 后端CodeIgniter必须对所有用户输入做XSS验证和清理，这是纵深防御的关键。
3. 尽量避免使用dangerouslySetInnerHTML，如果必须用，一定要用安全工具先清理内容，再渲染。

内容的提问来源于stack exchange，提问作者i.brod