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

[tctc4869]

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

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

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

[fancy111]

@whoami9894 说实话，给你们解释我很累。。。
你数据是 json 的吧？ text 是'</script><script>alert(11);</script> ，你把这个用 innerText 显示出来，不是注入了吗？
还他的意思是前端 JS 操作数据。。。没后端处理你能操作啥啊？

[moonlord]

@whoami9894
9102 年都过了，现在 2020 年了，我这里反正只有前后端分离的项目

[fancy111]

@moonlord 哈哈 V2EX 没后端处理，你真是逗。
要不你给个网址来吧，直接给你演示。

[moonlord]

@fancy111
你可以试试你说的 “你把这个用 innerText 显示出来，不是注入了吗”，根本不会弹出来
我写的 <script>alert("菜鸡不要说话");</script> 在这里，现在就是 innerText 显示出来的，弹了吗？

[fancy111]

@moonlord 我已经不想说了，不喜欢 BB 。你连网页基本流程都不懂，我给你扯什么啊。你写的<script>是因为 v2 后端过滤的结果，不是只靠前端懂吗？ 不回了

[wget]

不建议前端过滤,针对正常用户没必要,针对攻击者没有用,顺带还可能会暴露后端的过滤规则
实际可用的拦截方案都很复杂,姓名手机号之类的正则校验即可,但是复杂的富文本中,' " < > ? 之类攻击常用字符都有本身的含义,无脑拦截会造成误判

[skyRival]

@moonlord 兄弟，大家都是程序员，说话别那么冲呗。我站你这边，我用的 React，从没有做过 XSS 过滤（因为我坚决抵制了 dangerousSetInnerHTML ）。刚刚用 @whoami9894 这位兄弟的代码试过了，没有注入。

[moonlord]

@fancy111
后端过滤？ Chrome 审查元素会吗？看看是 innerText 还是转码过滤了？球球你了，不信我的，你自己试试好么？

[skyRival]

如果有道友有意见我都在线测试。

[SilentDepth]

不就是个字符转义的事儿，怎么看你们讨论得那么热闹……

[fancy111]

@moonlord
@whoami9894
@skyRival
反正我现在没事，我就一起给你们上一课好了。
你们说前端做了过滤，像 V2 一样，你知道 POST 是可以直接绕过 html 端发送的吗？ 现在我们的回复根本不需要打字到这里点击回复，我可以直接用其他方式发送，那你的 JS 还有什么用？不靠后端的话，前端就会直接显示我上面代码的内容。 要是还不懂，建议自己搭建网站试试，靠纯前端，我给你们测试。

[murmur]

@fancy111
@TangMonk
冷静一下，这兄弟说话有问题，但是道理是可取的，他的思路核心就是将需求缩窄，限制用户的操作，功能越多 bug 越多这是真理
我举一些例子，任天堂的游戏交流只能使用内置的一些，比入你好、你真棒，官方可以对这些话进行本地化，即解决了沟通问题，又解决了监督问题，大家都只能说你好，自然不用做关键字过滤，相比之下 lol 这种祖安文化就是开放的例子
很多国内游戏 id 必须用中文，因为英文奇奇怪怪的词汇太多，不能用英语交流就省去维护英语关键字的成本
如果你让用户写一段签名，那么这段签名要尽可能短，几十个字，就一行，而且是纯文字，而不是像以前的论坛可以用 ubb code，甚至是一些 html 语句进行美化。
dangerousSetInnerHTML，这是真的危险

[moonlord]

@SilentDepth
又抓住一个不懂的。正确答案请看 10 楼。
=。= ，月经贴了，这种东西。

[skyRival]

@fancy111 你说的我们都知道啊，然后呢？我不管前端发送的什么，只要渲染的时候不触发就算是防御成功了呗。

[moonlord]

@fancy111
来你试，我就在这，等着你的 alert

[skyRival]

@fancy111 我对测试和运维确实不擅长，我这刚好有一个空的项目，你说怎么测试我在线测试，如果有哪个我没防住，OK，我马上给我的后端加 xss 过滤。

[SilentDepth]

@moonlord #10 楼主貌似没提到具体需求？禁止 innerHTML 的话，我需要渲染用户自定义 HTML 怎么办？

[fancy111]

@skyRival 看我上面回复的，渲染他说只用 innerText 就行，那肯定是不行的。 另外如果你前端渲染时做其他过滤，我也有办法绕过过滤规则，我不信你们写的代码能有多完美。 尽管给我贴代码，少 BB

[fancy111]

@skyRival 你直接发地址来。 带输入框，加提交显示出来就行。 跟回帖相似

[fancy111]

@moonlord 就在这。。。 呵呵 你真是逗比