防止 xss 和 sql 注入而进行非法字符过滤， js 前端有什么几乎一劳永逸的方式？

[tctc4869]

网上有各种防止 xss 和 sql 注入的方案，前端的也有，后端的也有。各种方案太多太杂，看的我头疼。

我的策略是，前端负责非法字符的过滤，转换，显示，让过滤后的安全数据入库，以及能安全的显示给用户看。而后端处理非法字符，就很简单。一旦检测到非法字符就直接返回 404，403,400 等错误码。

那么问题来了，先不考虑富文本，就那种普通的文本框，假设每个用户用浏览器操作，在输入框里输入的内容中，都可能带有 sql 注入，xss 攻击所用的代码的一段文字或文章例，前端如何负责这些带有非法字符的过滤转换？让数据能安全的入库，然后在数据显示时，又能显示用户输入时的样子，又不出问题呢。

[zhangysh1995]

考虑一下验证方法，把这篇论文实现，The essence of command injection attacks in web applications

[zhangysh1995]

链接 http://portal.acm.org/citation.cfm?doid=1111037.1111070，根据原文注入都不是事儿

[no1xsyzy]

严格白名单新建一套描述富文本的语言，然后写个该语言到 HTML 的编译器
那建立一个和 html 很像的语言也没什么问题，但别偷懒，整个重新 parse 分析语义然后再重新渲染，不要 passthru
BBcode 和 Markdown 在一定程度上就是逼自己和后续维护者别偷懒

[jinmaoi]

@fancy111 我觉得他的意思根本就不是前端过滤输入,只是过滤输出而已.况且你举的那个 xss 并没有效果

[aguesuka]

@skyRival 是让你来注我不是我来注你

[Xezzon]

@aguesuka 你可真有意思，谁说了要这么写了？没事放 pre 在那干嘛？难道专门为了让别人来 xss 所以我就得不用 div 用 pre 呗？

[fxxwor99LVHTing]

前端做不了，

[buffzty]

没人说用 react 吗? 用 react 不会出现 xss,显示时自动过滤
render() {
const txt = '</script><script>alert(11);</script>'
return <div>{txt}</div>
}
// output
&lt;/script&gt;&lt;script&gt;alert(11);&lt;/script&gt;

[mxT52CRuqR6o5]

@buffzty xss 注入很多时候是有富文本的需求的

[mxT52CRuqR6o5]

sql 注入靠前端防不了，攻击者完全可以自己手动构造请求不需要通过前端去发请求
Xss 注入可以靠把富文本转成非 html 的抽象来解决(比如 quill)
普通的文本框去设置 innerHTML 是水平不行

[buffzty]

现在 orm 都是预处理.怎么可能注入呢

[binux]

@fancy111 #6 说好的只用 innerText 的，如果 '</script><script>alert(11);</script>' 是用户输入的话，它是怎么进入 HTML 的？ 你还不是拼接 HTML 了。

[rsjztz]

关于 xss，我看过前端拦截 xss 语句运行的操作，sqli 还是得后端过滤

[canwushuang]

你正则能过滤 get，还能大量过滤 post 和 put ？多次编码随你正则一样绕。超长字符击穿防线也是可以，emoji 也行。别防了。。。

[canwushuang]

@sagaxu % 直接 like

[neoblackcap]

要过滤就直接先后端解析一遍，有问题就干掉，没问题就放行

[hblf]

都 0202 年了就别想着用过滤特殊字符解决 sqli 了吧，预编译比过滤安全一万倍
xss 的过滤参考 owasp 自己出的 api
各位开发大佬平时真的不看 owasp 的文档吗？

[Hyduan]

话说这个会有 xss 问题么。。各位大佬试试 https://codepen.io/Hyduan/pen/bGVqLQr

[Hyduan]

@Hyduan 暂且不考虑需要渲染 HTML 结构的情况，这种情况确实需要过滤

[tctc4869]

@buffzty 大多数情况下可以用 orm 或 prepared statement 实现 sql 防注入，但也有不得不必须用拼接 sql 语句的方式。这类方式多数是复杂的查询语句