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

[tctc4869]

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

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

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

[moonlord]

@fancy111
V2EX 这么大的输入框就在这里，用的 innerText，输入的啥，显示的啥，你注入一个看看啊？

[skyRival]

@fancy111 空项目，没上线的，刚刚搭好环境。

[fancy111]

@moonlord 跟你这种 SB 我不想回了，你叫 V2 的管理员来，问他后端做了过滤没有好不？

[fancy111]

@skyRival 那你直接写个页面就行，只要你靠前端防的。 三个功能，输入框提交、后端只存数据库、前端你自己做过滤后调用渲染。 接下来我给你演示

[SilentDepth]

你们在争什么呢……V2EX 的页面是后端渲染的吧，那不转义字符可咋办

[moonlord]

@fancy111
我都告诉你了，innerText 的效果，就是输入的啥，显示的啥，不解析内容，你还非说有后端过滤，笑死我了
你写的哪个字符被后端过滤了？

[ooQAQoo]

这楼歪的厉害

[fancy111]

@moonlord 我可拜托你吧，别回我了。 浪费我时间。

[cjc2017]

<script>alert(1)</script>

[moonlord]

@SilentDepth
？？？
正确答案看 10 楼。
转义没转义，右键审查看下不就知道？？？

[moonlord]

@fancy111 笑死我了，行吧行吧，你就当他们后端过滤了你不存在的字符，然后最后总之就没注入成功吧，哈哈哈

[SilentDepth]

@moonlord #70 10 楼的内容我看了啊，所以我在问如果有渲染用户 HTML 要怎么办。以及，大概我们对转义逻辑的理解不同，没说到一件事情上。

[moonlord]

@fancy111 怎么，看不起 V2EX 家的输入框？非要别人给你环境，笑死我了

[lzuntalented]

@moonlord 富文本的处理场景你没考虑，不是所有的输出都是当做字符使用的，富文本中图片链接标签等都存在的

[skyRival]

@fancy111 你可真逗兄弟，我一摸鱼的哪有功夫去部署，内网穿透我现在也没条件。你就上代码，我这边跑起来就 OK，大家都可以看看。

[fancy111]

@skyRival 哦，那你们自己玩吧。

[skyRival]

@SilentDepth @lzuntalented 我之前做的网站没有渲染富文本的需求，这个我不太确定，我的想法是转成 markdown，然后在前端渲染 markdown 。

[SilentDepth]

@moonlord
我概括一下你在 #10 的观点：对于用户输入的内容，一律作为文本节点处理，不要创建 HTML 元素。

首先，没错，这样是可以防止 XSS 。如果业务需求上本不需要用户提供 HTML 结构，这么做没问题。但就是有用户直接提供 HTML 的需求场景啊，这个时候你的这个办法是行不通的。最简单的做法就是 tag name 白名单 + 转义字符（或过滤），我不认为这个办法是「错误」的。

另外，对于后端渲染页面的场景（例如 V2EX，如果我没猜错的话），你要怎么把用户内容精确控制到文本节点内？还是得转义啊。

所以你们到底在争什么……

[skyRival]

@SilentDepth 我觉得应该是在争需不需要后端过滤来防御 XSS 的问题。

[SilentDepth]

@skyRival #77 我这儿 V2EX plus 插件貌似 bug 了，解析不出会话，我就不手动追溯你们的对话了。如果允许的富文本类型是有限的，转成 Markdown 再渲染出来是可行的。如果不是（例如允许用户插入 Gist 组件），要么做复杂的格式转换（高开发成本但更可控），要么直出 HTML 然后走传统的 XSS 处理（低开发成本但难可控）。